Как узнать, какие функции вызывается при нажатии кнопки в консоли Chrome?

Я пытаюсь научить себя javascript-библиотеке Google Closure. Я изучаю виджет TreeControl UI.

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

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

Ответы

Ответ 1

В открывшемся окне Chrome Developer Tools откройте вкладку "Источники". Если вы ничего не видите, вам может понадобиться щелкнуть по кнопке "Показать навигатор" в верхнем левом углу этой вкладки. Открыв навигатор, перейдите к файлу, в котором определена функция cut() (в вашем случае это demo.html). Когда вы введете файл в поле зрения, найдите строку, где определена функция cut(), а затем установите точку останова в первой строке внутри этой функции. Вы можете установить точку останова, щелкнув номер строки с левой стороны.

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

Вот скриншот, сделанный мной: http://d.pr/i/f6BO

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

Ответ 2

Вы можете найти раздел "Точки останова слушателя" в правой части области отладчика. Откройте это и выберите событие click под "mouse". См. Изображение на экране. Затем нажмите кнопку в приложении, и вы сразу же перейдете к выполняемому коду.

enter image description here

Ответ 3

То, что вы ищете, называется "Профилирование".

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

  • Перейдите в раздел Профили
  • Выберите первый вариант ( "Собрать профиль процессора JavaScript" )
  • Запустите его перед нажатием кнопки "Вырезать"

Ответ 4

Это может быть полезно для некоторых людей:

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