google-chrome-extension
Отладка расширений Chrome

Использование инструментов разработчика для отладки вашего расширения

Хром-удлинение разделено на максимум 4 части:

• справочная страница
• всплывающая страница
• один или несколько сценариев контента
• страница параметров

Каждая часть, так как они врожденно раздельны, требует отдельной отладки.

Имейте в виду, что эти страницы являются отдельными, что означает, что переменные напрямую не разделяются между ними и что console.log() на одной из этих страниц не будет отображаться в журналах любой другой части.

Использование chrome devtools:

Расширения Chrome отлаживаются аналогично другим веб-страницам и веб-страницам. Отладка чаще всего выполняется с помощью инспектора devmools chrome, открытого с помощью сочетания клавиш для окон и macs соответственно: ctrl + shift + i и cmd + shift + i или щелкнув правой кнопкой мыши на странице и выбрав проверку.

От инспектора разработчик может проверять элементы html и как влияет на них css или использовать консоль для проверки значений переменных javascript и считывания выходов любого из установленных console.log() разработчиков.

Более подробную информацию об использовании инспектора можно найти в Chrome Devtools .

Проверка всплывающего окна, страницы параметров и других страниц, доступных с помощью chrome: //.....yourExtensionId.../:

На всплывающую страницу и страницу параметров можно получить доступ, просто просмотрев их, когда они открыты.

Дополнительные html-страницы, которые являются частью расширения, но не являются ни всплывающей, ни страницей параметров, также отлаживаются одинаково.

Проверка фоновой страницы:

Чтобы получить доступ к исходной странице, вы должны сначала перейти на страницу расширения chrome: chrome: // extensions / . Убедитесь, что флажок « Режим разработчика» включен.

Затем нажмите на свой фоновый скрипт рядом с надписью «Inspect views», чтобы проверить свою фоновую страницу.

Проверка скриптов содержимого:

Скрипты контента запускаются вдоль сайтов, в которые они были вставлены. Вы можете проверить сценарий содержимого, предварительно проверив веб-сайт, на котором вставлен скрипт содержимого. В консоли вы сможете просмотреть любой console.log() s, выведенный вашим расширением, но вы не сможете изменять или проверять переменные сценария содержимого.

Чтобы исправить это, вы должны щелкнуть по выпадающему списку, который обычно устанавливается на 'top' и выберите расширение из списка расширений.

Оттуда у вас будет доступ к переменным в вашем расширении.