Последнее время я работаю только с бекендом разнообразных проектов и к фронту и тому что там происходит обращаюсь все реже и реже. А происходит там довольно много интересного, фронтенд обвешивается разного рода фреймворками по типу vue.js, лоадерами по типу requirejs и библиотеками, все это минимизируют в пару файлов и когда возникает необходимость быстро разобраться где нужный участок кода становится очень сложно, особенно когда ты только начинаешь работать с новым проектом и еще не знаком с его структурой. Очень помогает справиться с этой проблемой отладчики встроенные в браузере. Сегодня, я решил сделать для себя заметку о том, как найти код навешенный на кнопку или ссылку, и начать его дебажить..
Для фронтенд разработчиков, это наверное ежедневная задача, но я сталкиваюсь с ней от случая к случаю, поэтому вечно забываю последовательность того, как я это делаю.
Для начала создадим в jsfiddle кнопку и с помощью jquery навесим на нее несколько событий.
Код на JSFiddle: https://jsfiddle.net/orlov0562/k0szx2tf/
html код
<span id="price">100$</span> <button id="test">Test</button>
js
let someMethod=()=>{for(let i=0;i<10;i++){console.log('i: '+(i+1));$('#price').html((Number.parseInt($('#price').html())+i)+'$')}};$('#test').click(e=>console.log('Hello world 1'));$('#test').click(someMethod);$('#test').click(e=>console.log('Hello world 2')); тот же код но не минифицрованный
let someMethod = () => {
for (let i=0; i<10; i++){
console.log('i: '+(i+1));
$('#price').html((Number.parseInt($('#price').html())+i)+'$');
}
};
$('#test').click(e=>console.log('Hello world 1'));
$('#test').click(someMethod);
$('#test').click(e=>console.log('Hello world 2')); код для тех, кто не хочет использовать jsfiddle
<html>
<body>
<span id="price">100$</span>
<button id="test">Test</button>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
let someMethod=()=>{for(let i=0;i<10;i++){console.log('i: '+(i+1));$('#price').html((Number.parseInt($('#price').html())+i)+'$')}};$('#test').click(e=>console.log('Hello world 1'));$('#test').click(someMethod);$('#test').click(e=>console.log('Hello world 2'));
</script>
</body>
</html>
Пример на первый взгляд простой, но на то он и пример.
При запуске этого примера мы увидим кнопку и цену 100$, при нажатии на кнопку цена становится 145$. Ваша задача найти js код который отвечает за изменение цены и посмотреть как это происходит в дебагере. Думаю, что это похоже на то, когда вы в интернет магазине нажмете кнопку "Добавить скидочный купон" и цены пересчитываются, и допустим в пересчетах есть ошибка и вам надо найти кусок js кода где это происходит.
Для этого в Google Chrome (скриншоты будут из него, в Firefox будет +/- аналогично) на нужной кнопке нажимаем правой кнопкой мыши и выбираем "Inspect".
Chrome. Пунгк меню Inspect
В открывшейся консоли разработчика мы увидим наш элемент, если это не так, то просто найдите его в DOM дереве и нажмите на него для выделения. Следующим шагом переходим на вкладку "Event Listeners". На этой вкладке будет древовидный список всех событий связанных с выбранным элементом (в нашем случае кнопкой), жмем там на элемент "click" и раскрываем его
Chrome. Консоль разработчика. Event Listeners
Т.к. наш пример сделан внутри JsFiddle то мы видим несколько событий связанных с нашей кнопкой. Нам нужно найти нужное нам событие, чтобы начать там отладку. Для этого можно раскрыть нужное событие и посмотреть на вложенный элемент "handler"
Chrome. Консоль разработчика. Event listener handler
Таким образом можно, сразу пропустить не интересующие нас обработчики. Далее, если не понятно нужный это обработчик или нет, или в случае если это нужный, то нажимаем на ссылку, указывающие на файл в котором описан данный обработчик.
Chrome. Консоль разработчика. Найти место объявления обработчика
После нажатия, наc перекинет на вкладку Source в место объявления обработчика
Консоль разработчика Chrome. Место объявления обработчика.
Тут мы можем посмотреть то место где объявлен обработчик, его код, а так же можем начать отладку. Если же мы сразу видим, что это не то, что нужно мы можем вернуться на предыдущий шаг перейдя на вкладку "Elements".
Т.к. код минифицирован, а зачастую именно так и будет, то не совсем понятно он это или не он. Неплохо было бы его отформатировать, чтобы было удобнее читать. К счастью, сделать это можно в этом же окне, нажимаем кнопку с фигурными скобками в футере окна
Chrome. Консоль разработчика. Форматирование кода в дебаггере.
Откроется новая вкладка "formatted", где js код будет отформатирован
Консоль разработчика, отформатированный код в отладчике JS
Теперь, устанавливаем точку останова, нажав на нужную строку. Нажимаем нашу кнопку и видим, что отладчик остановился на нужной строке.
Консоль разработчика, точка останова в отладчике
На этой картинке
- 1 - нажимаем на строку, для того, чтобы установить, убрать точку останова
- 2 - нажимаем на нашу кнопку, чтобы сгенерировать событие
- 3 - строка где остановится отладчик
- 4 - кнопки управления отладчиком
- 5 - Область переменных и их значения на текущем шаге
Далее, с помощью кнопок отладчика исследуете код и нужные переменные. В нашем случае, можете понажимать на кнопку "Step over next function call" или F10 на клавиатуре и увидите пошагово как меняется значение рядом с кнопкой в отладчике.
Chrome отладчик в консоле разработчика
Заключение
Как видите, зная куда нажимать можно очень быстро найти нужный кусок JS кода, а так же провести его отладку. Что касается самого отладчика, советую уделить ему пару часов и разобраться, что и как работает - это сэкономит много времени в будущем. А у меня на сегодня все 🙂