Вчера всё работало, а сегодня не работает / Код не работает как задумано
или
Debugging (Отладка)
В чем заключается процесс отладки? Что это такое?
Процесс отладки состоит в том, что мы останавливаем выполнения скрипта в любом месте, смотрим, что находится в переменных, в функциях, анализируем и переходим в другие места; ищем те места, где поведение отклоняется от правильного.
Будет рассмотрен пример с Сhrome, но отладить код можно и в любом другом браузере и даже в IDE.
Открываем инструменты разработчика. Обычно они открывается по кнопке F12 или в меню Инструменты
→ Инструменты Разработчика
. Выбираем вкладку Sources
Цифрами обозначены:
- Иерархия файлов, подключенных к странице (js, css и другие). Здесь можно выбрать любой скрипт для отладки.
- Сам код.
- Дополнительные функции для контроля.
В секции №2 в левой части на любой строке можно кликнуть ЛКМ, тем самым поставив точку останова (breakpoint — брейкпойнт). Это то место, где отладчик автоматически остановит выполнение JavaScript, как только до него дойдёт. Количество breakpoint’ов не ограничено. Можно ставить везде и много. На изображении выше отмечен зеленым цветом.
В остановленном коде можно посмотреть текущие значения переменных, выполнять различные команды и др.
А во вкладке Breakpoints
можно:
- На время выключить брейкпойнт(ы)
- Удалить брейкпойнт(ы), если не нужен
- Быстро перейти на место кода, где стоит брейкпойнт кликнув на текст.
Запускаем отладку
В данном случае, т.к. функция выполняется сразу при загрузке страницы, то для активации отладчика достаточно её перезагрузить. В ином случае, для активации требуется исполнить действие, при котором произойдет исполнение нужного участка кода (клик на кнопку, заполнение инпута данными, движение мыши и другие действия)
В данном случае после перезагрузки страницы выполнение «заморозится» на 4 строке:
-
Вкладка Watch — показывает текущие значения любых переменных и выражений. В любой момент здесь можно нажать на
+
, вписать имя любой переменной и посмотреть её значение в реальном времени. Напримерdata
илиnums[0]
, а можно иnums[i]
иitem.test.data.name[5].info[key[1]]
и т.д. -
Вкладка Call Stack — стэк вызовов, все вложенные вызовы, которые привели к текущему месту кода. На данный момент отладчик стоит в функции
getSum
, 4 строка. -
Вкладка Scope Variables — переменные. На текущий момент строки ниже номера 4 ещё не выполнилась, поэтому
sum
иoutput
равныundefined
.
В Local
показываются переменные функции: объявленные через var и параметры.
В Global
– глобальные переменные и функции.
Процесс
Для самого процесса используются элементы управления (см. изображение выше, выделено зеленым прямоугольником)
(F8) — продолжить выполнение. Продолжает выполнения скрипта с текущего момента. Если больше нет других точек останова, то отладка заканчивается и скрипт продолжает работу. В ином случае работа прерывается на следующей точке останова.
(F10) — делает один шаг не заходя внутрь функции. Т.е. если на текущей линии есть какая-то функция, а не просто переменная со значением, то при клике данной кнопки, отладчик не будет заходить внутрь неё.
(F11) — делает шаг. Но в отличие от предыдущей, если есть вложенный вызов (например функция), то заходит внутрь неё.
(Shift+F11) — выполняет команды до завершения текущей функции. Удобна, если случайно вошли во вложенный вызов и нужно быстро из него выйти, не завершая при этом отладку.
— отключить/включить все точки останова
— включить/отключить автоматическую остановку при ошибке. Если включена, то при ошибке в коде он скрипт остановится автоматически и можно посмотреть в отладчике текущие значения переменных, проанализировать и принять меры по устранению.
…
Итак, в текущем коде видно значение входного параметра:
data = "23 24 11 18"
— строка с данными через пробелnums = (4) ["23", "24", "11", "18"]
— массив, который получился из входной переменной.
Если нажмем F10 2 раза, то окажемся на строке 7; во вкладках Watch
, Scope
> Local
и в самой странице с кодом увидим, что переменная sum
была инициализирована и значение равно 0.
Если теперь нажмем F11, то попадем внутрь функции-замыкания nums.forEach
Нажимая теперь F10 пока не окончится цикл, можно будет наблюдать, как на каждой итерации цикла постоянно изменяются значения num
и sum
. Тем самым мы можем проследить шаг за шагом весь процесс изменения любых переменных и значений на любом этапе, который интересует.
Дальнейшие нажатия F10 переместит линию кода на строки 11, 12 и, наконец, 15.
Дополнительно
-
Остановку можно инициировать принудительно без всяких точек останова, если непосредственно в коде написать ключевое слово
debugger
:function getSum(data) { ... debugger; // <-- отладчик остановится тут ... }
-
Если нажать ПКМ на строке с брейкпойнтом, то это позволит еще более тонко настроить условие, при котором на данной отметке надо остановиться.
В функции выше, например, нужно остановиться только когдаsum
превысит значение 20.Это удобно, если останов нужен только при определённом значении, а не всегда (особенно в случае с циклами).
Больше информации о возможностях инструментов например Chrome — можно прочитать здесь
Дополнительно 2
Принудительную отладку можно инициировать событием, происходящим на странице/элементах. Это полезно, если не знаешь где обрабатывающая функция находится.
Пример для Chrome:
Нажимаем F12, заходим на вкладку Sources
и в функциях контроля видим вкладку Event Listener Breakpoints
, в которой можно назначить в качестве триггера любые события, при которых исполнение скрипта будет остановлено.
На изображении ниже выбран пункт на событие onchange
элементов.
Для Firefox:
Если функция инлайновая, например
<input type="checkbox" onchange="testFunction(this);" />
то можно зайти в Инспектор, найти тот самый элемент, в котором прописано событие и обнаружить рядом значок em
:
Кликнув на него, как утверждает developer.mozilla.org/ru/docs можно увидеть строчки:
где можно увидеть события, навешанные на элемент, скрипт, строку, возможность нажать на паузу и т.д.
В других случаях, а также если кнопка паузы не обнаружена, то на вкладке Debugger
(отладчик) надо найти стрелку, при наведении на которую будет написано «Events». Там должно быть событие выделенного элемента.
А вот таких полезных вкладок как у Chrome к сожалению у Firefox там нет.
Javascript Validator is easy to use tool to validate JavaScript code. Copy, Paste and Validate JavaScript.
This JS linter checks the js code and highlights errors as well as shows the detail of the error in a plain and easy-to-read gradient table.
How to validate JavaScript code or file?
- Open JS Validator tool and Copy and Paste JS Code in Input Text Editor.
- If you do have a JavaScript file, you can upload the file using the Upload file button. Users can also upload a js file with an internet-accessible URL. Click on the URL Button and Paste the URL.
- Click on Validate JS button once js script data is available in Text Editor, via Paste, File, or URL
- Review errors and warnings after parsing the JavaScript in the Error Section.
Report Me About:
Unused variables
Undefined variables
Warn Me:
About == null
About debugging code
About unsafe for..in
About arguments.caller and .callee
About assignments if/for/…
About functions inside loops
About eval
About unsafe line breaks
About potential typos in logical operators
When code is not in strict mode
When new is used for side-effects
Assume I’m Using:
Browser
NodeJS
jQuery
Development (console, etc.)
New JavaScript features (ES6)
Mozilla JavaScript extensions
Older environments (ES3)
Используйте онлайн-валидатор Javascript для проверки кода Javascript и поиска ошибок и предупреждений, которые можно исправить. Персонализируйте свою проверку Javascript из опций. Просматривайте ошибки и предупреждения вашего кода по мере ввода.
Что можно делать с помощью Javascript Validator?
Это помогает проверить ваш код Javascript в соответствии с правилами Javascript, найти ошибки в Javascript и предложить написать правильный Javascript.
Что такое Javascript?
JavaScript — это динамический язык компьютерного программирования. Он легкий и чаще всего используется как часть веб-страниц, реализация которых позволяет клиентскому сценарию взаимодействовать с пользователем и создавать динамические страницы. Это интерпретируемый язык программирования с объектно-ориентированными возможностями.
To use this free online JavaScript validator, enter your code into the box below and click the green validate button.
Choose a file
What is this tool?
It is a simple online JavaScript validator that you can use to find syntax errors and mistakes in your code and get suggestions for improving it.
To start using this tool simply paste your JavaScript into the editor, or use the «choose a file» option to upload a .js or .txt file from your local machine. Then click «validate» and if any errors or improvement opportunities are found they will be shown in sequential order e.g.
The validation error above is typical of what you will see. From left to right you have the number of the error in the list, what line and what column it is on in the code, what the error is; In this case, it is an unclosed string. Lastly, there is a bit of the erroneous code shown to further aid you in identifying where the problem is.
Once you have finished fixing JavaScript validation errors you can download a .js file with your edited code using the «download» option.