Отладчик javascript


Содержание

Отладка JavaScript

Знакомство с консолью

Общаясь недавно со своими коллегами, я был удивлен тем, что многие ни разу не использовали в своей работе встроенные в браузер отладчик консоли для JavaScript. К сожалению, один из них работает в моей фирме, не буду оглашать его имени.
Для тех из вас, кто пока не знаком с консолью браузера API, и написана эта статья.

Визуальная отладка

При работе над сайтом отладка главным образом опирается на визуальное восприятие. Предельно легко увидеть неправильно выровненные колонки, накладывающийся друг на друга текст, провести необходимую правки и обновить страницу. Для PHP сообщение об ошибке останавливает скрипт и отображает проблему прямиком на странице. Вкратце: большую часть ошибок, которые можно исправить сразу, легко увидеть после загрузки страницы.

Консоль API – это объект ( console ), который можно использовать для вывода отладочной информации (его можно использовать, как только страница будет загружена браузером). Наибольшую эффективность консоль показывает при работе с JavaScript.

Отладка javascript firebug

Лучшую консоль API (и руководство для нее, на русском) имеет Firebug, при этом пользоваться консолью можно не только в Firefox. Большинство современных браузеров имеют инструментарий, в состав которого входит вкладка консоль. В Chrome и Safari вывести его на экран можно, кликнув правой кнопкой мышки и выбрав ‛ Inspect Element ‛ ( Inspect Element ) в контекстном меню.

Простые примеры

console.log

Консоль имеет массу опций, однако вы, скорее всего, на постоянной основе будете использовать только 3-4. Основываясь на личном опыте, я могу сказать, что функция log() является наиболее полезной. Она создает сообщение в консоли, это сообщение может содержать обычный текст, элементы DOM или переменные. Ниже приведены примеры для наиболее распространенных функций.

В этом скрипте консоль выводит различные результаты, которые зависят от того, пуста ли переменная full_name или нет.

Варианты использования функции console.log()

Символ %s заменяется значением переменной family . Можно добавить несколько переменных, но не забудьте для каждой подключить %s .

Можно также использовать следующие комбинации: %d — для целых чисел, %f — для чисел с плавающей точкой (например, 1.3333)

console.trace()

console.dir()

Здесь по событию jQuery click консоль возвратит информацию об атрибутах элемента, по которому пользователь кликнул мышкой.

console.info()

Лучше понять работу с консолью поможет созданная мною демо-страница. Зайдите на нее, предварительно открыв свою консоль; чтобы получить дополнительные пояснения, просмотрите исходный код страницы.

Прямой ввод разрешен

Консоль – это нечто более, чем простой вывод информации, она также принимает и прямой ввод, подобно командной строке. Например, напечатайте ‛ document ‛ и нажмите enter, чтобы возвратить страницу.

Сохраняйте страницу чистой

Конечно, перед тем как выложить страницу в интернете методы объекта console лучше удалить, однако вы вполне можете их оставить, ведь пользователь их даже не заметит. В следующий раз при работе с JavaScript воспользуйтесь консолью. Это намного проще, чем создавать модальные окна при помощи команды alert() . Когда речь заходит о поиске и устранении неисправностей, ненавязчивость – это замечательно.

Отладка и точки прерывания

Чтобы отладить скрипт javascript вы можете использовать точки прерывания. Перейдите по вкладке «scripts» и выберите нужный скрипт. Далее ищите нужную строчку кода и помечаете ее щелчком мышью (левая сторона консоли) – этим вы создали точку останова. Обновите страницу, и выполнение кода прервется на заданной точке останова. Теперь вы можете навести курсор мышки на любую переменную, и вы получите ее значение. Справа можно увидеть изменении кода и изменение глобальных и локальных переменных.

Ход выполнение скрипта можно регулировать при помощи кнопок:

Шаг с обходом(2) — Выполняет текущую строку кода и переходит к следующей строчке кода, а затем ОСТАНАВЛМВАЕТСЯ, если на пути встречается какая-либо функция обходит ее стороной. Удобно использовать там где встречается селектор jQuery ( $ ), так как вы не попадете в недру библиотеки jQuery.

Шаг с заходом(1) – Похожа на предыдущую, но погружается внутрь встречаемой функции и останавливается на первой строчке кода ф-и. Также останавливается на каждой строке кода.

Шаг с выходом(3) – Если вы вошли при помощи Шаг с заходом(1) в какую-либо функцию, то нажатие по этой кнопке вызовет выполнение текущей функции до конца и перейдет к родительской функции. В отличие от двух предыдущих шагов отладчик не останавливается на каждой строке и возвращается на ту строку, из которой была вызвана изначально функция.

Наблюдение за сценарием

Окно «Watch» (наблюдение, в правой части firebug) предоставляет список переменных и функций в контексте текущей строки.

Поле «новое наблюдение» позволяет добавлять свои переменные и выражение, который вы хотите отследить и, соответственно, выполнить.

Точка останова в скрипте: debugger

Точку останова можно поставить непосредственно в скрипте, для этого существует специальная команда:

Прервет скрипт на той строке, где установлен debugger .

console.trace()

console.trace() — это вывод стека до текущего момента

Замер времени

Профилирование

Профилирование — сбор характеристик работы программы, таких как время выполнения отдельных фрагментов (обычно подпрограмм), число верно предсказанных условных переходов, число кэш-промахов и т. д. Инструмент, используемый для анализа работы, называют профилировщиком или профайлером (англ. profiler). Обычно выполняется совместно с оптимизацией программы.

Как отслеживать события

Firefox — Записывать события

Firefox + Firebug + Firequery = Показывает события навешанные при помощи jQuery

JavaScript Отладки

Ошибки могут (будет) произойти, каждый раз, когда вы пишете новый код компьютера.

Отладка кода

Программный код может содержать синтаксические ошибки или логические ошибки.

Многие из этих ошибок трудно диагностировать.

Часто, когда программный код содержит ошибки, ничего не произойдет. Нет сообщений об ошибках, и вы не получите указания, где искать ошибки.

Поиск (и исправление) ошибок в программном коде называется отладкой кода.

Отладчики JavaScript

Отладка непростая. Но, к счастью, все современные браузеры имеют встроенный отладчик JavaScript.

Встроенные отладчики можно включить и выключить, вынуждая сообщать пользователю об ошибках.

С помощью отладчика можно также задавать точки останова (места, где может быть остановлено выполнение кода) и проверять переменные во время выполнения кода.

Обычно, в противном случае следуйте инструкциям в нижней части этой страницы, вы активируете отладку в вашем браузере с помощью клавиши F12 и выбираете «Console» в меню отладчика.

Метод Console. log ()

Если обозреватель поддерживает отладку, для отображения значений JavaScript в окне отладчика можно использовать консоль. log ():

Отладка и устранение распространённых ошибок в JavaScript

Временами работа над кодом JavaScript заставляет чувствовать себя выдохшимся и измождённым, поэтому некоторые подсказки по отладке никогда не будут лишними. На примерах из песен мы постараемся разобрать типичные ошибки в коде на JS и способы, которыми их можно найти и устранить.

Свойство не определено

Этот код выдаёт ошибку «Uncaught TypeError: Cannot read property ‘lucky’ of undefined». Дело в том, что объект girl не имеет свойства named , хотя у него есть свойство name . Поскольку свойство girl.named не определено, мы не можем получить к нему доступ, то есть оно просто не существует. Если мы заменим girl.named.lucky на girl.name , то код вернёт нам «Lucky».

Свойство — некоторое значение, привязанное к объекту JavaScript. Почитать больше об объектах можно здесь (статья на английском языке).

Отладка ошибок TypeError

Ошибки типа TypeError появляются, когда вы пытаетесь выполнить действия с данными, которые не соответствуют нужному типу, например применяете .bold() к числу, запрашиваете свойство undefined или пытаетесь вызвать как функцию что-то, не являющееся функцией. Например, вы увидите такую ошибку, если вызовете girl() , поскольку это объект, а не функция. В последнем случае вы получите «Uncaught TypeError: yourVariable.bold is not a function» и «girl is not a function».

Для отладки этих ошибок надо разобраться с переменными. Что такое girl ? И что такое girl.named ? Вы можете понять это изучая код, выводя переменные с помощью console.log , используя команду debugger или просто напечатав имя переменной в консоли. Удостоверьтесь, что вы можете манипулировать содержащимся в переменной типом данных. Если тип данных не подходит, модифицируйте его нужным образом, добавьте условие или блок try..catch , чтобы контролировать выполнение операции, или используйте эту операцию на другом объекте.

Переполнение стека

Если верить авторам песни «Baby One More Time», слово «hit» в строчке «Hit me baby, one more time» означает «позвони», то есть Бритни хочет, чтобы её бывший позвонил ей ещё раз. Это, возможно, приведёт к ещё большему количеству звонков в будущем. По сути это рекурсия, которая может вызвать ошибку в случае переполнения стека вызовов.

ZIP Service, Москва, можно удалённо, от 100 000 ₽

Конкретные сообщения об ошибке зависят от браузера, но выглядят они примерно так:

Переполнение стека может произойти, если в рекурсии не предусмотрен базовый случай или если код никогда не обращается к этому случаю.

В показанной выше функции stillBelieve никогда не примет значение false, и поэтому мы раз за разом будем вызывать oneMoreTime , увеличивая одиночество, и никогда не завершим выполнение функции.

Если же Бритни решит положиться на своих друзей, это уменьшит её одиночество, она перестанет верить, что можно вернуть отношения, и не будет больше ждать звонка от бывшего партнёра.

Есть похожие случаи с бесконечными циклами, когда система не выдаёт сообщение об ошибке, но вместо этого страница, на которой исполняется код, зависает. Это происходит в случае цикла while без условия завершения.

Исправить это можно примерно так же, как и предыдущий пример.

Отладка бесконечных циклов и рекурсий

Для начала, если возникла проблема с бесконечным циклом, закройте вкладку, если вы пользуетесь Chrome или Edge, или окно браузера, если у вас Firefox. Затем просмотрите код: есть ли там что-то, что создаёт бесконечный цикл или рекурсию. Если ничего не обнаружили — добавьте в цикл или функцию команду debugger и проверьте значение переменных на нескольких начальных итерациях. Если они не соответствуют ожидаемым, вы это обнаружите.

В приведённом выше примере стоило бы добавить debugger самой первой строкой функции или цикла. Затем нужно открыть отладочную вкладку в Chrome и изучить переменные в Scope . С помощью кнопки «next» можно проследить, как они меняются с каждой итерацией. Обычно это помогает найти решение проблемы.

Здесь можно найти руководство на английском языке по отладке с помощью Chrome’s DevTools, а здесь — для Firefox.

Ошибка синтаксиса

SyntaxError — вероятно самая распространённая разновидность ошибок в JavaScript. Эти ошибки возникают, если вы не соблюдаете правила синтаксиса языка. Копируя посыл песни Бритни «Everytime», JavaScript говорит отсутствующим скобкам и кавычкам: «Вы нужны мне, крошки».

Соответствующие расширения текстового редактора помогут избежать ошибок. Bracket Pair Colorizer размечает скобки в коде разными цветами, а Prettier или другой инструмент статического анализа кода поможет быстро найти ошибки. Постарайтесь придерживаться правильной разметки и делайте блоки кода как можно короче и с минимальной вложенностью. Такой подход сильно облегчает отладку.

