Поиск определения функции JavaScript в Chrome DevTools
Быстрый ответ
Если вам требуется быстро найти место определения функции JavaScript в браузере Chrome, осуществите следующую последовательность действий:
- Запустите Инструменты разработчика Chrome, нажав комбинацию клавиш
Ctrl+Shift+I
(для Windows/Linux) илиCmd+Opt+I
(для Mac). - Переключитесь на вкладку Sources (Исходники).
- Инициируйте глобальный поиск — воспользуйтесь комбинацией
Ctrl+Shift+F
(для Windows/Linux) илиCmd+Shift+F
(для Mac), и введите имя нужной функции. - Нажимайте на результаты поиска для того, чтобы прямо переместиться к нужному фрагменту кода.
Тогда как если функция уже в работе:
- Кликните правой кнопкой мыши по вызову функции в окне Инструментов разработчика.
- Выберите Go to function definition (Перейти к определению функции), и вы автоматически переместитесь к объявлению этой функции в исходном коде.
Допустим, нам нужно отыскать функцию myFunction
:
// Разгадаем эту загадку, Шерлок!
myFunction();
Просто кликните правой кнопкой мыши на myFunction
, выберите Go to function definition (Перейти к определению функции), и то, что вы искали, появится перед вами.
Расширенный поиск функций с использованием регулярных выражений
Если вы столкнулись с ситуацией, когда имя функции слишком общее или перед вами анонимная функция, вашим подспорьем могут стать регулярные выражения для детального поиска:
- Поднимите настройки Инструментов разработчика Chrome через
Ctrl/Cmd + Shift + I
. - Перейдите на вкладке проекта в раздел Sources (Исходники) и откройте окно поиска —
Ctrl/Cmd + Shift + F
. - Отметьте пункт Use regular expression (Использовать регулярное выражение).
- Введите необходимый паттерн регулярного выражения: для поиска конкретных именованных функций используйте
/function\s+myFunction\s*\(/
или для анонимных функций —/function\s*\(/
. - Пролистайте результаты поиска и кликните по ним, чтобы осмотреть контекст кода.
Кроме того, возможным будет вызвать список всех функций в документе с помощью Ctrl/Cmd + Shift + O
, вводя часть имени функции.
Визуализация
Вот наглядное пособие того, как можно отследить до определения функции JavaScript:
- Проактивируйте Инструменты разработчика, использовав
F12
илиCtrl/Cmd + Shift + I
. - В разделе 'Sources (Исходники)' поставьте брейкпойнт в предполагаемых местах активации функции.
- Запустите ваше приложение или начните взаимодействие с сайтом, чтобы функция стала активной.
- Когда брейкпойнт сработает, используйте стек вызовов для просмотра пути выполнения функции.
- Кликните по названию функции в списке текущих вызовов, чтобы перейти к её коду.
Миссия выполнена! Теперь вы имеете полное понимание функции, её логики и поведения.
🕵️💡: Отличная работа, детектив!
Инструменты консоли и инспектирование объектов
Инструменты консоли значительно облегчают процесс поиска функций. Введите имя объекта в консоли, добавьте точку, и Chrome предложит список связанных методов. Выберите соответствующий метод, и Chrome моментально отобразит его определение.
Для встроенных функций браузера или функций из расширений вместо определения может выводиться [native code]
, что означает, что мы не можем просмотреть исходный код этой функции.
Если функция вызывается как метод объекта, использование полного имени функции в консоли выдаст ссылку, по которой можно перейти к определению функции.
Завершение
Трудности с поиском определения функции или работа с минифицированными скриптами могут быть легко решены – просто коснитесь кнопки Format code (Форматировать код) {}
во вкладке "Sources (Исходники)". Это сделает код намного понятнее.
Разработчики также имеют возможность создавать пользовательские функции консоли для вывода упорядоченного списка названий функций вместе с перечислением их областей видимости, что значительно улучшает управление и контроль над функциональностью.
Полезные сочетания клавиш и таблица действий
Эффективная навигация требует знания сочетаний клавиш, которыми вы можете воспользоваться в качестве алгоритма действий:
Действие | Сочетание клавиш | Платформа |
---|---|---|
Открытие Инструментов разработчика | Ctrl+Shift+I / Cmd+Opt+I | Все |
Глобальный поиск в коде | Ctrl+Shift+F / Cmd+Shift+F | Все |
Быстрый переход к функции | Ctrl+Shift+O / Cmd+Shift+O | Все |
Контекстный поиск | Клик правой кнопкой мыши | Все |
Помните: освоение горячих клавиш увеличивает скорость работы в десятки раз!
Полезные материалы
- Инструменты разработчика Chrome | Chrome для разработчиков – незаменимый набор инструментов для каждого специалиста в области JavaScript, стремящегося совершенствовать свои навыки в отладке и оптимизации кода.
- Отладка JavaScript | Инструменты разработчика | Chrome для разработчиков – официальное руководство по отладке JavaScript с использованием Инструментов разработчика Chrome.
- Приостановка вашего кода с помощью точек останова | Инструменты разработчика | Chrome для разработчиков – станьте профессионалом в остановке выполнения кода с использованием брейкпойнтов для удобного исправления ошибок в JavaScript.
- Максимальное использование JS console.log – ценные советы по улучшению навыков логирования и превращению консоли в вашего надежного союзника в отладке.
- Отладка приложений Node.js с использованием Visual Studio Code – если вам больше нравятся среды разработки, то здесь вы найдете полное руководство по отладке JavaScript в Visual Studio Code.