Отладка javascript скриптов


Содержание

Отладка JavaScript кода

Типы ошибок

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

Ошибки делятся на два типа:

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

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

Поиск синтаксических ошибок

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

Неправильно расставить кавычки вообще маловероятно, потому что в текстовых редакторах текст в кавычках обычно выделяется своим цветом.

Найти незакрытую скобку также помогут текстовые редакторы для программирования. В Notepad++ если поставить курсор после открывающей скобки, то она и соответствующая ей закрывающая скобка будут выделены красным цветом. Это работает со всеми видами скобок.

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

Поиск алгоритмических ошибок

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

  1. Доходит ли выполнение программы до этого места?
  2. Какое значение имеют переменные, имеющие отношение к ошибке?

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

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

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

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

В браузерах есть средства отладки, которые помогают найти и исправить ошибки в JavaScript коде. Мы используем «Инструменты разработчика» браузера FireFox, которые уже рассматривались в теме про отладку CSS. Нам будут полезны две вкладки панели инструментов — «Консоль» и «Отладчик».

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

Если скрипт содержит ошибку, то информация об этом выводится в консоль. Указывается строка, в которой находится ошибка. Только номер строки не всегда совпадает с номером в редакторе. Но можно кликнуть на цифру и откроется код скрипта. В нём номер будет совпадать.

В консоль можно вывести данные из скрипта. Текст или значения переменных. Для этого в JavaScript есть метод console.log() . Пример:

Результат будет выглядеть так:

Справа указана строка, которая вывела эту информацию.

В консоль можно вывести не только переменные, но также массивы и объекты. Сначала они выводятся в свёрнутом виде. Их можно развернуть и посмотреть все данные, которые они содержат. Удобно отображаются DOM-объекты, то есть, элементы страницы. Пример:

В консоли DOM-объект выглядит так:

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

Кликните на нужном файле и в средней части вкладки отобразиться код файла. Строки кода пронумерованы. Можно кликнуть на номерах нужных строк и они будут выделены синим цветом. На этих строках выполнение скрипта будет приостанавливаться. Такие строки называются точки останова. Они перечислены также в правой части вкладки.

Когда вы выбрали нужные строки, запустите страницу заново. Скрипт остановится на первой выбранной строке и можно будет посмотреть, как выглядит страница в этот момент. Также можно узнать какие значения имеют переменные. В правой части вкладки нужно нажать «+», написать имя переменной и нажать Enter. Затем можно добавить другую переменную.

Когда Вы посмотрели всё, что нужно, переходите к следующей точке останова. Нажмите кнопку «Возобновить». Скрипт продолжит выполнение, дойдёт до следующей выбранной строки и вновь остановится.

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

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

Коприрование материалов сайта возможно только с согласия администрации

JavaScript Отладки

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

Отладка кода

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

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

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

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

Отладчики JavaScript

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

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

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

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

Метод Console. log ()

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

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.

18. Отладка скриптов под Node.JS

Отладчик node debug

Следующая наша тема касается отладки под Node.JS. Первым делом мы рассмотрим самый простой, встроенный отладчик, который называется «node debug».

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

например server.js который упорно глючит и мы хотели бы остановит его выполнение на некотором моменте, чтобы посмотреть переменные и посмотреть что происходит. Для этого мы в этом месте ставим «debugger»

и запускаем скрипт в режиме отладки —

никаких модулей для этого ставить не надо

Запустил. Изначально скрипт находится в состоянии паузы, видите ничего не происходит. В режиме отладки есть некоторые команды, например «help» —

«help» нам вывел их список, мне сейчас нужна команда «cont». «cont» продолжит выполнение —

Видите, он продолжил и даже вывел в console — «Server is running».

Отлично, что ж, давайте откроем браузер и перейдем по этой ссылке — http://127.0.0.1:1337/

Опа, как только я зашел, произошло событие ‘request’, запустился обработчик и выполнение остановилось, как раз на команде «debugger».

теперь я могу перейти в консоль «repl» — режим выполнения команд и например, выяснить, что такое «urlParsed»

например запустить что то — «res.end(«Uahahaha!»)

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

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

Отладка под браузером Chrome