Теперь, вооружившись новыми навыками отладки, вы станете немного сильнее в JavaScript, чем были вчера.

Отладка скриптов в браузере Chrome

Отладка скриптов в браузере Chrome

Здравствуйте! В продолжении темы обработки ошибок в JavaScript поговорим об отладке скриптов силами браузера. Для примера возьмем самый лучший браузер на Земле — Chrome.

В принципе такие инструменты есть в любом браузере, а если учесть, что большая часть браузеров работает на одном движке, что и Chrome, то тут в принципе не будет особых различий. Также еще очень хорош Firefox со своим инструментом Firebug.

Общий вид панели Sources

Запустите браузер Chrome.

Нажмите F12, при этом запустятся Инструменты разработчика.

Перейдите на вкладку Source

Здесь можно выделить 3 зоны:

  1. Область исходных файлов. В ней находятся все файлы проекта
  2. Область текста. В этой области находятся текст файла
  3. Область информации и контроля. О ней разговор пойдет позже

Как правило при отладке область исходных файлов не нужна, поэтому ее можно скрыть кнопкой.


Общие кнопки управления

3 наиболее часто используемые кнопки управления:

Формат Эта кнопка позволяет отформатировать код. Может вам понадобиться, если вы желаете отформатировать чужой код. Консоль Очень важная кнопка по нажатию на которой открывается консоль. В консоли можно вводить различные команды и операторы на JavaScript. Окно В случае с большим участком кода позволяет открыть код в отдельном окне.

Точки останова

Рассмотрим на примере файла pow.js. Если клацнуть на любой строке этого файла, то на этой строке будет задана точка останова.

Выглядеть это примерно так:

Еще точку останова называют брейкпойнт это больше жаргонизм, который ассимилировался в нашем языке и дословно тоже означает точка прерывания.

В коде, где вы сделали точку останова можно смотреть значения переменных на каждом шаге, в общем всячески его отслеживать.

Информация о точке останова появляется на вкладке Breakpoints.

Вкладка Breakpoints очень полезна, когда код очень большой, она позволяет:

  • Быстро перейти на то место кода, где поставлен брейкпойнт простым кликом на текст.
  • Временно отключить точку останова кликом на чекбокс.
  • Быстро удалить точку останова правым кликом на текст и выбором Remove.
  • Точку останова можно инициировать и напрямую из а скрипта, командой debugger:
  • Правый клик на номере строки pow.js позволит вам создать так называемую условную точку останова (conditional breakpoint), т.е. задать условие, при котором точка останова сработает.

Остановиться и осмотреться

Поскольку наша функция выполняется одновременно с загрузкой страницы, то самый простой способ активировать отладчик JavaScript – это перезагрузить её. Для этого нажмите F5. И при этом выполнения скрипта будет остановлено на 6-й строке.

Обратите внимание на информационные вкладки:

  • Watch Expressions – здесь можно увидеть текущее значение переменных , которые вы отслеживаете в скрипте.
  • Call Stack – показывает стек вызовов — это все вызовы приведшие к этой строке кода.
  • Scope Variables – показывает переменные. Причем показывает как глобальные так и локальные переменные.

Управление выполнением

А теперь давайте «погоняем » скрипт и отследим его работу. Обратите внимание на панель сверху там находятся 6 кнопок работу которых мы и рассмотрим.

– продолжить выполнение, или можно нажать на клавишу F8. Эта кнопка продолжает выполнение скрипта. Таким образом мы можем пошагово проходить наш сценарий как будто он запускается в браузере. – сделать шаг, не заходя в функции, или клавиша F10.

Выполнить один шаг скрипта не заходя при этом внутрь функции.

– сделать шаг внутрь функции, клавиша F11. Выполняет один шаг скрипта и при этом заходит внутрь функции. – выполнять до выхода из текущей функции, клавиша Shift+F11.

выполняет полностью код, находящийся в функции.

– отключить/включить все точки останова. Эта кнопка просто отключает и при повторном нажатии включает все точки останова. – включить/отключить автоматическую остановку при ошибке. Данная кнопка весьма полезна при отладке и позволяет включать и отключать автоматическую остановку при ошибке.

Сам процесс отладки заключается в пошаговом прохождении программы и в наблюдении за значениями переменных.

Консоль браузера

При отладке кода скрипта бывает полезным перейти на вкладку Console и посмотреть нет ли там ошибок также можно выводить информацию в консоль с помощью console.log().

Консоль доступна в любом браузере

Ошибки в консоли

Ошибки JavaScript скриптов можно посмотреть в консоли.

В консоли вы можете увидеть:

Красная строка – это собственно сообщение об ошибке.

Если вы кликните на ссылке pow.js в консоли, справа в строке с ошибкой, то вы перейдете непосредственно к тому месту в скрипте, где эта ошибка произошла.

Итого

Отладчик вам позволяет:

  • Останавливаться на отмеченном месте (точка останова) или по команде debugger.
  • Выполнять код – отлаживать программу по одной строке или до определённого места.
  • Отслеживать переменные, выполнять команды в консоли и т.п.

В инструментах разработчика есть и другие вкладки как Elements позволяет смотреть HTML-код страницы, Timeline показывает сколько файлов загружает браузер и сколько времени у него на это уходит. Но нам пока эт вкладки не очень интересны.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

JavaScript — отладка

Время от времени разработчики совершают ошибки при кодировании. Ошибка в программе или скрипте называется ошибкой.

Процесс поиска и исправления ошибок называется отладкой и является нормальной частью процесса разработки. В этом разделе рассматриваются инструменты и методы, которые могут помочь вам в отладке задач.

Сообщения об ошибках в IE

Самый простой способ отслеживания ошибок — включить информацию об ошибках в вашем браузере. По умолчанию Internet Explorer показывает значок ошибки в строке состояния при возникновении ошибки на странице.

Двойной щелчок по этому значку приведет вас к диалоговому окну, отображающему информацию о конкретной ошибке.

Поскольку этот значок легко упускать из вида, Internet Explorer дает вам возможность автоматически отображать диалоговое окно «Ошибка» всякий раз, когда возникает ошибка.

Чтобы включить эту опцию, выберите « Инструменты» → « Свойства обозревателя» → вкладка «Дополнительно». а затем, наконец, установите флажок «Показать уведомление о каждом скрипте», как показано ниже —

Сообщения об ошибках в Firefox или Mozilla

Другие браузеры, такие как Firefox, Netscape и Mozilla, отправляют сообщения об ошибках в специальное окно, называемое Консоль JavaScript или Консоль ошибок. Чтобы просмотреть консоль, выберите « Инструменты» → « Консоль ошибок» или «Веб-разработка».

К сожалению, поскольку эти браузеры не дают визуальной информации при возникновении ошибки, вы должны держать консоль открытой и следить за ошибками по мере выполнения вашего скрипта.

Уведомления об ошибках

Уведомления об ошибках, отображаемые в консоли или через диалоговые окна Internet Explorer, являются результатом как синтаксиса, так и ошибок времени выполнения. Эти уведомления об ошибках включают номер строки, в которой произошла ошибка.

Если вы используете Firefox, вы можете нажать на ошибку, доступную в консоли ошибок, чтобы перейти к точной строке в скрипте с ошибкой.

Как отлаживать скрипт

Существуют различные способы отладки вашего JavaScript — Использовать JavaScript Validator

Один из способов проверить код JavaScript для странных ошибок — запустить его через программу, которая проверяет ее, чтобы убедиться, что она действительна и что она соответствует официальным синтаксическим правилам языка. Эти программы называются синтаксическими анализаторами или просто валидаторами для краткости и часто идут с коммерческими редакторами HTML и JavaScript.

Наиболее удобным валидатором для JavaScript является JavaScript Lint Дугласа Крокфорда, который доступен бесплатно в JavaScript Lint Дугласа Крокфорда.

Просто зайдите на эту веб-страницу, вставьте код JavaScript (только JavaScript) в предоставленную текстовую область и нажмите кнопку jslint. Эта программа будет анализировать ваш код JavaScript, гарантируя, что все определения переменных и функций следуют правильному синтаксису. Он также будет проверять инструкции JavaScript, такие как if и while, чтобы они также соответствовали правильному формату

Добавить код отладки в ваши программы

Вы можете использовать методы alert() или document.write() в своей программе для отладки вашего кода. Например, вы можете написать что-то следующее:

Изучая содержимое и порядок alert() по мере их появления, вы можете легко проверить работоспособность своей программы.

Как использовать отладчик JavaScript

Отладчик — это приложение, в котором все аспекты выполнения скрипта находятся под контролем программиста. Отладчики обеспечивают мелкомасштабный контроль над состоянием скрипта через интерфейс, который позволяет вам проверять и устанавливать значения, а также контролировать поток выполнения.

Как только сценарий загружен в отладчик, его можно запустить по одной строке за раз или дать указание остановиться на определенных контрольных точках. Когда выполнение остановлено, программист может проверить состояние скрипта и его переменных, чтобы определить, что-то не так. Вы также можете просматривать переменные для изменения их значений.

Полезные советы для разработчиков

Вы можете учесть следующие рекомендации, чтобы уменьшить количество ошибок в ваших сценариях и упростить процесс отладки —

  • Используйте много комментариев. Комментарии позволяют вам объяснить, почему вы написали сценарий так, как вы это делали, и объяснить особенно сложные разделы кода.
  • Всегда используйте отступы, чтобы ваш код был легко читаемым. Отступы также облегчают вам сопоставление начальных и конечных тегов, фигурных скобок и других элементов HTML и скрипта.
  • Напишите модульный код . По возможности группируйте свои заявления в функции. Функции позволяют группировать связанные операторы, а также тестировать и повторно использовать части кода с минимальными усилиями.
  • Будьте последовательны в том, как вы называете свои переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
  • Используйте согласованный синтаксис при именовании переменных и функций. Другими словами, держите их в нижнем регистре или в верхнем регистре; если вы предпочитаете нотацию Camel-Back, используйте ее последовательно.
  • Проверять длинные скрипты модульным способом. Другими словами, не пытайтесь написать весь скрипт перед тестированием любой его части. Напишите часть и запустите ее, прежде чем добавлять следующую часть кода.
  • Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
  • Следите за кавычками . Помните, что кавычки используются парами вокруг строк и что оба кавычки должны быть одного и того же стиля (одного или двух).
  • Следите за своими равными знаками . Вы не должны использовать один = для целей сравнения.
  • Явным образом объявляю переменные с помощью ключевого слова var.
Илон Маск рекомендует:  Что такое код continue

JavaScript – Отладка

Процесс поиск и исправление ошибок называется отладкой и является нормальной частью процесса развития. В этом разделе рассматриваются инструменты и методы, которые могут помочь вам с задачами отладки.

Сообщения об ошибках в IE

Самый простой способ отследить ошибки является включение информации об ошибках в вашем браузере. По умолчанию Internet Explorer отображается значок ошибки в строке состояния при возникновении ошибки на странице.

Дважды щелкнув этот значок, перенесет вас в диалоговое окно с указанием информации о конкретной ошибке, которая произошла.

