Debug popup.html расширения Chrome?

Я делаю расширение Chrome и должен просматривать HTML/CSS/JS popup.html.

Я не могу щелкнуть правой кнопкой мыши для проверки элементов. Есть ли другой способ? Мне нужно убедиться, что CSS и JavaScript вставлены правильно. Как отладить проблему в этом всплывающем файле?

Ответы

Ответ 1

Щелкните правой кнопкой мыши кнопку расширения, затем "Осмотреть всплывающее окно"

Ответ 2

Проверить всплывающее окно с последней сборкой.

Вот как я отлаживаю всплывающие окна Chrome Extension.

  • Нажмите кнопку всплывающего окна, чтобы просмотреть веб-страницу (само всплывающее окно).
  • Щелкните правой кнопкой мыши в окне и выберите элемент "Проверить"
  • Окно Chrome Debugger содержит правильный контекст, но вы уже пропустили свои точки останова и debugger.
  • ЗДЕСЬ ТРИК. Нажмите на консольную часть отладчика и введите: location.reload(true) и нажмите клавишу ввода.

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

Ответ 3

Возможно, другим способом может быть поиск ID: для вашего приложения в chrome://chrome/extensions/

Затем вы можете загрузить свое всплывающее окно в обычном окне

chrome-extension://id_of_your_application/popup.html

Exchange popup.html для файла, указанного в manifest.json в свойстве default_popup.

Ответ 4

Да, "Inspect Popup" на значке расширения, и кроме этого - из диспетчера расширений вы также можете просмотреть страницу параметров.