Отладка

Информация о расширении

Отлаживать будем расширение Hello World, описанное в быстром старте. Создайте и подключите его к браузеру, не забудьте на странице chrome://extensions включить “Режим разработчика”. Там же можно узнать идентификатор расширения. Выглядит он примерно так: ID: maihdofgpghpnnjniclajfepbgdhabpg.

Исследуем всплывающее окно

Для этого кликаем правой клавишей мыши по иконке расширения и выбираем пункт “Просмотреть всплывающее окно”. Если вы уже отлаживали скрипты с помощью встроенных в Chrome инструментов разработчика, то открывшееся окно вас не удивит. Все привычные возможности присутствуют.

Теперь справа вверху жмем кнопку - внизу откроется консоль для ввода команд. Теперь в ваших скриптах можно расставить точки останова и командой location.reload(true) перезагрузить всплывающее окно – это позволит проследить всю логику работы хоть с самой первой строчки.

Справа можно наблюдать локальные переменные и управлять процессом выполнения.

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

Подсказка – доступ к фоновой странице можно получить (открыть ее в режиме отладки) на странице chrome://extensions, а все остальные возможности (омнибокс, меню) инициализируются с нее. Также можно добраться до любой страницы расширения через его id: chrome-extensions://id/имяфайла, после чего этот файл можно открыть в отладчике через контекстное меню.

Очень полезно внимательно просмотреть вот это видео: