как искать ошибки в коде используете ли вы дебаггер

Как искать и исправлять ошибки в коде

Представляем перевод статьи «How to fix bugs, step by step», опубликованный сайтом tproger.ru.

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

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

Шаг 1: Занесите ошибку в трекер

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

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

Вы должны записать в трекер следующую информацию:

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

Шаг 2: Поищите сообщение об ошибке в сети

Если у вас есть сообщение об ошибке, то вам повезло. Или оно будет достаточно информативным, чтобы вы поняли, где и в чем заключается ошибка, или у вас будет готовый запрос для поиска в сети. Не повезло? Тогда переходите к следующему шагу.

Шаг 3: Найдите строку, в которой проявляется ошибка

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

Шаг 4: Найдите точную строку, в которой появилась ошибка

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

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

Шаг 5: Выясните природу ошибки

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

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

Шаг 6: Метод исключения

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

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

Шаг 7: Логгируйте все подряд и анализируйте журнал

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

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

Шаг 8: Исключите влияние железа или платформы

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

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

Ради интереса, переключите кабель питания в другую розетку или к другому ИБП. Безумно? Почему бы не попробовать?

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

Шаг 9: Обратите внимание на совпадения

Шаг 10: Обратитесь в техподдержку

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

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

Полезные советы (когда ничего не помогает)

Что вам точно не поможет

Ошибка, которую я недавно исправил

Источник

Как найти ошибку в своем коде?

2. При работе с БД надо её настраивать так, чтобы она сообщала об ошибках.

Для mysqli, перед коннектом всегда должна быть строчка

Если используется PDO, то соединяться, как написано здесь: http://phpfaq.ru/pdo

5. При проблемах во взаимодействии сервера и клиента (куки, сессии, запросы)- в обязательном порядке смотреть обмен HTTP заголовками

6. Закомментируйте строчку с header(«Location:»), если ищете обшибку в обработчике POST запроса

8. И САМОЕ ВАЖНОЕ: запуская скрипт, смотрите не то, что показывает браузер, а ИСХОДНЫЙ HTML код!.

Программа не работает. Что можно сделать в этом случае?

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

Во-вторых, убедись, что в коде отсутствуют символы ‘@’ перед именами функций. Этот запрещает вывод сообщения об ошибке. Хорошенькое дело! Ты ошибку ищешь-ищещь, а сам же своей программе рот заткнул.

Следует понимать, что здесь приведён пример, Нереальный. Показан алгоритм действий.
В реальности, при error_reporting(E_ALL); PHP сразу же показал бы, что индекс массива у вас неправильный.

Надеюсь, что я смог хотя бы немного объяснить принципы этого занятия.
Удачной отладки.

Источник

Как и какими средствами находить ошибки в Javascript коде?

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

А порой просто иду на проф. ресурсы, например Stack Overflow и публикую вопрос «Где здесь ошибка?» или «Почему не работает?»

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

Вопрос: какие есть способы, чтобы найти ошибки в Javascript коде? Какие инструменты, методы, плагины, пути и пр.?

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

4 ответа 4

Вчера всё работало, а сегодня не работает / Код не работает как задумано

Debugging (Отладка)

В чем заключается процесс отладки? Что это такое?

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

Будет рассмотрен пример с Сhrome, но отладить код можно и в любом другом браузере и даже в IDE.

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

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

А во вкладке Breakpoints можно:

Запускаем отладку

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

В данном случае после перезагрузки страницы выполнение «заморозится» на 4 строке:

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

В Local показываются переменные функции: объявленные через var и параметры. В Global – глобальные переменные и функции.

Процесс

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

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

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер ( F10 ) — делает один шаг не заходя внутрь функции. Т.е. если на текущей линии есть какая-то функция, а не просто переменная со значением, то при клике данной кнопки, отладчик не будет заходить внутрь неё.

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер ( F11 ) — делает шаг. Но в отличие от предыдущей, если есть вложенный вызов (например функция), то заходит внутрь неё.

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер ( Shift+F11 ) — выполняет команды до завершения текущей функции. Удобна, если случайно вошли во вложенный вызов и нужно быстро из него выйти, не завершая при этом отладку.

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер — отключить/включить все точки останова

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер — включить/отключить автоматическую остановку при ошибке. Если включена, то при ошибке в коде он скрипт остановится автоматически и можно посмотреть в отладчике текущие значения переменных, проанализировать и принять меры по устранению.

Итак, в текущем коде видно значение входного параметра:

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Дальнейшие нажатия F10 переместит линию кода на строки 11, 12 и, наконец, 15.

Дополнительно

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

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

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Это удобно, если останов нужен только при определённом значении, а не всегда (особенно в случае с циклами).

Больше информации о возможностях инструментов например Chrome — можно прочитать здесь

Дополнительно 2

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

Пример для Chrome:

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Для Firefox:

Если функция инлайновая, например

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

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Кликнув на него, как утверждает developer.mozilla.org/ru/docs можно увидеть строчки:

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

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

В других случаях, а также если кнопка паузы не обнаружена, то на вкладке Debugger (отладчик) надо найти стрелку, при наведении на которую будет написано «Events». Там должно быть событие выделенного элемента.

А вот таких полезных вкладок как у Chrome к сожалению у Firefox там нет.

Источник

Как и какими средствами находить ошибки в коде Java?

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

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

Вопрос: какие есть способы, чтобы найти ошибки в Java коде? Какие есть инструменты, методы, пути и пр.?

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

2 ответа 2

Вчера всё работало, а сегодня не работает / Код не работает как задумано

Debugging (Отладка)

В чем заключается процесс отладки? Что это такое?

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