Поскольку этот значок легко упустить из вида, Internet Explorer дает возможность автоматически показывать диалоговое окно ошибки при возникновении ошибки.

Чтобы включить эту опцию, выберите Инструменты → Свойства обозревателя → вкладка “Дополнительно” и, наконец, проверьте вариант «Показывать уведомление о каждой ошибке сценария» в Обзоре, как показано ниже:

Сообщения об ошибках в Firefox или Mozilla

Другие браузеры, такие как Firefox, Netscape и Mozilla отправляют сообщения об ошибках в специальное окно под названием Консоль или Консоль ошибок. Для просмотра консоли выберите Веб-разработка → Консоль.

К сожалению, поскольку эти браузеры не дают визуальную индикацию при возникновении ошибки, вы должны держать консоль открытой и смотреть наличие ошибок, когда ваш скрипт выполняется.

Сообщения об ошибках

Уведомления об ошибках, которые появляются на консоли или через диалоговое сети коробки проводника в результате оба синтаксиса и ошибки времени выполнения. Эти уведомления об ошибках содержат номер строки, в которой произошла ошибка.

Если вы используете Firefox, то вы можете нажать на ошибки в консоли ошибок, чтобы перейти на точную строку в скрипт с ошибками.

Как отлаживать скрипт

Существуют различные способы для отладки JavaScript:

Использование валидатора в JavaScript

Один из способов проверить код JavaScript на наличие странных ошибок – запустить его с помощью программы, которая проверяет его, чтобы убедиться, что он действителен и что он следует официальным правилам синтаксиса языка. Эти программы называются проверяющие парсеры или просто валидаторы для краткости, и часто приходят с коммерческими HTML и JavaScript редакторами.

