大家好，今天小编来为大家解答谷歌浏览器source这个问题，谷歌浏览器source调试js,不显示变量的值很多人还不知道，现在让我们一起来看看吧！

本文目录

1. 谷歌浏览器必装的插件
2. 打开chrome浏览器开发者工具的方式
3. 谷歌浏览器怎么安装json视图插件

一、谷歌浏览器必装的插件

1、今天给大家介绍几个非常非常实用功能却非常强大的谷歌浏览器插件,会让你的工作效率提高很多很多,无论你是开发外贸B端客户还是找Youtube,Instagram红人。

2、安装插件都是在谷歌的应用商店上,链接地址为

3、 

4、第一,Seoquake插件,做SEO的一款神器并且是免费的,功能非常非常强大

5、短链地址：

6、Seoquake插件功能是我最经常用的,功能非常非常强大,能抓取很多维度的数据，提供关键的SEO指标，以及其他有用的工具，如SEO审计和其他

7、★全面分析SERP并以CSV格式导出结果

8、★对网页进行完整的SEO审核，包括检查移动兼容性

9、★检查您的Facebook和Google的社交统计数据

10、★使用各种默认参数或创建自定义设置

11、★确定关键字的密度并配置停用词列表

12、安装Seoquake插件之后,你在谷歌上搜索就会出现以下上文提到的主要关键指标,请查看下图红色方框,有排名,sermush外链,这个网站的display ads,whois等，安装之后可以都点击看看。

13、其实我最常用的就是左侧栏Export CSV按钮,就是可以把你搜索的结果批量以Excel的表格都导出去,这样真的非常非常节省时间,省去一个个去点击网站你在开发外贸客户或者查找红人信息时。

14、比如我要找做过手机开箱测评的youtube红人,就在搜索框输入以下内容，site的指令意思site之前的搜索结果会出现site之后的域名网址中

15、smartphone review site:youtube.com

16、可以在search setting那里把每页的搜索结果显示为100条,这样就可以一下子导出10条搜索内容

17、也可以点下Advanced search(高级搜索)，加上一些国家,时间,语言,filetype等一些限定词,当然也可以加是精准搜索还是泛搜,我们就先以最简单搜索来看下怎么把搜索结果导出去。

18、我们点击左侧栏Export CSV按钮,导出来就是在youtube上做过手机开箱测评的红人视频链接,如下图所示：

19、看起来比较乱七八糟的,用Excel表的数据分列把红色方框的内容都分列出去,可以看到前面都是双引号,就以双引号作为分列字符。

20、点击数据按钮--分列按钮，如下图所示：

21、可以看到下面已经分列出去啦,是很规整的数据

22、然后点击完成,就会出现上面的Excel表格,可以看到都是很规整的链接,不是乱七八糟的,然后复制这些链接打开去找对应youtube红人的信息，比如打开第一条链接的视频就是下面这个youtube红人做的测评，可以去他的About信息栏那里看看有无留下联系信息

23、这里还有一点需要注意的是如果你在谷歌搜索开发外贸B2B客户,不设置site指令,那搜出来的域名就会出现很多并不是以.com结尾的,有的还有可能是co.uk,cn等等,除了用分列的方法之前还有一种方法,就是快速删掉域名后面的内容，

24、比如我要搜海外智能手表的供应商或者经销商,输入以下内容

25、smartwatch supplier or distributor

26、需要注意的是我这里主要是演示如何使用Seoquake插件工具,真用谷歌搜索开发外贸客户,要加很多的限定词以及排除国内的供应商,以后会专门讲如何使用谷歌搜索开发外贸客户。

27、下面就是导出来的结果,感觉更混乱对不对,接下来告诉大家如果快速删掉域名后面的内容,其实很简单的,直接是CTRL F，然后点击替换

28、并在方框中输入以下内容,点击“全部替换”就把域名后面的内容去掉了