Для этого нам понадобится утилита которая называется «node inspector». Поставим ее глобально

приготовления завершены и теперь несколько слов о том, что сейчас будет происходить. У Node.JS, при запуске, есть специальный параметр «—debug» после которого можно дать файл скрипта для запуска

когда Node.JS запускается с этим параметром, то он не только запускает server.js, но Node.JS так же начинает слушать происходящее на этом порту — «5858». К этому порту может подключиться другая программа и давать команды Node.JS, относящиеся к отладке. Например приостановить выполнение, возобновить выполнение, получить текущее значение какой то переменной и так далее. Эти команды выдаются в соответствии со специальным протоколом, который описан в документации к «V8» — https://github.com/v8/v8/wiki/Debugging%20Protocol. Например, вы можете посмотреть примеры команд в доке, вот такая команда

означает продолжить выполнение, или вот такая команда

говорит Node.JS вычислить 1+2. Мы конечно же эти команды вручную набирать не будем, хотя могли бы, а используем утилиту node-inspector которая как раз будет посылать эти команды, а нам предоставлять красивый веб интерфейс.

Итак, оставлю Node.JS здесь запущенным

и открою новое окно консоли, в котором запущу node-inspector.

node-inspector — это веб сервер к которому можно подсоединиться под этим урлом — http://127.0.0.1:8080/?port=5858, который он дает и работать с отладчиком. То есть я буду слать команды веб серверу node-inspector, а он будет транслировать их как раз ноде, которая слушает протокол отладки, используя язык отладки «V8».

Итак я зашел в node-inspector

Этот дизайн похож на встроенный инструмент разработки, хромовский, но на самом деле это не они. Они похожи, поскольку вот эти стили HTML взяты из того же движка, соответственно интерфейс очень похож, но на самом деле это всего лишь веб страница, которую нам отдает node-inspector. Теперь я зайду в отдельном окошке на страницу http://127.0.0.1:1337/echo?message=TEST, вернувшись в интерфейс отладчика мы увидим


Произошло следующее — когда я перешел по этому адресу, то сработала функция обработчик request — это та функция которая передается вторым параметром методу «server.on()»

Если бы Node.JS был запущен без флагов отладки, то команда debugger была бы проигнорирована, но в нашем случае она сработала, V8 приостановил выполнение JavaScript и послал node-inspector, который подключен к ноде по этому порту — «5858», об этом информацию. Node-inspector ее получил и при помощи протокола «WebSocket», с которым мы познакомимся далее, переслал ее в браузер, браузерному JavaScript. Здесь уже отреагировал на это веб интерфейс и показал мне, что вот тут остановка

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

При этом node-inspector берет на себя трансляцию моих действий в команды для отладчика V8. Могу даже использовать консоль, посмотреть «urlParsed»

Все есть. Или если я хочу ответить на запрос, то я могу сделать так же как делал со встроенным отладчиком, а именно вызвать метод в текущем контексте — «res.end(«Uahahaha! Test passed»);»

Когда я наотлаживался, я могу play сделать

придется нажать дважды, потому что favicon будет запрашиваться.

при следующем запросе

опять управление перейдет сюда

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

Все очень удобно, этим рекомендуется пользоваться. Единственное рекомендуется иметь ввиду, что мы работаем с цепочкой соединений. Мы зайдя в данный url к node-inspector — «http://127.0.0.1:8080/?port=5858», присоединяемся из клиентского, браузерного JavaScript к серверу node-inspector, серверный node-inspector присоединяется к Node.JS и бывает так, что какое то из этих соединений рвется, соответственно отладка перестает работать, в этом случае можно перезайти на страницу отладки, если это не помогло, рестартовать node-inspector, если это не помогло, то рестартовать по цепочке все — ноду, node-inspector и перезайти на страницу в браузере и тогда точно все будет хорошо.

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

сейчас я запущу этот сервер — раз

Теперь, если я перейду по адресу сервера — «http://127.0.0.1:1337/», то никакой отладки не произойдет, потому что JavaScript просто упадет. Для того чтобы отлаживать JavaScript в этом случае, можно зайти в отладчик и здесь кликнуть то же самое, что мы кликаем в отладчике в браузере