Наиболее удобный валидатор для JavaScript – это JavaScript Douglas Crockford’s JavaScript Lint, который доступен бесплатно на языке JavaScript Douglas Crockford’s JavaScript Lint (http://www.jslint.com).

Просто посетите эту веб-страницу, вставьте код JavaScript (только JavaScript) в текстовую область и нажмите кнопку jslint. Эта программа будет обрабатывать Ваш JavaScript-код, гарантируя, что все переменных и определения функций следуют за правильностью синтаксиса. Он также проверит операторы JavaScript, такие как if и while, чтобы убедиться, что они тоже следуют правильному формату.

Добавить отладочный код для ваших программ


Вы можете использовать методы alert() или document.write() в вашей программе для отладки кода. Например, вы могли бы написать что – то вроде этого:

Рассматривая содержание и порядок alert(), как они появляются, вы можете проверить состояние вашей программы.

Использование JavaScript Debugger

Отладчик является приложением, которое которое размещает все аспекты выполнения скрипта под контролем программиста. Отладчики обеспечивают точный контроль над состоянием скрипта через интерфейс, который позволяет проверять и устанавливать значения, а также управлять потоком выполнения.

После загрузки скрипта в отладчик его можно запускать по одной строке за раз или поручить остановить работу в определенных точках останова. Как только выполнение остановлено, программист может проверить состояние скрипта и его переменных, чтобы определить, если что-то не так. Вы также можете следить за изменениями переменных в их значениях.

Полезные советы для разработчиков

Вы можете держать следующие советы на виду, чтобы уменьшить количество ошибок в скриптах и ​​упростить процесс отладки:

  • Используйте большое количество комментариев. Комментарии позволяют объяснить, почему вы написали сценарий так, как вы делали и объяснять особо сложные участки кода.
  • Всегда используйте отступы, чтобы сделать ваш код легко читаемым. Отступ заявления также делает его более легким для вас, чтобы совпадали теги начала и конца, фигурные скобки и другие HTML и элементы сценариев.
  • Написать модульный код. Всякий раз, когда это возможно, группировать высказывания в функцию. Функции позволяют вам сгруппировать связанные заявления, а также тестировать и повторное использование часть кода с минимальными усилиями.
  • Будьте последовательны в том, как вы называете переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
  • Используйте последовательный синтаксис именования переменных и функций. Другими словами, держать их все в нижнем регистре или все прописными буквами; если вы предпочитаете технику верблюда, используйте ее постоянно.
  • Протестируйте длинные сценарии по модульному принципу. Другими словами, не пытайтесь писать весь сценарий, прежде чем проверять любую ее часть. Написать кусок и заставить его работать, прежде чем добавлять следующую порцию кода.
  • Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
  • Смотрите свои кавычки. Помните, что кавычки используются парами вокруг строк, и что обе кавычки должны быть одного и того же стиля (либо одинарные или двойные).
  • Смотрите свои знаки равенства. Вы не должны использоваться одиночные = для целей сравнения.
  • Объявляйте переменные явно используя ключевое слово var.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Отладка приложения JavaScript или TypeScript в Visual Studio Debug a JavaScript or TypeScript app in Visual Studio

Visual Studio позволяет выполнять отладку кода JavaScript и TypeScript. You can debug JavaScript and TypeScript code using Visual Studio. Вы можете задавать и использовать точки останова, подключать отладчик, проверять значения переменных, просматривать стек вызовов и применять другие функции отладки. You can set and hit breakpoints, attach the debugger, inspect variables, view the call stack, and use other debugging features.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого. If you haven’t already installed Visual Studio, go to the Visual Studio downloads page to install it for free. В зависимости от методов, используемых для разработки приложений, вам может потребоваться установить вместе с Visual Studio рабочую нагрузку Разработка Node.js. Depending on the type of app development you’re doing, you may need to install the Node.js development workload with Visual Studio.

Отладка серверного скрипта Debug server-side script

Открыв проект в Visual Studio, откройте файл JavaScript с серверным скриптом (например, server.js) и щелкните в области слева, чтобы задать точку останова: With your project open in Visual Studio, open a server-side JavaScript file (such as server.js), click in the gutter to the left gutter to set a breakpoint:

Точки останова — это один из самых простых и важных компонентов надежной отладки. Breakpoints are the most basic and essential feature of reliable debugging. Точка останова указывает, где Visual Studio следует приостановить выполнение кода, чтобы вы могли проверить значения переменных или поведение памяти либо выполнение ветви кода. A breakpoint indicates where Visual Studio should suspend your running code so you can take a look at the values of variables, or the behavior of memory, or whether or not a branch of code is getting run.

Чтобы запустить приложение, нажмите клавишу F5 (или выберите пункт меню Отладка > Начать отладку). To run your app, press F5 (Debug > Start Debugging).

Выполнение отладчика прервется в установленной точке останова (текущий оператор выделяется желтым цветом). The debugger pauses at the breakpoint you set (the current statement is marked in yellow). Теперь вы можете изучить состояние приложения, наводя указатель мыши на переменные в текущей области и используя окна отладчика, такие как Локальные и Контрольные значения. Now, you can inspect your app state by hovering over variables that are currently in scope, using debugger windows like the Locals and Watch windows.

Чтобы продолжить выполнение приложения, нажмите клавишу F5. Press F5 to continue the app.

Если вы хотите использовать Средства Chrome для разработчиков (средства F12), нажмите клавишу F12. If you want to use the Chrome Developer Tools or F12 Tools, press F12. С их помощью можно изучить модель DOM и взаимодействовать с приложением с помощью консоли JavaScript. You can use these tools to examine the DOM and interact with the app using the JavaScript Console.

Отладка клиентского скрипта Debug client-side script

Visual Studio обеспечивает отладку на стороне клиента только для Chrome и Microsoft Edge (Chromium). Visual Studio provides client-side debugging support for Chrome and Microsoft Edge (Chromium) only. В некоторых сценариях отладчик автоматически останавливается на точках останова в коде JavaScript и TypeScript, в том числе во внедренных в HTML-файлы скриптах. In some scenarios, the debugger automatically hits breakpoints in JavaScript and TypeScript code and in embedded scripts on HTML files. Сведения об отладке сценария на стороне клиента в приложениях ASP.NET см. в записи блога Отладка JavaScript в Microsoft Edge и этом записи в Google Chrome. For debugging client-side script in ASP.NET apps, see the blog post Debug JavaScript in Microsoft Edge and this post for Google Chrome.

Visual Studio поддерживает отладку на стороне клиента только для браузеров Chrome и Internet Explorer. Visual Studio provides client-side debugging support for Chrome and Internet Explorer only. В некоторых сценариях отладчик автоматически останавливается на точках останова в коде JavaScript и TypeScript, в том числе во внедренных в HTML-файлы скриптах. In some scenarios, the debugger automatically hits breakpoints in JavaScript and TypeScript code and in embedded scripts on HTML files. Сведения об отладке сценария на стороне клиента в приложениях ASP.NET см. в записи блога Client-side debugging of ASP.NET projects in Google Chrome (Отладка проектов ASP.NET на стороне клиента в Google Chrome). For debugging client-side script in ASP.NET apps, see the blog post Client-side debugging of ASP.NET projects in Google Chrome.

Для приложений, отличных от ASP.NET, выполните действия, описанные здесь. For applications other than ASP.NET, follow the steps described here.

Подготовка приложения к отладке Prepare your app for debugging

Если для кода применена минификация или он создан в транспайлере, например в TypeScript или Babel, для оптимизации возможностей отладки следует применить сопоставления источника. If your source is minified or created by a transpiler like TypeScript or Babel, the use of source maps is required for the best debugging experience. Подключить отладчик к запущенному клиентскому скрипту вы сможете даже без сопоставлений источника. Without source maps, you can still attach the debugger to a running client-side script. Но в этом случае вы сможете задавать и использовать точки останова только в файле с минифицированным или созданным в транспайлере кодом, но не в исходном файле кода. However, you may only be able to set and hit breakpoints in the minified or transpiled file, not in the original source file. Например, в приложении Vue.js минифицированный скрипт передается в формате строки в инструкцию eval , и другого способа пошагового выполнения этого кода в отладчике Visual Studio, кроме сопоставлений источника, нет. For example, in a Vue.js app, minified script gets passed as a string to an eval statement, and there is no way to step through this code effectively using the Visual Studio debugger, unless you use source maps. В сложных сценариях отладки вы можете использовать также средства для разработчиков в Chrome или средства F12 для Microsoft Edge. In complex debugging scenarios, you might also use Chrome Developer Tools or F12 Tools for Microsoft Edge instead.

Сведения о создании сопоставителей с исходным кодом см. в разделе Создание сопоставлений источника для отладки. For help to generate source maps, see Generate source maps for debugging.

Подготовка браузера к отладке Prepare the browser for debugging

Для этого сценария используйте Microsoft Edge (Chromium), в настоящее время называемый Microsoft Edge Beta в IDE, или Chrome. For this scenario, use either Microsoft Edge (Chromium), currently named Microsoft Edge Beta in the IDE, or Chrome.

Для этого сценария используйте Chrome. For this scenario, use Chrome.

Закройте все окна целевого браузера. Close all windows for the target browser.

Другие экземпляры браузера могут препятствовать его открытию при включенной отладке. Other browser instances can prevent the browser from opening with debugging enabled. (Работающие расширения браузера могут препятствовать полному режиму отладки, поэтому для обнаружения неожиданных экземпляров Chrome может понадобиться открыть диспетчер задач). (Browser extensions may be running and preventing full debug mode, so you may need to open Task Manager to find unexpected instances of Chrome.)

Для Microsoft Edge (Chromium) также отключите все экземпляры Chrome. For Microsoft Edge (Chromium), also shut down all instances of Chrome. Это дает лучшие результаты, поскольку оба браузера используют базу кода Chromium. Because both browsers use the chromium code base, this gives the best results.

Запустите браузер с включенной отладкой. Start your browser with debugging enabled.

Начиная с Visual Studio 2020 флаг —remote-debugging-port=9222 можно задать при запуске браузера, выбрав Просмотреть с помощью. > из панели инструментов Отладка, Добавить, а затем установив соответствующий флаг в поле Аргументы. Starting in Visual Studio 2020, you can set the —remote-debugging-port=9222 flag at browser launch by selecting Browse With. > from the Debug toolbar, then choosing Add, and then setting the flag in the Arguments field. Используйте другое понятное для браузера имя, например Edge с отладкой или Chrome с отладкой. Use a different friendly name for the browser such as Edge with Debugging or Chrome with Debugging. Подробности см. в заметках о выпуске. For details, see the Release Notes.

Также можно открыть команду Выполнить кнопки Пуск в Windows (щелкнуть правой кнопкой мыши команду Выполнить) и ввести следующую команду: Alternatively, open the Run command from the Windows Start button (right-click and choose Run), and enter the following command:

Щелкните правой кнопкой мыши кнопку Пуск Windows, выберите команду Выполнить и введите следующую команду : Open the Run command from the Windows Start button (right-click and choose Run), and enter the following command:

Ваш браузер будет запущен в режиме отладки. This starts your browser with debugging enabled.

Приложение еще не запущено, поэтому вы видите пустую страницу браузера. The app is not yet running, so you get an empty browser page.

Подключение отладчика к сценарию на стороне клиента Attach the debugger to client-side script

Чтобы подключить отладчик из Visual Studio и использовать точки останова в коде на стороне клиента, необходимо правильно настроить процесс в отладчике. To attach the debugger from Visual Studio and hit breakpoints in client-side code, the debugger needs help to identify the correct process. Ниже описывается один из способов. Here is one way to enable this.

Перейдите в Visual Studio, а затем установите точку останова в исходном коде, которая может быть файлом JavaScript, TypeScript, Vue или JSX. Switch to Visual Studio and then set a breakpoint in your source code, which might be a JavaScript file, TypeScript file, .vue file, or a JSX file. (Выберите для точки останова строку кода, в которой допустимы точки останова, например оператор return или объявление var). (Set the breakpoint in a line of code that allows breakpoints, such as a return statement or a var declaration.)

Чтобы найти конкретный код в транспонированном файле, используйте Ctrl+F (Изменить > Найти и заменить > Быстрый поиск). To find the specific code in a transpiled file, use Ctrl+F (Edit > Find and Replace > Quick Find).

Для кода на стороне клиента, чтобы попасть в точку останова в файле TypeScript, .vueили JSX, как правило, необходимо использовать сопоставитель с исходным кодом. For client-side code, to hit a breakpoint in a TypeScript file, .vue, or JSX file typically requires the use of source maps. Сопоставитель с исходным кодом следует правильно настроить, чтобы он поддерживал отладку в Visual Studio. A source map must be configured correctly to support debugging in Visual Studio.

Выберите ваш целевой браузер в качестве целевого объекта отладки в Visual Studio, нажмите клавиши CTRL+F5 (Отладка > Запуск без отладки), чтобы запустить приложение в браузере. Select your target browser as the debug target in Visual Studio, then press Ctrl+F5 (Debug > Start Without Debugging) to run the app in the browser.

Если вы создали конфигурацию браузера с понятным именем, выберите ее в качестве цели отладки. If you created a browser configuration with a friendly name, choose that as your debug target.

Приложение откроется в новой вкладке браузера. The app opens in a new browser tab.

Выберите Отладка > Присоединение к процессу. Choose Debug > Attach to Process.

Начиная с Visual Studio 2020, после первого присоединения к процессу с помощью этих инструкций, дальнейшее присоединение можно выполнять с помощью команды Отладка > Повторно подключиться к процессу. Starting in Visual Studio 2020, once you attach to the process the first time by following these steps, you can quickly reattach to the same process by choosing Debug > Reattach to Process.

В диалоговом окне Присоединить к процессу получите отфильтрованный список экземпляров браузера для присоединения. In the Attach to Process dialog box, get a filtered list of browser instances that you can attach to.

В Visual Studio 2020 выберите правильный отладчик для вашего целевого браузера, JavaScript (Chrome) или JavaScript (Microsoft Edge — Chromium) в поле Присоединить к, введите chrome или edge в поле фильтра, чтобы отфильтровать результаты поиска. In Visual Studio 2020, choose the correct debugger for your target browser, JavaScript (Chrome) or JavaScript (Microsoft Edge — Chromium) in the Attach to field, type chrome or edge in the filter box to filter the search results.

В Visual Studio 2020 выберите в поле Присоединить к элемент Код Webkit и введите chrome в поле фильтра, чтобы отфильтровать результаты поиска. In Visual Studio 2020, choose Webkit code in the Attach to field, type chrome in the filter box to filter the search results.

Выберите процесс браузера с соответствующим портом узла (localhost в этом примере) и нажмите кнопку Присоединить. Select the browser process with the correct host port (localhost in this example), and select Attach.

Порт (например 1337) также может отображаться в поле Заголовок, чтобы помочь выбрать правильный экземпляр браузера. The port (for example, 1337) may also appear in the Title field to help you select the correct browser instance.

В следующем примере показано, как это выглядит в браузере Microsoft Edge (Chromium). The following example shows how this looks for the Microsoft Edge (Chromium) browser.

Определить, что отладчик присоединился правильно, можно по открытию проводника DOM и консоли JavaScript в Visual Studio. You know the debugger has attached correctly when the DOM Explorer and the JavaScript Console open in Visual Studio. Эти средства отладки аналогичны инструментам Chrome для разработчиков и средствам F12 для Microsoft Edge. These debugging tools are similar to Chrome Developer Tools and F12 Tools for Microsoft Edge.

Если отладчик не присоединяется и появляется сообщение «Не удалось запустить адаптер отладки» или «Не удалось присоединиться к процессу. If the debugger does not attach and you see the message «Failed to launch debug adapter» or «Unable to attach to the process. Операция недопустима в текущем состоянии» — попробуйте закрыть все экземпляры целевого браузера в диспетчере задач перед попыткой запуска целевого браузера в режиме отладки. An operation is not legal in the current state.», use the Windows Task Manager to close all instances of the target browser before starting the browser in debugging mode. Возможно, в браузере выполняются расширения, которые препятствуют переходу в режим полной отладки. Browser extensions may be running and preventing full debug mode.

Обновите страницу браузера, поскольку код с точкой останова возможно уже был выполнен. Because the code with the breakpoint may have already executed, refresh your browser page. При необходимости выполните действия, приводящие к выполнению кода с точкой останова. If necessary, take action to cause the code with the breakpoint to execute.

Когда отладчик приостановит выполнение, вы можете изучить состояние приложения, наводя указатель мыши на переменные и используя окна отладчика. While paused in the debugger, you can examine your app state by hovering over variables and using debugger windows. Вы также можете выполнять пошаговую отладку кода (клавиши F5, F10 и F11). You can advance the debugger by stepping through code (F5, F10, and F11). Дополнительные сведения об основных функциях отладки см. в разделе Первое знакомство с отладчиком. For more information on basic debugging features, see First look at the debugger.

В зависимости от выполненных ранее шагов, вы можете попасть в точку останова файла .js, либо исходного файла, а также в вашу среду и состояние браузера. You may hit the breakpoint in either the transpiled .js file or the source file, depending on which steps you followed previously, along with your environment and browser state. В любом случае вы можете выполнять пошаговую отладку кода и просматривать переменные. Either way, you can step through code and examine variables.

Если вам нужно декомпозировать код в исходном файле TypeScript, JSX или .vue и вы не можете это сделать, убедитесь, что ваша среда настроена правильно, как описано в разделе Устранение неисправностей. If you need to break into code in a TypeScript, JSX, or .vue source file and are unable to do it, make sure you that your environment is set up correctly, as described in the Troubleshooting section.

Если вам нужно декомпозировать код в файле с компиляцией в код на языке программирования JavaScript (например, app-bundle.js), но сделать это не удается, удалите файл сопоставления источника filename.js.map. If you need to break into code in a transpiled JavaScript file (for example, app-bundle.js) and are unable to do it, remove the source map file, filename.js.map.

Устранение неполадок точек останова и сопоставителей с исходным кодом Troubleshooting breakpoints and source maps

Если вам нужно декомпозировать код в исходном файле TypeScript, JSX, или .vue но сделать это не удается, используйте Присоединить к процессу, чтобы подключить отладчик, как описано в предыдущих этапах. If you need to break into code in a TypeScript, JSX, or .vue source file and are unable to do it, use Attach to Process as described in the previous steps to attach the debugger. Убедитесь, что ваша среда настроена правильно: Make sure you that your environment is set up correctly:

Илон Маск рекомендует:  Таблицы HTML4

Вы закрыли все экземпляры браузера, включая расширения Chrome (с помощью диспетчера задач) для запуска браузера в режиме отладки. You closed all browser instances, including Chrome extensions (using the Task Manager), so that you can run the browser in debug mode.

Убедитесь, что сопоставитель с исходным кодом содержит правильную ссылку на исходный файл и что он не включает неподдерживаемые префиксы, такие как webpack:/// , которые препятствуют отладчику Visual Studio найти исходный файл. Make sure that your source map file includes the correct reference to your source file and that it doesn’t include unsupported prefixes such as webpack:///, which prevents the Visual Studio debugger from locating a source file. Например, ссылку, подобную webpack:///.app.tsx, можно исправить на ./app.tsx. For example, a reference like webpack:///.app.tsx might be corrected to ./app.tsx. Это можно сделать вручную в файле сопоставителя с исходным кодом или с помощью пользовательской конфигурации сборки. You can do this manually in the source map file or through a custom build configuration. Дополнительные сведения см. в разделе Создание сопоставителя с исходным кодом для отладки. For more information, see Generate source maps for debugging.

Либо, если вам нужно декомпозировать код в исходном файле (например app.tsx), но сделать это не удается, попробуйте использовать оператор debugger; в исходном файле или установите точки останова в инструментах для разработчиков в Chrome (или средства F12 для Microsoft Edge). Alternatively, if you need to break into code in a source file (for example, app.tsx) and are unable to do it, try using the debugger; statement in the source file, or set breakpoints in the Chrome Developer Tools (or F12 Tools for Microsoft Edge) instead.

Создание сопоставлений источника для отладки Generate source maps for debugging

В Visual Studio можно использовать и создавать сопоставления источника для исходных файлов JavaScript. Visual Studio has the capability to use and generate source maps on JavaScript source files. Такая возможность часто нужна, когда исходный код минифицирован или создан в транспайлере, например в TypeScript или Babel. This is often required if your source is minified or created by a transpiler like TypeScript or Babel. Доступные варианты зависят от типа проекта. The options available depend on the project type.

Проект TypeScript в Visual Studio по умолчанию автоматически создает сопоставления источника. A TypeScript project in Visual Studio generates source maps for you by default. Дополнительные сведения см. в разделе Настройка сопоставлений источника с помощью файла tsconfig.json. For more information, see Configure source maps using a tsconfig.json file.

В проекте JavaScript сопоставления источника можно создать с помощью средства упаковки (например, webpack) и компилятора (например, TypeScript или Babel), которые вы можете добавить в проект. In a JavaScript project, you can generate source maps using a bundler like webpack and a compiler like the TypeScript compiler (or Babel), which you can add to your project. Вместе с компилятором TypeScript необходимо добавить еще и файл tsconfig.json и установить опцию компилятора sourceMap . For the TypeScript compiler, you must also add a tsconfig.json file and set the sourceMap compiler option. Пример такой операции на основе базовой конфигурации webpack вы найдете в руководстве по созданию приложения Node.js с использованием React. For an example that shows how to do this using a basic webpack configuration, see Create a Node.js app with React.

Если вы не знакомы с сопоставлениями источников, изучите эту вводную статью, прежде чем продолжать работу. If you are new to source maps, please read Introduction to JavaScript Source Maps before continuing.

Чтобы настроить дополнительные параметры для сопоставлений источника, используйте файл tsconfig.json или параметры проекта для проекта TypeScript, но не оба метода сразу. To configure advanced settings for source maps, use either a tsconfig.json or the project settings in a TypeScript project, but not both.

Чтобы включить отладку с помощью Visual Studio, необходимо убедиться в правильности ссылок на исходный файл в созданном сопоставителе с исходным кодом (может потребоваться тестирование). To enable debugging using Visual Studio, you need to make sure that the reference(s) to your source file in the generated source map are correct (this may require testing). Например, если вы используете webpack, ссылки в файле сопоставителя с исходным кодом включают префикс webpack:/// , который не позволяет Visual Studio найти исходный файл TypeScript или JSX. For example, if you are using webpack, references in the source map file include the webpack:/// prefix, which prevents Visual Studio from finding a TypeScript or JSX source file. В частности, при исправлении для отладки, ссылку на исходный файл (например, app.tsx) следует изменить с webpack:///./app.tsx на ./app.tsx, что включает отладку (путь относительно вашего исходного файла). Specifically, when you correct this for debugging purposes, the reference to the source file (such as app.tsx), must be changed from something like webpack:///./app.tsx to something like ./app.tsx, which enables debugging (the path is relative to your source file). В следующем примере показано, как настроить сопоставители с исходным кодом в webpack, который является одним из наиболее распространенных средств увязки, чтобы они работали с Visual Studio. The following example shows how you can configure source maps in webpack, which is one of the most common bundlers, so that they work with Visual Studio.

(Только для webpack) Если точка останова устанавливается в TypeScript файла JSX (а не в виде файла JavaScript), необходимо обновить конфигурацию webpack. (Webpack only) If you are setting the breakpoint in a TypeScript of JSX file (rather than a transpiled JavaScript file), you need to update your webpack configuration. Например, в файлwebpack-config.jsможет потребоваться заменить следующий код: For example, in webpack-config.js, you might need to replace the following code:

следующим кодом: with this code:

Это настройка только для разработки, позволяющая отладку кода на стороне клиента в Visual Studio. This is a development-only setting to enable debugging of client-side code in Visual Studio.

В сложных сценариях средства браузера (F12) иногда лучше подходят для отладки, так как для них не нужно выполнять изменения в пользовательских префиксах. For complicated scenarios, the browser tools (F12) sometimes work best for debugging, because they don’t require changes to custom prefixes.

Настройка сопоставлений источника с помощью файла tsconfig.json Configure source maps using a tsconfig.json file

Если вы добавите в проект файл tsconfig.json, Visual Studio будет считать корневой каталог проектом TypeScript. If you add a tsconfig.json file to your project, Visual Studio treats the directory root as a TypeScript project. Чтобы добавить файл, щелкните проект правой кнопкой мыши в обозревателе решений и последовательно выберите Добавить > Новый элемент > JSON-файл конфигурации TypeScript. To add the file, right-click your project in Solution Explorer, and then choose Add > New Item > TypeScript JSON Configuration File. Это действие добавит в проект файл tsconfig.json, аналогичный представленному ниже. A tsconfig.json file like the following gets added to your project.

Параметры компилятора для tsconfig.json Compiler options for tsconfig.json

  • inlineSourceMap. Создает один общий файл с сопоставлениями источников, а не отдельный файл сопоставления для каждого исходного файла. inlineSourceMap: Emit a single file with source maps instead of creating a separate source map for each source file.
  • inlineSources. Помещает исходный код в тот же файл вместе с сопоставлениями источников. Для этого режима также нужно настроить inlineSourceMap или sourceMap. inlineSources: Emit the source alongside the source maps within a single file; requires inlineSourceMap or sourceMap to be set.
  • mapRoot. Указывает расположение, из которого отладчику следует брать файлы сопоставления источника ( .map), вместо расположения по умолчанию. mapRoot: Specifies the location where the debugger should find source map (.map) files instead of the default location. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах. Use this flag if the run-time .map files need to be in a different location than the .js files. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов .map. The location specified is embedded in the source map to direct the debugger to the location of the .map files.
  • sourceMap. Создает соответствующий файл .map. sourceMap: Generates a corresponding .map file.
  • sourceRoot. Указывает расположение, из которого отладчику следует брать файлы TypeScript, вместо расположения по умолчанию. sourceRoot: Specifies the location where the debugger should find TypeScript files instead of the source locations. Используйте этот флаг, если в ходе время выполнения и разработки исходные файлы должны размещаться в разных каталогах. Use this flag if the run-time sources need to be in a different location than the location at design-time. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов. The location specified is embedded in the source map to direct the debugger to where the source files are located.

Дополнительные сведения о параметрах компилятора вы найдете на странице с параметрами компилятора в справочнике по TypeScript. For more details about the compiler options, check the page Compiler Options on the TypeScript Handbook.

Настройка сопоставителей с исходным кодом с помощью параметров проекта (TypeScript project) Configure source maps using project settings (TypeScript project)

Также вы можете настроить параметры сопоставления источника в свойствах проекта, щелкнув проект правой кнопкой мыши и выбрав Проект > Свойства > Сборка TypeScript > Отладка. You can also configure the source map settings using project properties by right-clicking the project and then choosing Project > Properties > TypeScript Build > Debugging.

Здесь доступны следующие параметры проекта. These project settings are available.

  • Создать сопоставления источника (эквивалентно sourceMap в tsconfig.json). Создает соответствующий файл .map. Generate source maps (equivalent to sourceMap in tsconfig.json): Generates corresponding .map file.
  • Укажите корневой каталог сопоставлений источника (эквивалентно mapRoot в tsconfig.json). Указывает расположение, из которого отладчику следует брать файлы сопоставления, вместо автоматически созданного расположения. Specify root directory of source maps (equivalent to mapRoot in tsconfig.json): Specifies the location where the debugger should find map files instead of the generated locations. Используйте этот флаг, если во время выполнения файлы .map и файлы .js должны размещаться в разных каталогах. Use this flag if the run-time .map files need to be located in a different location than the .js files. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение файлов сопоставления. The location specified is embedded in the source map to direct the debugger to where the map files are located.
  • Укажите корневой каталог файлов TypeScript (эквивалентно sourceRoot в tsconfig.json). Указывает расположение, из которого отладчику следует брать файлы TypeScript, вместо расположения по умолчанию. Specify root directory of TypeScript files (equivalent to sourceRoot in tsconfig.json): Specifies the location where the debugger should find TypeScript files instead of source locations. Используйте этот флаг, если в ходе выполнения и разработки исходные файлы должны размещаться в разных каталогах. Use this flag if the run-time source files need to be in a different location than the location at design-time. Указанное здесь расположение внедряется в сопоставление источника, чтобы указать для отладчика расположение исходных файлов. The location specified is embedded in the source map to direct the debugger to where the source files are located.

Отладка JavaScript в динамических файлах с помощью Razor (ASP.NET) Debug JavaScript in dynamic files using Razor (ASP.NET)


Начиная с Visual Studio 2020, Visual Studio обеспечивает отладку только для Chrome и Microsoft Edge (Chromium). Starting in Visual Studio 2020, Visual Studio provides debugging support for Chrome and Microsoft Edge (Chromium) only.

Visual Studio поддерживает отладку только для браузеров Chrome и Internet Explorer. Visual Studio provides debugging support for Chrome and Internet Explorer only.

Однако, вы не сможете автоматически использовать точки останова в файлах, созданных с синтаксисом Razor (cshtml, vbhtml). However, you cannot automatically hit breakpoints on files generated with Razor syntax (cshtml, vbhtml). Для отладки файлов такого типа вы можете применить два следующих подхода. There are two approaches you can use to debug this kind of file:

Поместите инструкцию debugger; в той строке, где нужно прервать выполнение. Эта инструкция прерывает выполнение динамического скрипта и начинает отладку сразу же при его создании. Place the debugger; statement where you want to break: This causes the dynamic script to stop execution and start debugging immediately while it is being created.

Загрузите страницу и откройте динамический документ в Visual Studio. Чтобы воспользоваться этим методом, нужно открыть динамический файл в процессе отладки, задать в нем точку останова и обновить страницу. Load the page and open the dynamic document on Visual Studio: You’ll need to open the dynamic file while debugging, set your breakpoint, and refresh the page for this method to work. В зависимости от выбранного браузера (Chrome или Internet Explorer) вы сможете найти этот файл с помощью следующих действий. Depending on whether you’re using Chrome or Internet Explorer, you’ll find the file using one of the following strategies:

Для Chrome откройте пункты меню Обозреватель решений > Документы скриптов > [Имя_нужной_страницы] . For Chrome, go to Solution Explorer > Script Documents > YourPageName.

Если вы используете Chrome, может появиться сообщение: Источник недоступен между тегами . When using Chrome, you might get a message no source is available between tags. Это нормально, просто продолжайте отладку. This is OK, just continue debugging.

Для Microsoft Edge (Chromium) используйте ту же процедуру, что и для Chrome. For Microsoft Edge (Chromium), use the same procedure as Chrome.

Для Internet Explorer откройте пункты меню Обозреватель решений > Документы скриптов > Windows Internet Explorer > [Имя_нужной_страницы] . For Internet Explorer, go to Solution Explorer > Script Documents > Windows Internet Explorer > YourPageName.

NexxDigital — компьютеры и операционные системы

Современная отладка JavaScript. Отладка и тестирование JavaScript в приложениях HTML5

Время от времени разработчики совершают ошибки при кодировании. Ошибка в программе или скрипте называется ошибкой.

Процесс поиска и исправления ошибок называется отладкой и является нормальной частью процесса разработки. В этом разделе рассматриваются инструменты и методы, которые могут помочь вам в отладке задач.

Сообщения об ошибках в IE

Самый простой способ отслеживания ошибок — включить информацию об ошибках в вашем браузере. По умолчанию Internet Explorer показывает значок ошибки в строке состояния при возникновении ошибки на странице.

Двойной щелчок по этому значку приведет вас к диалоговому окну, отображающему информацию о конкретной ошибке.

Поскольку этот значок легко упускать из вида, Internet Explorer дает вам возможность автоматически отображать диалоговое окно «Ошибка» всякий раз, когда возникает ошибка.

Чтобы включить эту опцию, выберите « Инструменты» → « Свойства обозревателя» → вкладка «Дополнительно». а затем, наконец, установите флажок «Показать уведомление о каждом скрипте», как показано ниже —

Сообщения об ошибках в Firefox или Mozilla

Другие браузеры, такие как Firefox, Netscape и Mozilla, отправляют сообщения об ошибках в специальное окно, называемое Консоль JavaScript или Консоль ошибок. Чтобы просмотреть консоль, выберите « Инструменты» → « Консоль ошибок» или «Веб-разработка».

К сожалению, поскольку эти браузеры не дают визуальной информации при возникновении ошибки, вы должны держать консоль открытой и следить за ошибками по мере выполнения вашего скрипта.

Уведомления об ошибках

Уведомления об ошибках, отображаемые в консоли или через диалоговые окна Internet Explorer, являются результатом как синтаксиса, так и ошибок времени выполнения. Эти уведомления об ошибках включают номер строки, в которой произошла ошибка.

Если вы используете Firefox, вы можете нажать на ошибку, доступную в консоли ошибок, чтобы перейти к точной строке в скрипте с ошибкой.

Как отлаживать скрипт

Существуют различные способы отладки вашего JavaScript — Использовать JavaScript Validator

Один из способов проверить код JavaScript для странных ошибок — запустить его через программу, которая проверяет ее, чтобы убедиться, что она действительна и что она соответствует официальным синтаксическим правилам языка. Эти программы называются синтаксическими анализаторами или просто валидаторами для краткости и часто идут с коммерческими редакторами HTML и JavaScript.

Наиболее удобным валидатором для JavaScript является JavaScript Lint Дугласа Крокфорда, который доступен бесплатно в JavaScript Lint Дугласа Крокфорда.

Просто зайдите на эту веб-страницу, вставьте код JavaScript (только JavaScript) в предоставленную текстовую область и нажмите кнопку jslint. Эта программа будет анализировать ваш код JavaScript, гарантируя, что все определения переменных и функций следуют правильному синтаксису. Он также будет проверять инструкции JavaScript, такие как if и while, чтобы они также соответствовали правильному формату

Добавить код отладки в ваши программы

Вы можете использовать методы alert() или document.write() в своей программе для отладки вашего кода. Например, вы можете написать что-то следующее:

var debugging = true; var whichImage = «w + swapStatus);

