谷歌开发者工具是前端日常不可缺少的神奇，写布局，找 bug，优化加载速度统统靠他。但是你真的了解他么？这篇文章是专门介绍谷歌浏览器各种好用小技巧的。不是什么长篇大论，旨在提高你的开发效率，早日完工回家陪女朋友。

应该了解的快捷键

另外一个小知识就是设置搜索引擎了，直接在地址栏中输入内容搜索内容。我用的 Bing 的搜索引擎：

设置方式也很简单：打开设置 -> 搜索引擎 -> 切换想要搜索引擎

Elements 中的的常用技巧

每次选一个元素先去右上角点一下鼠标选元素状态，在我这里不存在的。直接快捷键 CTRL + SHIFT + C 选中你想要的元素

鼠标经过的样式并不会直接在 Stylus 上显示出来，需要鼠标移入才会出来。这样就没办法修改样式。这里就需要俩个技巧了

1.单击上图中的 :hov 按钮会出来 force element state。然后打钩就可以了。

2. 直接在 Elements 中右键选择 Force state 也是可以的。

console 直接提供了命令行运行 js 的条件，强大的提示功能，想不起来哪个单词怎么写了直接命令行输入就会出来一片一片的提示。想看某个对象的方法比起你去百度要快多了。必备技能啊

上图中展示了字符串中的方法

这个有一个妙用，比如说改标签的内容，你直接在 Elements 里面改非常不方便，但是你如果只把你需要的一部分拿出来改是不是就很爽了呢。

这个是我日常工作中使用频率最高的，像数据不对后台要请求报文，查看数据格式，看代码加载时间等等。

上图中的分类能够最简单的将请求进行分类，XHR 就是前后端之间的请求了，属于重度使用对象。其他的还有看 CSS, JS，Img 等等。

要在高级一些就是 filter 了支持内容过滤，请求头过滤。

Preserve log 了解一下。勾上了他不管你怎么刷新页面，里面的记录都不会消失了。

还是上图，Preserve log 旁边有个 Disable cache 选中它就能够不缓存请求数据了。当然这还远远不够，因为有时候你还需要清除 session，cookiey等等缓存。

在打开控制台的情况下，右键刷新按钮有个清空缓存并硬性重新加载的选项，它能够还你一个初次打开的页面哦。

从图中可以看到这是一个专门看各种缓存的地方。想知道自己的缓存存储的情况，甚至修改缓存值调试代码，这里都要方便的多

Source 是专门放资源的地方，在这里可以看到整个页面都用到了哪些资源

点一下这个大括号瞬间以你能读的格式展示出来。从此再也不用复制粘贴到编辑器里面格式化了。

console 打印局部变量，查看代码执行顺序其实还是蛮好用的。但是放到循环循环语句里面给你打印出来你能理解的了么？因此打断点就很重要了。name如何打断点呢？这里有俩种方法：

1. 代码中加入 debugger。打开控制台代码执行到这里的时候自然就会进入断点模式，不打开控制台是不会进来的。

找到你要打断点的那一行，在左边行号这一点就打上断点了，很简单。甚至可以设置条件断点：

右键这个小箭头可以看到有个 Edit breakpoint 。就可以给断点设置进入条件。比如 i=5 。就代表 i = 5 的时候才会进入断点。

文中涉及的内容都是比较常用的，没有列举很多感觉比较牛逼。但是实际操作的时候却很少用的功能，如果想了解的更多更全面可以查看谷歌开发者工具的中文翻译文档：https://www.html.cn/doc/chrome-devtools/

如果你想了解更多的骚技巧可以看这俩篇文章：