то есть сделать эту пимпочку фиолетовой. Теперь перехожу на эту страницу — «http://127.0.0.1:1337/» и отладчик останавливается на ошибке

Давайте взглянем на еще один пример отладки, на этот раз консольной утилитой.

В файле pow.js есть вычисление степени при помощи такой вот рекурсивной функции.

и при вызове она должна вывести, как видим, два в третьей степени

Но выводит 32. А два в третьей это, как известно, восемь. В чем же дело? Чтобы посмотреть, что происходит, попробуем запустить отладчик.

Теперь если я попробую запустить node-inspector, то он запустится, но на самом деле ничего отлаживаться не будет. Почему? Так как мы понимаем происходящее, то можем это легко объяснить. Ведь нода запустилась, открыла доступ по порту «5858», а потом выполнила скрипт и все. Нода закончила свою работу, она уже все вывела и все и никакой node-inspector теперь к ней не подключится, ну просто потому что она не запущена. Порт 5858 закрыт. Что делать? То что нам на самом деле нужно — это другой флаг «debug-brk», он запускает скрипт сразу входя в состояние останова.

Вот я запустил, оно подняло отладчик и теперь ждет пока кто нибудь к нему подключится и даст команду продолжить выполнение. Теперь я для верности перезапущу node-inspector, который запущен в отдельном окне.

И войдем в инструменты разработки через Chrome. Открываю соответствующий url

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

По центру находится текущий скрипт, справа находится информация и кнопки управление процессом. Сейчас я нажму вот сюда

Эта кнопка или клавиша F11 переведет управление на следующую команду. Нажимаю

Хм, куда же мы попали? Здесь немножко тонкий момент, дело в том, что когда я попытаюсь подключить объект «console», то Node.JS его require, мы видим это на изображении, это встроенный объект по умолчанию не подключается, а тут вот нужно его подключить. Процесс подключения console нас не очень интересует, по этому я нажму другую кнопку, вот эту

которая означает, что процесс выполнения нужно продолжить, но остановиться как только произойдет выход из этой функции. На изображении мы видим, что после того как я нажал на эту кнопку node-inspector нам показал, что console подключен и следующий вызов обратится к pow(). Жмем F11 или кнопку step to next function

вот мы находимся внутри функции pow(), и теперь повторные нажатия будут переводить управление внутрь вложенных вызовов нажму несколько раз

видите «Call Stack» растет. «Call Stack» это последовательность сложенных вызовов функции которые привели к текущему положению дел. Соответственно в данном случае из списка Call Stack нас интересует pow.js, это единственный наш файл, остальное показаны встроенные всякие модули. Если мы выделим какой либо из вызовов pow.js, из списка Call Stack, мы увидим, что различаются он локальными переменными.

Дальнейшие шаги по отладке очевидны, по этому мы переходим дальше, а именно к отладке под IDE.

Отладка под IDE

В качестве IDE будет использоваться WebStorm и для того, чтоб запустить отладку нам вполне подойдет уже готовая конфигурация,

Единственное нужно будет, чтоб запускалась именно нода, а не supervisor!
Чтобы запустить отладку жму сюда

И смотрю в консоле, что у меня получилось. При запуске в режиме отладки, WebStorm добавляет к Node соответствующий параметр «—debug-brk» и указывает ему значение, это значение это порт на котором нода должна ожидать подключение отладчика, по умолчанию — 5858. Ранее к этому порту подключался node-inspector, но сейчас к этому порту подключен сам WebStorm. Соответственно он реализует необходимый интерфейс и сейчас если я зайду в браузере на этот url — «http://127.0.0.1:1337/echo?message=TEST» и перейдем в окно WebStorm, то увидим

То произойдет остановка, и здесь, в окне Variables, я могу ходить, анализировать переменные смотреть urlParsed и так далее.

Резюме по способам отладки для Node.JS