29、还有一些域名不是.com结尾的，操作方法都是一样的,直接是CTRL F然后全部替换,比如还有很多co.uk区域结尾的,就在方框内输入，就可以把域名后面的内容去掉了。

30、现在一下子导出来100个关于智能手表的供应商,你可以安装这种方法把谷歌的第二页,第三页,第十页的搜索结果都导出来,这样就有1000个关于智能手表的供应商,然后删除重复项,去批量开发这些网站的客户，这样效率就大大提高了。

31、关于批量开发这些导出来的域名方法,有很多方法,有工具可以根据批量输入的域名抓取邮箱,也可以用一些插件去批量导出来,就是我们接下来要说到的hunter插件。

32、需要注意的是比如谷歌搜索结果显示几十万条,我们也只能看到前1000条的数据,后面的都是看不到的。

33、第二, hunter插件,查找客户网站邮箱神器

34、Hunter也是经常使用的一个插件,也是非常方便功能很强大,是找客户网站邮箱的一款神器。插件短链：

35、如果知道客户网站,除了在客户网站about或者contact us网站上那里去看联系方式,还可以直接用hunter插件,只需要打开客户网站,点击一下hunter插件,就会自动抓取邮箱,以下图为例

36、一般邮箱后面带绿色圆圈的标志，就是已经verfied的邮箱,可信度还是挺高的。

37、点击后面的source按钮,还可以看到在哪些网页上抓取的,可以点击下试试

38、也可以打开hunter网页,域名输入只能查询邮箱,如下图所示，可以根据需要的保存对应的邮箱。

39、另外hunter除了根据域名查找邮箱,也可以验证邮箱是否准确性以及批量导入域名或者邮箱去验证

40、点击Verfier按钮,就输入刚刚找到的邮箱试下,得出以下的验证结果是有效的。

41、还有批量验证验证邮箱以及批量获取邮箱,需要注意的是hunter每个月有100次的免费机会,超过就要付费的,不过每个月100次对于大部分人都是可以满足需求的。

42、好了今天先写到这里吧,下文继续介绍平时经常用的一些很强大的谷歌插件工具。（来源：下班后8小时）

43、以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。

二、打开chrome浏览器开发者工具的方式

1、Chrome提供的一些调试功能，在排查代码故障时非常有帮助。事实上，由于谷歌浏览器提供的调试工具太多，很多都被隐藏了起来，等待你去探索。

2、声明：本文已获作者Ferenc Almasi翻译授权。

3、Chrome DevTools（开发者工具）团队每月（

4、 ）都会在他们的网站上发布更新，你也可以在他们的官方 Twitter账户（

5、 ）上找到一些很棒的提示。如果你想了解更多关于 Chrome提供的工具的信息，我强烈推荐查看这两个信息来源。

6、在这篇文章中，我收集了 10个我经常使用但是别人可能不知道的功能。它们帮助我简化了工作流程，可以在更短的时间内完成更多的工作。

7、这里先从在控制台中保持日志说起。假设在重新加载页面之前或导航发生时出现了问题，你会尝试登录控制台，但所有内容都被清除了。解决方法很简单，但我很久以前就不知道了：

8、通常，当用户交互发生时会出现问题。捕捉这些事件来检查在交互中运行的位置和内容非常有帮助。幸运的是，我们可以通过访问 Sources选项卡，用 Ctrl P打开一个 js文件，并检查其中的相关事件：

9、对于 DOM操作也可以添加断点。通常可以断点在某节点接收到属性更改上，例如添加了某个 class。在一个大型代码仓库中搜索相关代码将耗费大量时间，其实你可以简单地为元素添加一个断点，然后剩下的交给 DevTools处理。

10、有时候我们对代码进行性能优化，会导致很多代码没有用了但是还没及时清除。在覆盖工具的帮助下，你可以分析资源并查看哪些行没有执行。如果你关注的不是所有交互，只执行你所关注的交互操作有助于你获取准确的覆盖率。你可以点击 Ctrl Shift P打开工具面板，然后点击重新加载图标开始记录，所有以红色显示的内容都不会被执行。

11、不必要的重绘也会导致性能问题。假设你的页面上有一个倒计时，每次更新都会导致整个页面重新绘制。你可以通过在 Render选项卡中启用 paint flashing来解决这些问题，并查看哪些元素触发了这些问题。

12、同样，Ctrl Shift P会弹出工具栏。

13、在 Rendering选项卡上启用重新绘制

14、既然上面讨论了渲染，那么让我们来看看如何调试 CSS动画。用 Ctrl Shift P打开工具菜单，输入“ animation”它将为你打开动画标签，这将记录任何发生在网站上的动画。你可以重播它们，看看它们的宽松程度，然后根据时间或持续时间调整：

15、我们经常需要与其他人分享截图来验证更改。如果你不得不重复多个步骤，这个任务可能会消耗时间：

16、这可以在 DevTools内部完成。你可以从整个页面、单个节点(被选中的节点)或视图中创建图像：

17、假设你正在调试一个问题，并且你的代码中有两个断点。你正在进行堆栈跟踪，你会发现堆栈信息中大多数来自核心框架文件，如 React或 jQuery。为了避免在调试器中包含这些核心文件，你可以对它们进行黑盒处理，这意味着 DevTools将跳过这些文件，以便你可以专注于自己的代码。

18、本地覆盖是我最喜欢的一个，我发现自己使用它越来越频繁。它是一个强大的工具，使你能够加载生产文件的本地副本，并使用它们来替代捆绑的副本。当一个问题只发生在特定的环境中而不能在本地复现时，这一点尤其有用。

19、你可以在“Source”选项卡下启用 Overrides（重写）。如果你没有看到 Overrides链接，点击 Page右侧的锯齿图标。你可以将漂亮的打印文件复制到你本地文件并对其进行扩展。重写将通过页面重新加载保持。

20、我发现自己一直在使用 Lighthouse面板，这是为了审计你的网站在各种指标：性能，PWA，可访问性，或搜索引擎优化。你还可以选择审计不同的设备以及模拟网络连接，它为你提供了哪些可以改进以及如何改进的参考。你可以在“Audits”选项卡下进入“灯塔”，如果你没有看到标签，只需点击锯齿符号来显示隐藏的标签。

21、生成报告后，可以将结果保存为 JSON文件，稍后导入以进行比较。

22、上面是必须知道的 10个 Chrome开发工具特性，它们帮助我简化了工作流程，并且在更短的时间内完成了更多的工作。

23、你每天使用的 Chrome开发者工具的功能是什么?请在评论中告诉我们。

24、 

25、作者简介：Ferenc Almasi，匈牙利前端开发者，热衷于开发和设计新的交互式应用程序。他还喜欢尝试新技术，创造简单而有吸引力的东西。

26、译者：明明如月，知名互联网公司 Java高级开发工程师，CSDN博客专家。

三、谷歌浏览器怎么安装json视图插件

如今很多开发者在前后台分离情况下都用json数据交互信息，开发者通常用浏览器访问api显示json数据，但是通常默认情况下json在浏览器上的可读性较差。此教程插件可以让开发者提高开发效率。

2、打开谷歌浏览器的左上角菜单键--更多工具--扩展程序。就会到扩展程序界面

3、然后把下载好的插件，直接拖拽到扩展程序界面，会提示安装插件，安装成功后点击启用插件，如图：

4、启用插件后，我们的插件会自动检查当前显示的数据是否是json，我们可以对比下，下面的第一张图是没有插件的显示情况，第二张图是有插件的显示效果。

5、如果大家在用了插件后，有的时候想看下普通视图，大家点击页面右上角的viewsource就可以查看没用插件的结果视图了，我相信这个插件能给很多开发者溢处，主要能提高工作效率啊！

好了，文章到此结束，希望可以帮助到大家。