Chrome DevTools ищет все файлы javascript на веб-сайте

Я работаю над новым клиентским сайтом, который загружает Javascript из CDN, поэтому Javascript не встроен или не встроен в источник веб-страницы. Я хотел бы сделать паузу каждый раз getCurrentPosition() выполняется, чтобы определить, в какой внешний файл JS он содержится.

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

Должен ли я пытаться создать выражение для часов или есть другой способ установить, когда и где запускается определенная функция JS?

Ответы

Ответ 1

Вы можете искать во всех файлах с помощью Chrome DevTools. Найдите свою функцию и отлаживайте ее:

  • Открыть DevTools (F12)
  • Перейдите на вкладку источников
  • Откройте "Искать все файлы", нажав ctrl + shift + f (Win) или cmd + option + f (Mac)
  • Поиск getCurrentPosition
  • Поместите точку останова (щелкнув номер строки слева от строки)

введите описание изображения здесь

Ответ 2

  • Откройте инструменты Google Dev (F12)
  • Нажмите Ctrl + p

В открывшемся окне найдите все файлы (JS, CSS,...).

искать все файлы в javascript

В поле у ​​вас есть 5 вариантов:

введите описание изображения здесь

  • Введите "имя файла" и выберите его.
  • Введите ': linenumber', чтобы перейти к определенному номеру строки (': 10' перейти к строке 10).

  • Введите '@symbol', чтобы перейти к определенному символу ('@TestSymbol' перейдите к символу TestSymbol).

    В этом случае, если вы пишете @JSFunctionName или @CSSClassName, тогда курсор будет перемещаться к имени JSFunctionName или CSSClassName.

  • Введите "! snippet", чтобы перейти к определенному фрагменту ( "! snippetTest" перейти к фрагменту фрагмента фрагмента).

  • Введите ' > googleCommand', чтобы перейти к определенной команде (' > Очистить консоль', очистите консоль).

Для использования параметров 2-5 выберите файл.

Ответ 3

Одним из способов было бы заменить метод Geolocation.getCurrentPosition на функцию-оболочку, чтобы вы могли установить в ней точку останова, а затем изучить стек, чтобы узнать, кто его вызывает.

Ответ 4

Если вы знаете, где в коде вызывается метод, вы можете установить контрольные точки. Это приостановит выполнение javascript во время выполнения и позволит получить трассировку стека.

Ответ 5

Вы можете найти всю необходимую информацию на веб-странице: https://developer.chrome.com/devtools/docs/javascript-debugging

введите описание изображения здесь

Просто поместив его (скопированный с веб-страницы)

Откройте сайт, например, демонстрационную страницу hovercard Google Closure или TodoMVC

  • Откройте сайт, например демонстрационную страницу hovercard Google Closure или приложение TodoMVC Angular

  • Откройте окно DevTools.

  • Если он еще не выбран, выберите "Источники".

Отладка с точками останова

Точка останова - это намеренное место остановки или паузы в script. Используйте контрольные точки в DevTools для отладки кода JavaScript, обновлений DOM и сетевых вызовов.

Добавить и удалить контрольные точки На панели "Источники" откройте файл JavaScript для отладки. В приведенном ниже примере мы отлаживаем файл todoCtrl.js из версии TodoMVC версии AngularJS.

Щелкните по канавке линии, чтобы установить точку останова для этой строки кода. Синяя метка указывает, была ли установлена ​​точка останова:

введите описание изображения здесь

С помощью приведенного выше простого примера вы можете "остановить" функцию getCurrentPosition() и отладить ее.