Main > Abyss | JavaScript > Chrome: Как найти событие установленное на кнопку или ссылку

Chrome: Как найти событие установленное на кнопку или ссылку

25.12.2019 0 comments » Views: 5,129

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

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

Для начала создадим в jsfiddle кнопку и с помощью jquery навесим на нее несколько событий.

Код на JSFiddle: https://jsfiddle.net/orlov0562/k0szx2tf/

html код

<span id="price">100$</span>
<button id="test">Test</button>

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'));

тот же код но не минифицрованный

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>

<html>

<body>

</script>

</body>

</html>

Пример на первый взгляд простой, но на то он и пример.

При запуске этого примера мы увидим кнопку и цену 100$, при нажатии на кнопку цена становится 145$. Ваша задача найти js код который отвечает за изменение цены и посмотреть как это происходит в дебагере. Думаю, что это похоже на то, когда вы в интернет магазине нажмете кнопку "Добавить скидочный купон" и цены пересчитываются, и допустим в пересчетах есть ошибка и вам надо найти кусок js кода где это происходит.

Для этого в Google Chrome (скриншоты будут из него, в Firefox будет +/- аналогично) на нужной кнопке нажимаем правой кнопкой мыши и выбираем "Inspect".

Chrome. Пунгк меню Inspect

В открывшейся консоли разработчика мы увидим наш элемент, если это не так, то просто найдите его в DOM дереве и нажмите на него для выделения. Следующим шагом переходим на вкладку "Event Listeners". На этой вкладке будет древовидный список всех событий связанных с выбранным элементом (в нашем случае кнопкой), жмем там на элемент "click" и раскрываем его

Chrome. Консоль разработчика. Event Listeners

Т.к. наш пример сделан внутри JsFiddle то мы видим несколько событий связанных с нашей кнопкой. Нам нужно найти нужное нам событие, чтобы начать там отладку. Для этого можно раскрыть нужное событие и посмотреть на вложенный элемент "handler"

Chrome. Консоль разработчика. Event listenr 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 кода, а так же провести его отладку. Что касается самого отладчика, советую уделить ему пару часов и разобраться, что и как работает - это сэкономит много времени в будущем. А у меня на сегодня все

Author: Vitaly Orlov | Rating: 4/5 | Tags: Chrome , debug , handler , javascript , js , отладка

Chrome: Как найти событие установленное на кнопку или ссылку

Заключение

Leave a Reply Cancel reply