google-chrome-extension
Интеграция инструментов разработчика

Программная точка прерывания

Добавить инструкцию отладчика в сценарий содержимого

var foo = 1;
debugger;

foo = 2;

Откройте инструмент разработчика на веб-странице, где будет введен ваш сценарий содержимого, чтобы увидеть паузу выполнения кода в этих строках.

Отладка фоновой страницы / скрипта

Фоновый сценарий похож на любой другой код JavaScript. Вы можете отлаживать его, используя те же инструменты, которые вы отлаживаете другим JavaScript-кодом в Chrome.

Чтобы открыть инструменты разработчика Chrome, перейдите в chrome://extensions и включите режим разработчика :

Теперь вы можете отлаживать любое расширение, имеющее фоновую страницу или скрипт. Просто прокрутите список до расширения, которое вы хотите отладить, и нажмите ссылку на справочную страницу, чтобы проверить его.

Совет. Чтобы перезагрузить расширение, вы можете нажать F5 в окне инструментов разработчика. Вы можете поместить контрольные точки в код инициализации перед перезагрузкой.

Совет. Щелкнув правой кнопкой мыши по кнопке действия расширения и выбрав «Управление расширениями», вы откроете страницу chrome://extensions прокрученную до этого расширения.

Отладка всплывающего окна

У вас есть 2 способа отладки всплывающего окна. Оба способа - использование Chrome DevTools.

Вариант 1: щелкните правой кнопкой мыши кнопку действия расширения и выберите « Просмотр всплывающих окон»

Вариант 2. Откройте всплывающее окно непосредственно в браузере в виде вкладки.

Например, если ваш идентификатор расширения является abcdefghijkmnop , а ваш popup html-файл - popup.html . Перейдите по адресу и перейдите к:

chrome-extension://abcdefghijklmnop/popup.html

Теперь вы видите poup на обычной вкладке. И вы можете нажать F12, чтобы открыть инструменты разработчика.