Первый способ, это запуск node debug script. При этом нода тут же приостанавливает выполнение скрипта и переходит в специальный режим консольной отладки. В котором можно получит список команд, через «help», управлять выполнением скрипта, переходить в режим консоли через «repl». Это работает, но уж больно просто. Хочется какой то более удобный интерфейс, по этому в тех случаях когда это возможно используется отладка под браузером Chrome, через node-inspector либо под IDE. Для того чтобы такая отладка стала возможной нужно запустить ноду со специальным флагом «—debug» либо «—debug-brk», последний при этом, переведет скрипт в состояние остановки тут же. Если нода запущена с этими флагами, то она дает доступ к встроенному механизму отладки V8, соответственно V8 начинает слушать этот порт, по умолчанию 5858, отладчик к нему подключается и может слать команды которые управляют выполнением, получать текущие переменные и так далее. Для отладки под браузером Chrome в качестве отладчика можно использовать node-inspector, который с одной стороны подключается к порту ноде и умеет говорить с ней, с другой стороны он показывает страничку в Chome и принимает через нее команды, вместо Chrome могут быть другие браузеры, достаточно современные. Ну а относительно IDE я могу сказать то что смотря какая у вас IDE, как в ней все сделано, это может быть удобно, может не удобно, лично для меня наиболее безглючным и надежным способом, как правило, является отладка через Chrome, но для нее нужно запускать node-inspector.

2 thoughts on “18. Отладка скриптов под Node.JS”

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

noc-pkg-pyclips для отладки скриптов не требуются, поэтому, их отсутствие на работоспособности не скажется.

Отладка и устранение распространённых ошибок в 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» означает «позвони», то есть Бритни хочет, чтобы её бывший позвонил ей ещё раз. Это, возможно, приведёт к ещё большему количеству звонков в будущем. По сути это рекурсия, которая может вызвать ошибку в случае переполнения стека вызовов.

Helastel, удалённо, от 150 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, чем были вчера.

Отладка приложения 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:

Вы закрыли все экземпляры браузера, включая расширения 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.

Отладка JavaScript в настоящем встроенном отладчике, о котором вы не знали

Дата публикации: 2020-02-19

От автора: console.log может много сказать о приложении, но с его помощью нельзя по-настоящему заниматься отладкой кода. Новый JS дебагер в Firefox поможет вам писать код быстрее и без багов. Статья про принцип работы этого отладчика.

В этом примере мы откроем очень простое приложение, с помощью которого легко делается отладка JavaScript. Само приложение работает на базовых open source JS фреймворках. Откройте его в последней версии Firefox Developer Edition и запустите debugger.html с помощью комбинации клавиш Option + Cmd + S на Mac или Shift + Ctrl + S на Windows. Отладчик разделен на 3 панели: панель со списком файлов, панель кода и панель инструментов.

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Прекратите использовать console.log

Нам хочется использовать console.log для отладки кода. Просто добавляем вызов в код, чтобы узнать значение переменной, и все, так ведь? Такой подход будет работать, но он громоздкий и долгий. В этом пример мы будем пошагово выполнять приложение с помощью debugger.html для поиска значения переменной.

С помощью debugger.html можно погружаться вглубь код, просто добавив точку останова на строке. Точки останова ставят отладчик на паузу, чтобы вы могли посмотреть код. В этом примере мы добавим точку останова на строку 13 файла app.js.

Теперь добавьте задачу в список. Код остановится на функции addTodo, и мы сможем посмотреть в коде значение поля. Наведите курсор на переменную, чтобы увидеть ее значение и т.д. Так можно посмотреть якоря, апплеты, дочерние элементы и т.д.:

Эту же информацию можно найти на панели Области.

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

Следить за значением переменной моно также с помощью выражений для отслеживания. Просто введите выражение в поле Выражения для отслеживания, и отладчик будет следить за ним во время выполнения кода. В примере выше можно добавить выражения title и to-do, и отладчик разобьет значения, когда они будут доступны. Особенно полезно, когда:

Вы пошагово выполняете код и следите за изменением значения;

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

Вы пытаетесь понять, почему эта чертова кнопка не работает.

С помощью debugger.html также можно проводить отладку приложений React/Redux. Как это работает:

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Перейдите к компоненту, который хотите отладить.

Смотрите схему компонента слева (функции в классе).

Добавьте точки останова в подходящие функции.

Нажмите паузу и следите за свойствами и состояниями компонента.

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