Заметка: Отладка производится как правило в IDE (Интегрированная среда разработки). Что это такое можно чуть подробнее ознакомиться в вопросе

Какие есть способы предупреждения ошибок, их нахождения и устранения?

В данном случае будет рассмотрен пример с Intellij IDEA, но отладить код можно и в любой другой IDE.

Подготовка

Достаточно иметь в наличии IDE, например Intellij IDEA

Запуск

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Отладка запускается сочетанием Shift+F9 или выбором в верхнем меню Run → Debug или нажатием зеленого «жучка»:

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

В данном случае, т.к. функция вызывается сразу на той же странице, то при нажатии кнопки Debug — отладчик моментально вызовет метод, выполнение «заморозится» на первом же брейкпойнте. В ином случае, для активации требуется исполнить действие, при котором произойдет исполнение нужного участка кода (клик на кнопку в UI, передача POST запроса с данными и прочие другие действия)

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Процесс

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

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Show Execution Point ( Alt+F10 ) — переносит в файл и текущую линию отлаживаемого скрипта. Например если файлов много, решили посмотреть что в других вкладках, а потом забыли где у вас отладка 🙂

Step Over ( F8 ) — делает один шаг не заходя внутрь функции. Т.е. если на текущей линии есть какая-то функция, а не просто переменная со значением, то при клике данной кнопки, отладчик не будет заходить внутрь неё.

Step Into ( F7 ) — делает шаг. Но в отличие от предыдущей, если есть вложенный вызов (например функция), то заходит внутрь неё.

Step Out ( Shift+F8 ) — выполняет команды до завершения текущей функции. Удобна, если случайно вошли во вложенный вызов и нужно быстро из него выйти, не завершая при этом отладку.

Rerun ( Ctrl+F5 ) — Перезапустить отладку

Resume Program( F9 ) — Продолжает выполнения скрипта с текущего момента. Если больше нет других точек останова, то отладка заканчивается и скрипт продолжает работу. В ином случае работа прерывается на следующей точке останова.

Stop ( Ctrl+F2 ) — Завершить отладку

View Breakpoints ( Ctrl+Shift+F8 ) — Посмотреть все установленные брейкпойнты

Mute Breakpoints — Отключить брейкпойнты.

Итак, в текущем коде видно значение входного параметра:

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Если нажмем F8 2 раза, то окажемся на строке 27; во вкладках Watches и Variables и в самой странице с кодом увидим, что переменная sum была инициализирована и значение равно 0, а также nums инициализирована и в ней лежит массив целых чисел <23, 24, 11, 18>.

Дальнейшие нажатия F8 переместит линию кода на строки 31, 32 и, наконец, 36.

Дополнительно

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

как искать ошибки в коде используете ли вы дебаггер. Смотреть фото как искать ошибки в коде используете ли вы дебаггер. Смотреть картинку как искать ошибки в коде используете ли вы дебаггер. Картинка про как искать ошибки в коде используете ли вы дебаггер. Фото как искать ошибки в коде используете ли вы дебаггер

Это удобно, если останов нужен только при определённом значении, а не всегда (особенно в случае с циклами).

Источник

Отладка в браузере Chrome

Давайте отвлечёмся от написания кода и поговорим о его отладке.

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

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

Панель «Исходный код» («Sources»)

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

При первом запуске получаем следующее:

Кнопка-переключатель откроет вкладку со списком файлов.

Интерфейс состоит из трёх зон:

Консоль

Результат выполнения инструкций сразу же отображается в консоли.

Точки останова (breakpoints)

Ура! Вы поставили точку останова. А теперь щёлкните по цифре 8 на восьмой линии. Номер строки будет окрашен в синий цвет.

Вот что в итоге должно получиться:

Точка останова – это участок кода, где отладчик автоматически приостановит исполнение JavaScript.

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

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

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

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

Команда Debugger

Выполнение кода можно также приостановить с помощью команды debugger прямо изнутри самого кода:

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

Остановимся и оглядимся

В нашем примере функция hello() вызывается во время загрузки страницы, поэтому для начала отладки (после того, как мы поставили точки останова) проще всего её перезагрузить. Нажмите F5 (Windows, Linux) или Cmd + R (Mac).

Выполнение прервётся на четвёртой строчке:

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

Watch показывает текущие значения выражений.

Нажмите на + и введите выражение. В процессе выполнения отладчик автоматически пересчитывает и выводит его значение.

Call Stack показывает последовательность вызовов функций.

При нажатии на элемент списка (например, на «anonymous») отладчик переходит к соответствующему коду, и нам представляется возможность его проанализировать.

Scope показывает текущие переменные.

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

В Global перечисляются глобальные переменные (т.е. объявленные за пределами функций).

Не обращайте пока внимание на ключевое слово this – его мы изучим чуть позже.

Пошаговое выполнение скрипта

А теперь давайте пошагаем по нашему коду.

В правой части панели для этого есть несколько кнопок. Рассмотрим их.

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

Вот, что мы увидим, кликнув на неё:

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

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

– активировать/деактивировать все точки останова.

Эта кнопка не влияет на выполнение кода, она лишь позволяет массово включить/отключить точки останова.

– разрешить/запретить остановку выполнения в случае возникновения ошибки.

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

Если щёлкнуть правой кнопкой мыши по строчке кода, в контекстном меню можно выбрать опцию «Continue to here» («продолжить до этого места»).

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

Логирование

К примеру, выведем в консоль значения от нуля до четырёх:

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

Итого

Приостановить выполнение скрипта можно тремя способами:

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

Нами описаны далеко не все инструменты разработчика. С полным руководством можно ознакомиться здесь: https://developers.google.com/web/tools/chrome-devtools.

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

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

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *