各位老铁们好，相信很多人对谷歌浏览器的source使用都不是特别的了解，因此呢，今天就来为大家分享下关于谷歌浏览器的source使用以及chrome source的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

本文目录

1. 打开chrome浏览器开发者工具的方式
2. 谷歌浏览器必装的插件
3. 谷歌浏览器video自动播放无效解决方法

一、打开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博客专家。

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

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、以上内容属作者个人观点，不代表雨果网立场！本文经原作者授权转载，转载需经原作者授权同意。

三、谷歌浏览器video自动播放无效解决方法

1、方案一从360软件管家中下载360急速浏览器，或者火狐等非IE内核浏览器尝试方案二设置默认浏览器如果IE浏览器无法正常使用可以尝试使用360极速等非IE内核的浏览器尝试并且将其设置为默认浏览器1打开360安全卫士，点；具体两种解决方法如下第一种1，Videojs是一个通用的在网页上嵌入视频播放器的 JS库，Videojs自动检测浏览器对 HTML5的支持情况，2，如果不支持 HTML5则自动使用 Flash播放器第二种1，通过使用原生的；1首先，我们将vedio标记ltvideo lt video添加到页面，然后向其添加内容2，必须添加视频路径，添加视频，ltsource src=“”，这样的视频介绍在这里，我们需要定义视频的格式 TYPE=“视频 MP4”3，默认情况；这是chrome的规定，其他浏览器也会跟进的解决办法就是音频静音，引导用户点击播放声音如果没有这个规则，打开音视频站自动播放自然很爽，打开普通站立刻来点音频广告就很不爽了；目前除了微信内置浏览器，其他的移动端浏览器只能让用户触发事件去播放video如点击播放按钮或者监听document的触摸事件；interact with the document first的报错这是因为浏览器限制了，video标签非事件的自动播放不过，video标签可以设置autoplay属性不过，当手动刷新页面后发现自动播放，仍然失效了于是，就需要通过js模拟点击事件去播放。

2、HTML5 video是影片标签，可以在浏览器中很容易的插入影片，还能够设定影片长宽增加影片播放控制列是否自动播放是否自动重覆播放等功能，虽然使用HTML5 video影片标签来播放影片相当的容易，但现阶段要考虑浏览器的支援；那么这些预加载网页在哪里取消，谷歌浏览器怎么关闭预加载网页，为此本篇介绍以下方法1首先在联想电脑，win7系统中，打开谷歌浏览器1023版本2在谷歌浏览器页面，点击右上角的三个点3在选项窗口，点击设置。

3、更换成videojs插件一直提示无法找到视频文件正确路径，无法播放原因在于视频播放需要在DOM加载完毕，并且获取到后端返回的视频播放地址之后才可以正确播放video，英语单词，主要用作名词形容词动词，作名词时意为视频，录。

4、video tag你到网上找个ogg视频文件，用播放器放一下，确认视频没问题，再试下，如果还不行，就是浏览器的版本问题了。

5、谷歌浏览器对百度影音的插件支持不好，我的chrome查看网页的时候侧边的长度条经常看不见，chrome用的是非IE的内核，有些插件和网页是兼容不好的，但是我还是喜欢用chrome；Adobe Flash Player等插件通常并没有统一的标准，且无法像标签页般沙盒化这些通常需要执行在浏览器本身的安全等级或更高的等级为了降低被攻击的风险，插件是在与不同的处理程序中被执行以上内容参考百度百科Google。

6、因为谷歌浏览器本身就不支持自动播放，所以每次打开就会提示不支持自动播放谷歌认为自动播放会打扰用户，避免出现第一次打开陌生网站被声音吓到的尴尬情况Google Chrome是一款由Google公司开发的网页浏览器，该浏览器基于其他开；文件 MPEG4=带有 H264视频编码和 AAC音频编码的 MPEG 4文件 WebM=带有 VP8视频编码和 Vorbis音频编码的 WebM文件因此，你使用的chrome浏览器不支持你所播放的视频编码，而ie则支持就会出现这种情况；最新谷歌浏览器需要先使用静音才能自动播放如果播放不需要声音，可以设置静音属性，然后有自动播放属性就可以自动播放了如果还是需要声音，可以在播放后设置属性值取消静音。

好了，文章到这里就结束啦，如果本次分享的谷歌浏览器的source使用和chrome source问题对您有所帮助，还望关注下本站哦！