debugger.html позволяет смотреть запутанный или минифицированый код, который может вызывать ошибки. Особенно полезно при работе с общими фреймворками типа React/Redux. Дебагер знает о компоненте, на котором вы нажали паузу, и покажет упрощенный стек вызова, схему компонента и свойства. Ниже разработчик, Amit Zur объясняет, как он использует отладчик кода в Firefox на JS Kongress:

Если хотите подробно изучить новый debugger.html, зайдите на Mozilla Developer Playground. Мы создали серию уроков, чтобы помочь разработчикам научиться эффективно использовать инструмент для отладки кода.

Инструменты разработчика с открытым исходным кодом

Проект debugger.html был запущен примерно 2 года назад вместе с полным пересмотром Firefox DevTools. Мы хотели перевести DevTools на современные технологии, открыть их разработчикам по всему миру. А так как технология открыта, она может свободно вырасти в то, что маленькая группа в Mozilla и не могла себе представить.

JS – основа любого продвинутого веб-приложения, поэтому мощный отладчик был основной частью набора инструментов. Мы хотели создать что-то быстрое, легкое в использовании, адаптирующееся – способное отлаживать любой новый JS фреймворк. Мы решили использовать популярные веб-технологии, так как хотели работать ближе к сообществу. Этот подход улучшил бы сам отладчик – если бы мы приняли Webpack и начали внутренне использовать билд инструмент и карты исходников, мы бы захотели улучшить сопоставление исходников и горячую перезагрузку.

debugger.html написан на React, Redux и Babel. Компоненты React легкие, тестируемые и легко проектируемые. Для быстрого прототипирования UI и документации общих компонентов мы используем React Storybook. Это упрощает работу с разными JS фреймворкам (типа React). Babel front-end позволяет делать такие вещи, как показывать класс Component и его функции в левом сайдбаре. Мы также можем устанавливать точки останова на функции, и они не сдвинутся, если вы измените код.

Действия Redux – это чистый API для UI. Однако их также можно использовать для создания независимого CLI JS Debugger. В хранилище Redux есть селекторы для запроса текущего состояния отладки. Наши юнит тесты запускают действия Redux и имитируют ответы браузера. Интеграционные тесты приводят браузер в действие с Redux действиями отладчика. Сама функциональная архитектура спроектирована для тестирования.

Мы полагались на сообщество разработчиков Mozilla на каждом шаге. Проект был выложен на GitHub, и наша команда достучалась до разработчиков по всему миру, и они откликнулись. В самом начале для сообщества были критичны автоматические тесты. Тесты проводили регресс и документировали поведение, которое легко можно не доглядеть. Именно поэтому один из первых шагов был – написание юнит тестов для действий Redux и типов Flow для хранилища Redux. Фактически, сообщество обеспечило, что покрытие Flow и Jest помогло убедиться в том, что каждый файл был написан и протестирован.

Как разработчики, мы считаем, что инструменты тем сильнее, чем больше вовлечено разработчиков. Наша основная команда всегда была маленькая (2 человека), но в среднем за неделю было 15 помощников. Сообщество дало нам разные точки зрения, что помогло нам предвидеть сложности и написать функции, о которых мы и не могли мечтать. Сейчас мы форматируем стеки вызовов под 24 библиотеки. О многих мы даже не знали. Мы также показываем карты Webpack и Angular в дереве исходников.

Мы планируем перенести все Firefox DevTools на GitHub, чтобы их могли использовать и улучшать больше людей. Мы с радостью примем вашу помощь. Можете перейти на страницу нашего проекта debugger.html на GitHub. Мы написали целый список инструкций по запуску отладчика на своей машине, где вы можете менять все, что хотите. Используйте его для отладки JS кода для чего угодно – браузеров, терминалов, серверов, телефонов, роботов. Если видите, что можно улучшить, пишите нам на GitHub.

Автор: Dustin Driver

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Изучите, как отладить JavaScript с помощью Chrome DevTools

Забудьте об отладке при помощи console.log навсегда! Изучите, как использовать точки останова для отладки кода в инструментах разработчика Chrome

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

Эта статья о правильном пути отладки! Вы узнаете, как использовать инструменты разработчика Chrome для настройки точек останова и исследования кода. Такой подход часто наиболее эффективный способ поиска и исправления ошибок в коде.

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

