Как отлаживать расширение Firefox
![](/static/storage/9401074537659036433450634635305751850.png)
Firefox поддерживает расширения браузера, такие как браузеры на основе Chromium (Chrome, Arc, Brave, Edge и т. д.). Иногда их называют надстройками в стране Firefox.
В этом посте предполагается, что вы отлаживаете расширение браузера, которое создаете, то есть имеете исходный код и можете собрать его локально.
Также предполагается, что надстройка Firefox была собрана, т. е. сгенерирована файлы, включая манифест для работы надстройки.
Следующие инструкции работают для Firefox и Firefox Deveoper Edition.
Настройте Firefox для отладки надстройки
1.Откройте браузер DevTools и нажмите кнопку с тремя точками, затем выберите настройки.
![](/static/storage/279478838481669355120620118805675529755.png)
2. Прокрутите вниз до раздела «Дополнительные параметры» и убедитесь, что установлен флажок «Включить инструменты отладки браузера Chrome и дополнений».
![](/static/storage/145014504801773837925167065053751209366.png)
3. Загрузите дополнение, нажав на значок головоломки в правом верхнем углу Firefox или через меню приложения, Инструменты => Дополнения и темы.
![](/static/storage/301567204449789291148366338121608064674.png)
![](/static/storage/138724157044467786229279486260577063703.png)
4. Щелкните значок шестеренки, чтобы открыть меню, и выберите «Отладка надстроек».
![](/static/storage/271344878731095183319602026430730499795.png)
5. Убедитесь, что вы создали расширение с изменениями в моей ветке, запустив npm run build
6. Нажмите кнопку Загрузить временную надстройку...
![](/static/storage/238303166918459821356450982407676858607.png)
7. Выберите файл манифеста надстройки в меню файлов ОС и нажмите кнопку «Открыть».
![](/static/storage/274537832042937237077323946865269742266.png)
8. Теперь расширение готово к использованию.
![](/static/storage/6259712115391696104190045984154168357.png)
9. Перейдите на страницу, где вы используете свое расширение.
10. Если вы хотите отладить или проверить расширение, нажмите кнопку «Проверить» в разделе «Временные расширения», где расширение было только что загружено.
![](/static/storage/10267182296090051717539613998935048940.jpg)
11. Теперь у вас есть доступ ко всем тем же инструментам разработки браузера, к которым вы привыкли для отладки веб-сайта, например, Inspect Element, инспектору стилей CSS, отладчику JavaScript и т. д.
Вот и все!