Изучая содержимое и порядок alert() по мере их появления, вы можете легко проверить работоспособность своей программы.

Как использовать отладчик JavaScript

Отладчик — это приложение, в котором все аспекты выполнения скрипта находятся под контролем программиста. Отладчики обеспечивают мелкомасштабный контроль над состоянием скрипта через интерфейс, который позволяет вам проверять и устанавливать значения, а также контролировать поток выполнения.

Как только сценарий загружен в отладчик, его можно запустить по одной строке за раз или дать указание остановиться на определенных контрольных точках. Когда выполнение остановлено, программист может проверить состояние скрипта и его переменных, чтобы определить, что-то не так. Вы также можете просматривать переменные для изменения их значений.

  • Используйте много комментариев. Комментарии позволяют вам объяснить, почему вы написали сценарий так, как вы это делали, и объяснить особенно сложные разделы кода.
  • Всегда используйте отступы, чтобы ваш код был легко читаемым. Отступы также облегчают вам сопоставление начальных и конечных тегов, фигурных скобок и других элементов HTML и скрипта.
  • Напишите модульный код. По возможности группируйте свои заявления в функции. Функции позволяют группировать связанные операторы, а также тестировать и повторно использовать части кода с минимальными усилиями.
  • Будьте последовательны в том, как вы называете свои переменные и функции. Попробуйте использовать имена, которые достаточно длинны, чтобы быть значимыми и описывать содержимое переменной или назначение функции.
  • Используйте согласованный синтаксис при именовании переменных и функций. Другими словами, держите их в нижнем регистре или в верхнем регистре; если вы предпочитаете нотацию Camel-Back, используйте ее последовательно.
  • Проверять длинные скрипты модульным способом. Другими словами, не пытайтесь написать весь скрипт перед тестированием любой его части. Напишите часть и запустите ее, прежде чем добавлять следующую часть кода.
  • Используйте описательные имена переменных и функций и избегайте использования односимвольных имен.
  • Следите за кавычками. Помните, что кавычки используются парами вокруг строк и что оба кавычки должны быть одного и того же стиля (одного или двух).
  • Следите за своими равными знаками. Вы не должны использовать один = для целей сравнения.
  • Явным образом объявляю переменные с помощью ключевого слова var.