Шаг 1: Воспроизводим ошибку

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

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

  • Вот веб-страница, с которой мы будем работать в рамках этой статьи. Открывайте её в новой вкладке: ДЕМО.
  • В демо для Number 1 введите 5 .
  • Введите 1 для Number 2.
  • Нажмите Add Number 1 and Number 2.
  • Посмотрите на метку ниже инпутов и кнопки. Она говорит, что 5 + 1 = 51 .

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


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

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

  • Вернитесь к демо и откройте DevTools, нажав Command+Option+I (Mac) или Control+Shift+I (Windows, Linux).
  • Перейдите во вкладку Sources.
  • Нажмите Event Listener Breakpoints, чтобы развернуть меню. DevTools раскрывает список категорий событий, таких как Animation и Clipboard.
  • Разверните категорию событий Mouse.
  • Выберите click.
  • Вернувшись к демо, снова нажмите Add Number 1 and Number 2. DevTools приостановит работу и выделит строку кода в панели Sources:

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

Шаг 3: Исследуем код

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

  • На панели Sources в DevTools нажмите Step into next function call.

Эта кнопка позволяет вам осуществить выполнение функции onClick() по одной строке за раз. DevTools остановит выполнение и выделит следующую строку кода:

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

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

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

Шаг 4: Устанавливаем другую точку останова

Наиболее распространены точки останова, устанавливаемые на строках кода: когда у вас есть определенная строка кода, которую вы хотите приостановить. Попробуйте прямо сейчас:

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

Слева от кода вы можете увидеть номер этой конкретной строки: 32. Нажмите на него. DevTools поместит синюю иконку поверх номера. Это означает, что на этой строке есть точка останова. DevTools теперь всегда будет приостанавливаться до неё.

  • Нажмите кнопку Resume script execution:

Сценарий будет выполняться до тех пор, пока не встретит точку останова.

  • Посмотрите на уже выполненные строки кода в updateLabel() . DevTools выводит значения addend1 , addend2 и sum .

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

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

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

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

  • На панели Sources DevTools нажмите Watch. Секция раскроется.
  • Нажмите Add Expression.

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

Вторая альтернатива в DevTools для console.log() — это консоль. Используйте консоль для взаимодействия с произвольными операторами JavaScript. При отладке разработчики обычно используют консоль для перезаписи значений переменных. В вашем случае консоль может нам помочь проверить возможные пути исправления обнаруженной ошибки. Попробуйте прямо сейчас:

  • Если у вас не открыта консоль, откройте её нажатием Escape. Она откроется в нижней части окна DevTools.
  • В консоли введите parseInt(addend1) + parseInt(addend2) .
  • Нажмите Enter. DevTools вычислит команду и выведет 6 — ожидаемый результат.

Шаг 6: Исправляем

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

  • В редакторе кода на панели Sources DevTools замените var sum = addend1 + addend2 на var sum = parseInt(addend1) + parseInt(addend2); . Это на одну строку выше места вашей остановки.
  • Нажмите Command+S (Mac) или Control+S (Windows, Linux) для сохранения изменений. Фон кода изменится на красный, сигнализируя, что сценарий был изменен в DevTools.
  • Нажмите Deactivate breakpoints.

Кнопка окрасится синим, указывая, что она активна: DevTools игнорирует любые точки останова.

  • Нажмите Resume script execution

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

Часть этой страницы — модификации, основанные на работе, созданной и распространяемой Google , и используются в соответствии с условиями, описанными в Creative Commons 3.0 Attribution License . Эта статья была адаптирована из Get Started with Debugging JavaScript in Chrome DevTools от Kayce Basques.

Отладка JavaScript кода

Типы ошибок

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

Ошибки делятся на два типа:

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

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

Поиск синтаксических ошибок

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

Неправильно расставить кавычки вообще маловероятно, потому что в текстовых редакторах текст в кавычках обычно выделяется своим цветом.

Найти незакрытую скобку также помогут текстовые редакторы для программирования. В Notepad++ если поставить курсор после открывающей скобки, то она и соответствующая ей закрывающая скобка будут выделены красным цветом. Это работает со всеми видами скобок.

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

