这是我参与「掘金日新计划 · 2 月更文挑战」的第 2 天，点击查看活动详情”

前言

在杭州某公司实习的时候，当时候要开发浏览器插件，实习导师让我在公司原有浏览器插件的基础上去迭代相关的功能。在那之前没有参与过浏览器插件的开发，当时候花了一些时间在浏览器插件开发上。不得不说，官方文档很多时候是最好的学习资料，无论百度还是谷歌，搜索半天，到头来可能会发现在官方文档已经写得明明白白了。所以从那之后遇到问题首先想到的是我能不能在官方文档上找到答案。今天主要分享的是浏览器插件如何去调试。在开发插件的过程中笔者遇到了一些bug，所以就试着去调试，插件的调试和js、vue、react等调试方式有所不同。以下是笔者调试的方式。

浏览器插件的组成部分

接下来我们简略了解一下浏览器插件的核心组成三大部分，详细内容可以参考谷歌插件开发文档。

背景页面（background page）:用来执行应用（扩展）的主要功能

popup:一个browser action可以包含一个弹窗(popup)，而弹窗就是用html页面实现的

Content scripts:如果一个应用（扩展）需要与web页面交互，那么就需要使用一个content script

如何调试

接下来我们来看看如何调试这三个模块。

background

如下图所示，以谷歌浏览器为例，首先在浏览器里面打开插件那一模块

然后点击background.html（谷歌插件v2版本），v3版本对应的是service worker，就可以调试background.js部分了

popup

还是以谷歌浏览器为例，如下图所示，点击审查弹出内容，就可以调试popup部分

Content scripts

最后来说下如何调试Content scripts，如下图所示，点击F12在浏览器源代码里面，点击内容脚本，然后就可以看到调试Content scripts

最后

以上是笔者在开发插件过程中自己个人的调试方法以及总结，如果不足欢迎评论区讨论。热爱可抵岁月漫长，日拱一卒，坚持不懈。