Общаясь недавно со своими коллегами, я был удивлен тем, что многие ни разу не использовали в своей работе встроенные в браузер отладчик консоли для JavaScript. К сожалению, один из них работает в моей фирме, не буду оглашать его имени.
Для тех из вас, кто пока не знаком с консолью браузера API, и написана эта статья.

Визуальная отладка

При работе над сайтом отладка главным образом опирается на визуальное восприятие. Предельно легко увидеть неправильно выровненные колонки, накладывающийся друг на друга текст, провести необходимую правки и обновить страницу. Для PHP сообщение об ошибке останавливает скрипт и отображает проблему прямиком на странице. Вкратце: большую часть ошибок, которые можно исправить сразу, легко увидеть после загрузки страницы.

Консоль API – это объект (console), который можно использовать для вывода отладочной информации (его можно использовать, как только страница будет загружена браузером). Наибольшую эффективность консоль показывает при работе с JavaScript.

Отладка javascript firebug

Как отслеживать события

Firefox — Записывать события

Firefox + Firebug + Firequery = Показывает события навешанные при помощи jQuery

Тормозит — вне работы выключать

Рассказываем, как использовать панель Chrome Devtools удобна для отладки.

Поиск и исправление ошибок может быть затруднительным для новичков. Если думаете, что использовать console.log () для отладки кода лучшее решение, то вы неправы.

В этой статье мы расскажем об отличных инструментах Google Chrome Devtools для дебаггинга Этот процесс является гораздо более эффективным способом решения данной проблемы.

Приводим здесь всего один простой пример использования отладки, но его можно применить к любой задаче.

Шаг 1: Воспроизведите баг

Воспроизведение багов всегда является первым шагом к отладке. Это означает найти последовательность действий, приводящих к ошибке. Процесс может быть долгим, поэтому старайтесь его оптимизировать.

Чтобы самому проделать действия из этого туториала, сделайте следующее:

  • Вот веб-страница , с которой мы будем работать в этом уроке. Не забудьте открыть её в новой вкладке;
  • Введите число 5 в поле «Number 1»;
  • Введите число 1 в поле «Number 2»;
  • Кликните на кнопку «Add»;
  • Посмотрите, вам говорят, что 5+1=51;

Упс, очевидно, что это неверно. Результатом должно быть число 6, эту ошибку и нужно исправлять.

Шаг 2: Приостановите выполнение с помощью точки останова