Поиск алгоритмических ошибок

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

  1. Доходит ли выполнение программы до этого места?
  2. Какое значение имеют переменные, имеющие отношение к ошибке?

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

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

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

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

В браузерах есть средства отладки, которые помогают найти и исправить ошибки в JavaScript коде. Мы используем «Инструменты разработчика» браузера FireFox, которые уже рассматривались в теме про отладку CSS. Нам будут полезны две вкладки панели инструментов — «Консоль» и «Отладчик».

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

Если скрипт содержит ошибку, то информация об этом выводится в консоль. Указывается строка, в которой находится ошибка. Только номер строки не всегда совпадает с номером в редакторе. Но можно кликнуть на цифру и откроется код скрипта. В нём номер будет совпадать.

В консоль можно вывести данные из скрипта. Текст или значения переменных. Для этого в JavaScript есть метод console.log() . Пример:

Результат будет выглядеть так:

Справа указана строка, которая вывела эту информацию.

В консоль можно вывести не только переменные, но также массивы и объекты. Сначала они выводятся в свёрнутом виде. Их можно развернуть и посмотреть все данные, которые они содержат. Удобно отображаются DOM-объекты, то есть, элементы страницы. Пример:

В консоли DOM-объект выглядит так:

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

Кликните на нужном файле и в средней части вкладки отобразиться код файла. Строки кода пронумерованы. Можно кликнуть на номерах нужных строк и они будут выделены синим цветом. На этих строках выполнение скрипта будет приостанавливаться. Такие строки называются точки останова. Они перечислены также в правой части вкладки.

Когда вы выбрали нужные строки, запустите страницу заново. Скрипт остановится на первой выбранной строке и можно будет посмотреть, как выглядит страница в этот момент. Также можно узнать какие значения имеют переменные. В правой части вкладки нужно нажать «+», написать имя переменной и нажать Enter. Затем можно добавить другую переменную.

Когда Вы посмотрели всё, что нужно, переходите к следующей точке останова. Нажмите кнопку «Возобновить». Скрипт продолжит выполнение, дойдёт до следующей выбранной строки и вновь остановится.

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

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

Коприрование материалов сайта возможно только с согласия администрации

Отладка JavaScript

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

Находите скрипты с легкостью

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

Приостанавливайте выполнение на любой строчке

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

Чтобы установить брейкпойнт, кликните на номере любой строки, и там появится красная точка, обозначающая, что брейкпойнт установлен. Кликните на красной точке еще раз, чтобы убрать брейкпойнт.

Приостановить выполнение, только если.

Брейкпойнты могут создать проблемы, если срабатывают слишком часто. Иногда мы хотим приостанавливать выполнение только при выполнении определенных условий. Firebug позволяет Вам устанавливать «условные» брейпкойнты. Они проверяют выражение, которое должно быть истинным, чтобы брейкпойнт сработал.

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

По одному шагу

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

Вы также можете продолжить выполнение больше, чем на одну строчку. Выберите в контекстном меню нужной строки «Run to this Line», чтобы продолжить выполнение до этой строчки.

Я прерываюсь при ошибках

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

Развернутый стек

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

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

Наблюдение за выражениями

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

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

Подсказки к переменным

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

Профилируйте производительность JavaScript

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

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

Чтобы использовать профилировщик, просто зайдите во вкладку Console и кликните кнопку «Profile». Затем попользуйтесь Вашим приложением некоторое время или перезагрузите страницу, и кликните «Profile» еще раз. Вы увидите детальный отчет, который показывает, какие функции были вызвани и сколько времени заняла каждая.

Логирование вызовов функций

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

Чтобы отслеживать все вызовы функции, просто сделайте правый клик на вкладке Script и выберите «Log calls to ‘имя функции'». Затем перейдите в консоль и смотрите, как в лог вплывают вызовы.

Перейти прямо на строку 108

Часто Вы хотите перейти четко на нужную строчку вашего скрипта. Нет ничего легче, просто наберите номер строки в окошке быстрого поиска, поставив вначале #, как показано на левом скриншоте.

Firebug — бесплатное расширение для Firefox. Ставим?

Илон Маск рекомендует:  Расширение php 4 0
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL