谷歌开发者工具，这些技巧你用过么？

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

应该了解的快捷键

1. 放大内容 CTRL + +
2. 缩小内容 CTRL + -
3. 回到正常大小 CTRL + 0
4. 标签页切换 CTRL + 1~9 (1~9 分别表明第一个标签，第二个标签...)
5. 打开新的标签 CTRL + T
6. 搜索内容 CTRL + F
7. 回到上一页 CTRL + 左箭头
8. 回到下一页 CTRL + 右箭头
9. 打开开发者工具 F12 MAC command + shift + i

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

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

Elements 中的的经常使用技巧

1.快速查看元素的快捷键 CTRL + SHIFT + C

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

2.想查看鼠标通过的元素的样式

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

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

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

Console 中的的经常使用技巧

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

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

1.浏览器支持直接使用 jQuery 的方式直接获取元素例如：$("body")

这个有一个妙用，好比说改标签的内容，你直接在 Elements 里面改很是不方便，可是你若是只把你须要的一部分拿出来改是否是就很爽了呢。

2.打印的东西太多，直接使用 clear() 函数清理掉

3. 使用" [ " " { " " . " 进行换行

Network 中经常使用的技巧

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

1.如何只看先后端交互的请求？

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

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

2.对于单击某个按钮就跳转新的页面的状况如何查看上个页面的请求？

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

3.接口缓存清理，但请不要清理掉个人密码记录

仍是上图，Preserve log 旁边有个 Disable cache 选中它就可以不缓存请求数据了。固然这还远远不够，由于有时候你还须要清除 session，cookiey等等缓存。

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

4.快速获取地址栏连接，上面还有不少其余信息的获取方式。能够多看看！

Application 的经常使用技巧

从图中能够看到这是一个专门看各类缓存的地方。想知道本身的缓存存储的状况，甚至修改缓存值调试代码，这里都要方便的多

Source 的经常使用技巧

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

1.压缩的代码格式化。

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

2.代码调试

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

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

2.在 Source 中打断点

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

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

总结

文中涉及的内容都是比较经常使用的，没有列举不少感受比较牛逼。可是实际操做的时候却不多用的功能，若是想了解的更多更全面能够查看谷歌开发者工具的中文翻译文档： www.html.cn/doc/chrome-…

若是你想了解更多的骚技巧能够看这俩篇文章：

juejin.im/post/5af538…

umaar.com/dev-tips/