DevTools позволяют остановить выполнение кода в процессе и посмотреть значения всех переменных в этот момент времени. Инструмент для приостановки кода называется брейкпоинтом. Попробуйте:

  • Вернитесь на нашу тестовую страницу и включите DevTools, нажав Cmd + Option + I (Mac) или Ctrl + Shift + I (Windows, Linux);
  • Перейдите к вкладке «Sources»;
  • Разверните «Event Listener». DevTools раскроет список категорий событий, таких как анимация и буфер обмена;
  • Поставьте флажок в ячейке «click»;
  • Вернувшись к странице, снова прибавьте «Number 1» и «Number 2». DevTools приостановит демонстрацию и выделит строку кода на панели «Sources». DevTools выделит эту строку кода:

    Почему так происходит?

    Когда вы выбираете «click», вы устанавливаете брейкпоинты, зависящие от событий типа click к каждому элементу, который имеет для него обработчик.

    Шаг 3: Выполните пошаговую отладку

    Одна из распространенных причин, по которой возникают ошибки заключается в том, что скрипт выполняется не в том порядке, как вы думаете. Избежать этой проблемы можно, понаблюдав за исполнением кода строчка за строчкой. Пробуем:

    • На панели «Sources» нажмите «Step into next function call button»

    Эта кнопка позволит последовательно отследить выполнение функции onClick. Остановите процесс, когда DevTools выделит следующую строку кода:

    • Теперь нажмите кнопку «Step over next function call button»;

    Теперь DevTools знает, что нужно выполнить inputAreEmpty (), без дебаггинга его содержимого. Обратите внимание, что DevTools пропускает несколько строк кода. Это происходит потому, что inputAreEmpty () возвращает false, поэтому блок if не выполнялся.

    Это и есть суть пошаговой отладки кода. Если вы посмотрите на код в get-started.js, то увидите, что ошибка, вероятно, находится где-то в функции updateLabel(). Вместо того, чтобы переходить через каждую строку кода, вы можете использовать другой тип брейкпоинта, чтобы остановить процесс ближе к месту ошибки.

    Шаг 4: Выберите другую точку останова

    Тип line-of-code является наиболее популярным брейкпоинтом. Если вы знаете, где может быть ошибка, используйте этот тип:

      Посмотрите на последнюю строку кода в updateLabel (), которая выглядит так:

    label.textContent = addend1 + » + » + addend2 + » = » + sum;

    label . textContent = addend1 + » + » + addend2 + » = » + sum ;

  • Слева от этого кода вы увидите номер строки: 32. Нажмите 32. Теперь DevTools всегда будет приостанавливаться до выполнения этой строки кода;
  • Нажмите кнопку «Resume script execution button». Сценарий продолжит выполняться, до следующей строки кода с брейкпоинтом;
  • Посмотрите на строки кода в updateLabel (), которые уже выполнены. DevTools выводит значения addend1, addend2 и sum.

    Значение суммы выглядит подозрительно. Похоже, оно оценивается не как число, а как строка. Это ещё одна частая причина ошибок.

    Шаг 5: Проверьте значения переменных

    Распространенной причиной ошибок является то, что переменная или функция генерируют не то значение, которое нужно. Многие разработчики используют console.log (), чтобы посмотреть, как меняются значения, но console.log () для этого плохо подходит, как минимум по двум причинам: во-первых, может потребоваться вручную редактировать код с большим количеством вызовов console.log (), во-вторых, вы можете не знать, какая переменная связана с ошибкой, поэтому придётся выводить сразу несколько переменных.

    Одной из альтернатив console.log в DevTools является Watch Expressions. Используйте Watch Expressions для отслеживания изменений значений переменных. Как следует из названия, Watch Expressions не ограничивается только переменными. Вы можете сохранить любое допустимое выражение JavaScript в Watch Expression:

    • На панели «Sources» выберите вкладку «Watch»;
    • Затем нажмите «Add Expression»;
    • Введите typeof sum;
    • Нажмите enter. DevTools покажет typeof sum: «string». Это значение является результатом Watch Expression.

    Как и предполагалось, sum расценивается как строка, а не как число. Это та самая ошибка, о которой мы говорили выше.

    Ещё одной альтернативой DevTools для console.log () является консоль. Разработчики часто используют её для перезаписи значений переменных при отладке. В вашем случае консоль может быть удобна, чтобы проверить способы исправить ошибку. Пример:

    Шаг 6: Внесите исправления

    Вы определили где ошибка. Осталось только исправить её, отредактировав код и перезапустив демо. Вы можете редактировать код JavaScript непосредственно в пользовательском интерфейсе DevTools:

    • В редакторе кода на панели «Sources» замените var sum = addend1 + addend2 на var sum = parseInt (addend1) + parseInt (addend2) ; Это строка №31.
    • Нажмите Cmd + S (Mac) или Ctrl + S (Windows, Linux), чтобы применить изменения. Фон кода изменится на красный, чтобы показать, что сценарий был изменен в DevTools;
    • Нажмите «Deactivate breakpoints»


    Цвет поменяется на синий. В этом режиме, DevTools игнорирует любые брейкпоинты, которые вы установили.

    • Нажмите «Resume script execution».

    Впишите в поля числа, протестируйте. Теперь всё должно работать как следует!

    Представьте себе, что вы работаете над этим невероятным новым веб-приложением, и ваши тестеры попросили вас исправить следующие ошибки:

    1. “Loading…” сообщение строки состояния не исчезает, когда приложение закончило загружаться.
    2. Язык по умолчанию — норвежский, даже в английских версиях IE и Firefox.
    3. Где то в коде образовалась глобальная переменная prop (зло — прим. пер.).
    4. В DOM-вьювере все элементы почему то имеют атрибут «clone».

    Запуск отладчиков

    • В Firefox вы должны убедится, что у вам установлено расширение Firebug. Выберите “Инструменты > Firebug > Open Firebug”.
    • В Опере 9.5+, выберите “Инструменты > Дополнительно > Средства разработки.”
    • В бете IE, выберите “Сервис > Панели > Панели обозревателя > IE Developer Toolbar.”
    • В Safari или WebKit, сначала включите меню отладки (1) , затем выберите “Разработать > Показать веб-инспектор”

    Пришло время запускать отладчики. Так как некоторые инструкции требуют изменения кода, вам лучше сохранить тестовую страницу и загрузить ее браузером с диска.

    Ошибка № 1: Сообщение “Загрузка …”

    Если вы посмотрите на отлаживаемое приложение, то сначала вы увидите то, что изображено на рисунке 1.

    рис. 1: начальный вид нашего JavaScript-приложения в Dragonfly и Firebug, соответственно.

    Когда вы смотрите на исходный текст в отладчике, обратите внимание на функцию clearLoadingMessage() в самом начале кода. Это неплохое место для контрольной точки.

    Как её поставить:

    1. Щелкните мышью в левом поле на номере строки, чтобы установить контрольную точку на первой строке
    2. Перезагрузите страницу.

    Обратите внимание: контрольная точка должна быть установлена на строке с кодом, который выполнится, когда функция будет запущена. Строка, которая содержит clearLoadingMessage()< не подходит, так как является лишь определением функции. Если вы установите контрольную точку здесь, отладчик на ней не остановится, вместо этого контрольную точку надо устанавливать внутри функции.

    Когда страница будет перезагружена, выполнение скрипта будет остановлено и вы увидите то, что показано на рисунке два.

    рис. 2: отладчики остановились в контрольной точке внутри clearLoadingMessage.

    Давайте взглянем на код функции. Как нетрудно заметить, в ней обновляются два DOM элемента, а в строке 31 упоминается слово statusbar. Похоже, что getElements(«p», <"class":"statusbar">).innerHTML ищет элемент statusbar в дереве DOM. Как бы нам быстро проверить своё предположение?

    Вставьте эту инструкцию в командную строку, чтобы проверить. На рисунке три показаны три скриншота (Dragonfly, Firebug и IE8) после чтения innerHTML или outerHTML элемента, возвращенного командой, которую вы исследуете.

    Чтобы проверить сделайте следующее:

    1. Найдите командную строку:
      * В Firebug, переключитесь в закладку “Console”.
      * В Dragonfly, просмотрите пониже панели кода JavaScript.
      * В IE8, найдите закладку справа «Console».
    2. Вставьте getElements(«p», <"class":"statusbar">).innerHTML в командную строку.
    3. Нажмите Enter.

    рис. 3: вывод результата команды в Dragonfly, Firebug, и IE8, соответственно.

    Командная строка — очень полезный инструмент, который позволяет вам быстро проверять маленькие куски кода. Интеграция консоли Firebug очень полезна — если Ваша команда выводит объект, вы получаете очень интеллектуальное представление. Например, если это объект DOM — вы увидите размеченный результат.

    Можно использовать консоль, чтобы провести более глубокое исследование. Строка JavaScript, которую мы изучаем, делает следующие три вещи:

    1. Получает ссылку на элемент statusbar.
    2. Находит firstChild, другими словами, первый узел в этом параграфе.
    3. Устанавливает свойство innerText.

    Давайте попробуем запустить в консоли, что-то большее, чем предыдущая команда. Например вы можете попробовать узнать, какое текущее значение у свойства innerText, перед тем как ему присваивается новое значние. Чтобы узнать это, вы можете напечатать всю команду до знака «=» в командную строку:

    Тогда, следующий вопрос: что на самом деле является первым дочерним элементом у параграфа? Давайте зададим этот вопрос коммандной строке. (См. четвертый рисунок).

    рис. 4: командная строка отладчика СтDragonfly, вывод [объект Text].

    Вывод отладчика Dragonfly’s — [объект Text] показывает, что это — текстовый узел DOM. Таким образом мы нашли причину первой проблемы. У текстового узла нет свойства innerText, следовательно, установка значения для p.firstChild.innerText ничего не делает. Эта ошибка легко может быть исправлена, если заменить innerText на nodeValue, который является свойством, определенным стандартом W3C для текстовых узлов.

    Теперь, после того как мы разобрались с первой ошибкой:

    1. Нажмите или кнопку Run, чтобы закончить скрипт.
    2. Не забудьте сбросить поставленную контрольную точку, кликнув по номеру строки еще раз.

    Ошибка два: проблема определения языка.

    Чтобы найти место, где вероятно происходит проблема локализации сделайте следующее:

    1. Напечатайте lang = в поле поиска.
    2. Установите контрольную точку на строке, где переменной lang задается значение.
    3. Перезагрузите страницу.

    У WebInspector тоже есть очень удобная функция поиска. Она позволяет искать что угодно одновременно и в разметке страницы, и в CSS, и в коде JavaScript. Результаты показывюется на отдельной панели, где вы можете дважды кликнуть по ним, чтобы перейти в нужное место, как показано на скриншоте.

    рис. 5: поиск в Dragonfly и в WebInspector.

    Для того, чтобы проверить, что делает эта функция:

    1. Нажмите кнопку «step into» для входа внутрь функции getLanguage.
    2. Жмите ее еще и еще, пошагово выполняя код
    3. В окне просмотра переменных смотрите как меняются их значния.

    Войдя в функцию вы увидите попытку прочитать язык из строки юзер-агента браузера, путем анализа navigator.userAgent.

    var str1 = navigator.userAgent.match(/\((.*)\)/);
    var ar1 = str1.split(/\s*;\s*/), lang;
    for (var i = 0; i

    рис. 6: Панель просмотра локальных переменных фукции getLanguage в Firebug IE8’s

    Выражение ar1[i].match(/^(.<2>)$/) просто ищет строку, состоящую их двух символов, типа «no», «en». Однако как видно на скриншоте у Firefox информация о языке представлена в виде «nn-NO» (2) . IE же и вовсе не помещает в юзер-агента информации о языке.

    Таким образом мы нашли вторую ошибку: определение языка производилось путем поиска двухбуквенного кода в строке юзерагента, но Firefox имеет пятисимвольное обозначение языка, а IE не имеет его вовсе. Такой код должен быть переписан и заменен на определение языка либо на стороне сервера с помощью HTTP заголовка Accept-Language, либо получением его из navigator.language (navigator.userLanguage для IE). Вот пример того, какой может быть такая функция

    if (navigator.language) <
    lang = navigator.language;
    > else if (navigator.userLanguage) <
    lang = navigator.userLanguage;
    >

    Ошибка три: таинственная переменная «prop»

    На рисунке 7 хорошо видно переменную «prop». В хорошо написанных приложениях количество глобальных переменных должно быть минимально, поскольку они могут стать причиной проблем, когда, например две части приложения захотят использовать одну и ту же переменную. Предположим, что завтра другая команда добавит новые возможности в наше приложение и тоже объявит переменную «prop». Мы получим две разные части кода приложения, использующие одно имя для разных вещей. Такая ситуация часто приводит к конфликтам и ошибкам. Можно попробовать найти эту переменную и объявить ее локальной. Для этого можно воспользоваться поиском, как мы делали это в предыдущем случае, но есть и более умный способ…

    У отладчиков для многих других языков программирования есть понятие «наблюдателя»(watch), который переходит в режим отладки, когда изменяется заданная переменная. Ни Firebug, ни Dragonfly не поддерживают «наблюдателей» в настоящее время, но мы можем легко эмулировать похожее поведение, добавив следующую строку в начало исследуемого кода:

    Когда вы перезагрузите страницу, выполнение кода немедленно остановится там где будет определена переменная «prop». Фактически остановка произодет в том месте, где вы добаили вышеупомянутую строку. Один клик по кнопке «step out» перекинет вас в место установки переменной.

    for (prop in attributes) <
    if (el.getAttribute(prop) != attributes) includeThisElement = false ;

    Ошибка четыре: атрибут «clone», которого быть не должно

    рис. 8: Dragonfly’s DOM инспектор показывает проблемный код.

    Так как это никак не отражается на пользователях приложения, можно не считать этот баг серьезным, однако не стоит забывать, что он может существенно сказаться на производительности, поскольку скрипт устанавливает атрибут на сотнях и тысячах элементов.

    Самый быстрый способ найти эту проблему состоит в том, чтобы установить контрольную точку, которая срабатывает тогда, когда атрибут с названием clone будет установлен для какого-нибудь HTML элемента. Могут ли отладчики сделать это?

    JavaScript — очень гибкий язык, и одна из его сильных сторон (или слабых, в зависимости от вашей точки зрения) — это то, что вы можете заменить базовые функции языка своими собственными. Добавьте этот кусок кода на страницу, он переопределит системный метод setAttribute, вызывая остановку кода в момент установки свойства «clone»:

    var funcSetAttr = Element.prototype.setAttribute; /* сохраняем ссылку на системный метод */
    Element.prototype.setAttribute = function (name, value) <
    if (name == «clone» ) <
    debugger; /* останавливаем скрипт */
    >
    funcSetAttr.call(this ,name,value); /* вызываем ранее сохраненный системный метод, чтобы нормальные свойства устанавливались корректно */
    >;

    Когда выполнение остановится в контрольной точке, вы захотите узнать где же произошел вызов setAttribute(), то есть вам нужно вернуться на уровень выше в цепочке вызовов функций и посмотреть что происходит там. Для этого вы можете использовать стек вызовов.

    рис. 9: Стек вызовов в Dragonfly и IE8.

    На рисунке 10 показан стек в Firebug. В строке «setAttribute for (var prop in attributes) <
    el.setAttribute(prop, attributes);
    >

    Давайте еще раз вернемся в функцию makeElement и внимательно посмотрим на переменную attribute и её свойство «clone». Вы можете кликнуть по значению-функции этого свойства для перехода к месту, где оно назначается, оно будет подсвечено голубым цветом

    рис. 11: Firebug показывает нам, где было определено свойство clone.

    Вот мы и нашли причину четвертой ошибки: метод clone добавляется всем объектам с помощью Object.prototype. Такой подход считается плохой практикой, потому что в циклах for. in объектов будут видны все свойства заданные вами через Object.prototype. Это может приводить к очень трудно уловимым ошибкам.

    Чтобы исправить эту ошибку, можно переместить метод clone из прототипа объекта непосредственно в сам объект, после чего заменить все вызовы obj.clone() на Object.clone(obj), как показано в примере:

    // ПЛОХО, так делать не стоит
    Object.prototype.clone = function () <
    var obj = <>;
    for (var prop in this ) <
    obj = this ;
    >
    return obj;
    >
    // Код. демонстрирующий использование метода clone():
    var myObj1 = < "id" : "1" >;
    var myObj2 = myObj1.clone();

    Сделайте лучше так:

    Отладка js и CSS

    Изначально эту статью я хотел посвятить только тому, что касается отладки js сценариев. Но после написания, оказалось что, вопрос CSS отладки очень сильно связан с этими же отладчиками, поэтому создавать отдельную статью про CSS отладку просто не имеет смысла.

    Javascript сочетает в себе мощность и разнообразие параллельно с примитивной отладкой в браузерах. Постоянно пользоваться функцией alert() — трата драгоценного времени. Поэтому без внешних инструментов отладки выявить ошибку и правильно настроить сценарии у Вас быстро не получится. Сценарии js выполняет браузер, но у самих браузеров инструменты по отладке js скриптов либо отсутствуют, либо настолько примитивные, что ими даже пользоваться не хочется.

    CSS отладка — это важная составляющая кросс-браузерности вашего сайта. При верстке дизайна сайта верстальщики тестируют страницы в основных браузерах. Основная цель CSS отладки это одинаковое визуальное отображение страниц сайта во всех основных браузерах.

    Под каждый браузер существуют специальные инструменты для отладки js сценариев и одновременно CSS отладки. Эти инструменты — специальные утилиты написанные под конкретный браузер. Поэтому отлаживать свои js скрипты Вам придется только под одним браузером, так как каждый браузер имеет свою утилиту.

    Firebug Lite,
    Dragonfly Opera 9.5 и выше

    Браузер Инструменты для отладки js сценариев
    Firebug
    Firebug Lite
    Существует, также, очень мощный инструмент для разработки и отладки
    MS Visual Studio , но этот инструмент очень притормаживает и может выдавать ошибку в течении 5-7 сек.
    IE 8 имеет встроенные Developer Tools (для отладки в IE 7 есть режим симуляции)

    Самым популярным и удобным инструментом большинство считают Firebug для браузера Firefox. И в практической разработке js сценариев я тоже использую эту утилиту. Из всех представленных выше инструментов Firebug наиболее удобный в использовании и функциональней.

    На изображение показана часть консоли Firebug»а.
    Вкладка «Консоль » самая важная — на ней построчно отображаются ошибки выявленные во время выполнения js сценариев. В строке отображается причина ошибки, а справа название файла и номер строки. При нажатии на кнопку «Профилировать» она перейдет в нажатое состояние. Если Вы отожмете ее, появится таблица с перечнем функций которые выполняются браузером в реальном режиме. Будет показано названия функций, количество вызовов и время выполнения этих функций за промежуток пока было удержана кнопка «Профилировать «.
    Второй по важности можно считать вкладку «Сценарий «. Здесь Вы можете увидеть внутренний код любого выбранного js файла. На вкладке, также доступны такие интересные параметры:

    декомпилировать исходники в eval . Позволяет выводить на экран исходный код скрипта, а не закодированный.
    останавливаться на всех ошибках . Останавливает выполнение скрипта на строках, где выявлена ошибка, с описанием ошибки. Сюда, также, относятся ошибки, которые не являются критическими для выполнения скрипта.
    Останавливать выполнение скрипта в любой строке Вы можете и самостоятельно. При этом Вам будет доступен просмотр стека вызовов, где отображаются в хронологическом порядке все выполненные функции до точки остановки скрипта. При остановке скрипта, наведение мышки на любой элемент кода, вызывает всплывающее меню со значением элемента.

    Вкладка «Сеть » отображает список загруженных скриптов. Если нажать на любой файл, то будет показана информация про обмен заголовками между браузером и сервером, а также содержимое js скрипта. В строке, также отображается размер и время загрузки скрипта.
    Это может быть полезно не только при отладке сценариев, а и для ускорения загрузки страницы. Можно просматривать размеры рисунков, подгружаемых js сценариев и оценивать время затраченное на загрузку каждого элемента страницы. Цветовая гамма загрузки помимо отображения времени на загрузку элемента (страницы), времени DNS запроса и времени HTTP запроса, также показывает время ожидание ответа сервера. Или другими словами, время выполнения кода php.

    Кроме всего, Firebug позволяет отслеживать ajax запросы, просматривать заголовки ответов и опять же оценивать время запросов.

    Помимо всего Firebug имеет командную строку, которую при желании можно увеличить в окно произвольного размера и в нем вживую писать и сразу выполнять любой js код.
    Разработчики Firebug создали специальную версию Firebug Lite, которая позволяет отлаживать js сценарии во всех других основных браузерах (Opera, IE, Safari). Правда эта версия немного урезана, но это все равно лучше чем ничего. Ну, и помимо самой отладки js сценариев, доступны также CSS отладка и структура DOM страницы. Выполнение js событий (onclick, onmousemove и т.д.) позволяет в реальном времени отслеживать изменения в HTML коде страницы и DOM документа. Измененные части html кода мгновенно подсвечиваются.
    Если Вы выберите элемент страницы и нажмете на вкладку «Макет», то сможете увидеть как элемент позиционируется на странице, а вкладка «Стиль» отобразит все активные и переопределенные свойства элемента (перечеркнутое свойство).

    Свойство переопределяется по последнему установленному значению по приоритетности места его назначения.

    В целом Dragonfly тоже неплохой отладчик, но с первой попытки начать отладку у меня не получилось. При тестовой попытке отладить js сценарий, консоль ошибок почему-то упорно оставалась чистой, хотя в скрипте была допущена синтаксическая ошибка и, принудительно, отображалось окно «Консоль ошибок» с указание строки с ошибкой. Как оказалось, для каждой страницы необходимо было заново перезапускать Dragonfly.

    По сути отладка js сценариев в Dragonfly это всего лишь дублирование информации об ошибке в «Консоле ошибок» в консоли самого Dragonfly.

    Помимо этого, Dragonfly представляет обширные возможности по CSS отладки страницы. Как по мне, то немного проще для восприятия, чем в Firebug. Помимо позиционирования элемента в странице, Dragonfly предлагает просмотр отдельную вкладку «Рассчитанный стиль» в которой отображается все существующие свойства элемента и вкладку «Стили» со свойствами элемента разбитыми по классам.

    Тогда как, Firebug на вкладке «Показать вычисленный стиль» отображает все свойства без цветового оформления. Однако, по сравнению с Firebug, изменение CSS свойств и просмотр изменений в реальном времени в Dragonfly недоступно. Каких-либо особенностей Dragonfly в отличие Firebug по отладке js сценариев нет. Есть также отображение Ajax запросов, заголовки обмена данные между клиентом и сервером, время запроса. Однако указывается лишь полное время запроса без детализации. При работе с Dragonfly складывается впечатление, что он немного притормаживает. Сравнение быстродействия консолей, показало что Dragonfly таки напрягает процессор больше, хоть и незначительно.

    К минусам можно отнести то, что для отладки js сценариев не предусмотрено профилирование.

    IE Developer Tools

    Полный набор инструментов для отладки js сценариев и css отображение свойств элементов страницы. В случае синтаксической или другой ошибки в js сценарии в консоли отображается описание ошибки, название файла и номер строки в которой произошла ошибка.

    К особенностям, которых нет в других отладчиках, можно отнести:
    — возможность изменять размер страницы под популярные расширения (1024х768, 1280х768б 1280х1024 и другие);
    — при профилировании «Создание/Остановка профилей » названия функций, количество вызовов и время выполнения этих функций за промежуток можно вывести в виде дерева. Что позволяет удобно отследить очередность и вложенность вызовов функций. Firebug позволяет выводить только общий список вызванных функций;
    — функция «вид -> источник -> исходный код элемента со стилем» выводит в отдельном окне html код выделенного элемента вместе со всеми это css стилями. Это может быть особенно полезно, если Вам вдруг понадобится взять с другого сайта часть страницы вместе с сss стилями.
    К минусам можно отнести то, что в IE Developer Tools отсутствует панель для отслеживания запросов, поэтому отследить количество запросов и скорость загрузки не получится.
    Как известно, IE это самый отстающий от спецификаций браузер. При верстке дизайна IE больше всех требует внимания и поиска решений для правильного отображения элементов страницы. Поэтому к большому плюсу IE Developer Tools можно отнести возможность проверять совместимость страницы в IE 7.

    Как и в выше перечисленных отладчиках пользователю доступен просмотр стилей выделенного элемента как в разрезе стилей по классам, так и окончательный набор стилей.

    Вот пожалуй и все, с основными отладчиками js сценариев и CSS Вы ознакомились. Более детально описывать я не вижу смысла, ведь большинство возможностей обычно не используются. Все отладчики имеют русскоязычный интерфейс и с упущенными деталями Вы сможете разобраться самостоятельно без особых затруднений. Удачи Вам.

    Отладчик

    Отладчик JavaScript позволяет пройтись по JavaScript-коду, исследовать и изменить его состояние , что поможет выявить ошибки в программе.

    Вы можете использовать его для отладки кода, выполняемого локально в Firefox или работающем удаленно, например, в устройстве Firefox OS или Firefox на Android. Изучите Отладка удалённых скриптов чтобы узнать, как подключить к ним отладчик .

    Пользовательский интерфейс

    Чтобы узнать о возможностях, доступных с помощью отладчика , посмотрите следующие руководства :

    отладка JavaScript

    При написании JavaScript, если никакой инструмент отладки не является очень болезненным.

    отладка JavaScript

    Средства отладки не трудно писать программы JavaScript.

    Ваш код может содержать синтаксические ошибки, логические ошибки, если нет средств отладки, эти ошибки более трудно найти.

    Как правило, если происходит ошибка JavaScript, не будет никаких запросов, так что вы не можете найти код совсем не то место.

    Как правило, вы пишете об ошибке возникает в новом процессе кода JavaScript.

    средства отладки JavaScript

    В поисках ошибки в программном коде называется отладка.

    Отладка трудно, но, к счастью, многие браузеры имеют встроенные средства отладки.

    Встроенные средства отладки можно запустить или выключить, серьезное сообщение об ошибке будет отправлено пользователю.

    С помощью инструментов отладки, мы можем установить точку останова (стоп позиции выполнения кода), и может обнаружить, когда переменная выполнение кода.

    Браузер с поддержкой отладки, как правило, нажмите клавишу F12, и выберите «Консоль» в меню Отладка.

    Илон Маск рекомендует:  Тег bdi
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL