Вопрос по javascript, google-chrome-devtools, google-closure-library – Как узнать, какие функции вызываются при нажатии кнопки в консоли Chrome?

43

Я пытаюсь научить себя библиотеке JavaScript Google Closure. Я изучаю виджет пользовательского интерфейса TreeControl.

Как я могу использовать Chrome Console для анализа того, какие функции запускаются, когда я нажимаю на кнопку & quot; Вырезать & quot; кнопка в демке ниже? Например, могу ли я как-то установить точку останова для этого? Я пытался просмотреть исходный код и осмотреться, но мне кажется, что Chrome Console может предложить более систематический метод.

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

Ваш Ответ

4   ответа
91

Точки останова прослушивателя событий & quot; раздел на правой стороне области отладчика. Откройте это и выберите событие щелчка под «мышью». Смотрите изображение на экране. Затем нажмите на кнопку в приложении, и вы сразу же перейдете к исполняемому коду.

enter image description here

Идеальный ответ :)
Serj Sagan - вы можете пропустить любой js-файл из списка отслеживания, открыв инструменты разработчика (f12), нажав f1 (настройки), щелкнув по элементу меню Blackboxing слева и введя имя файла, который вы хотите пропустить (например, jquery) .js). Тогда вы не будете прерваны невозможностью отследить код библиотеки javascript, который вас не волнует, и сможете сосредоточиться на том, что вы (или другой разработчик) написали и хотите диагностировать.
Это круто, но было бы неплохо иметь возможность пропустить jQuery и перейти к вашей функции. Я думаю, что в IE11 есть это, трудно поверить, что в IE есть функция, которая мне нужна, что в Chrome нет.
Это должно быть помечено как правильный ответ.
22

Источники & quot; Вкладка. Если вы ничего не видите, вам может потребоваться нажать «Показать навигатор». кнопка в левом верхнем углу этой вкладки. С открытым навигатором перейдите к файлу, в которомcut() функция определена (в вашем случае этоdemo.html). Когда вы открываете файл, найдите строку, гдеcut() Функция определяется, а затем установить точку останова на первой строке в этой функции. Вы можете установить точку останова, щелкнув номер строки с левой стороны.

После того, как вы установили свои точки останова, сделайте на странице что-нибудь, что вызоветcut() функция и браузер должен прервать выполнение скрипта, как только он войдет вcut() функция (при условии, что ваша точка останова находится на первой строке в пределахcut() функция). С этого момента вы можете использовать элементы управления в правом верхнем углу вкладки, чтобы вводить / выводить код и смотреть, что происходит.

Вот скриншот того, как я это делаю:http://d.pr/i/f6BO

Кроме того, вот отличное видео, в котором рассказывается об использовании инструментов Chrome Dev, включая настройку точек останова:http://www.youtube.com/watch?v=nOEw9iiopwI

Ссылка на ваш скриншот не работает.
Спасибо, установка точек останова вcut() и просмотр стека вызовов после запуска прекрасно работает. dangerChihuahua007
12

Это может быть достигнуто путем:

Go to Profiles Choose first option ('Collect JavaScript CPU Profile') Start it before pressing button 'Cut'
Потрясающий совет, чтобы увидеть, как вызывается JS, не зная имени функции.
Тогда что? Я нажал на флажок, но ничего не произошло. Можете ли вы сказать мне, что делать дальше?
2

Вы можете щелкнуть правой кнопкой мыши на элементе на вкладке элементов и использовать & apos; break on & apos; сломать, например, модификация подэлемента.https://developer.chrome.com/devtools/docs/javascript-debugging

Похожие вопросы