chrome控制台有一个可以模拟CSS状态的功能，例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能查看不同状态下元素的样式，我相信这个功能对于模仿别人界面的前端爱好者来说是非常实用的。

 

利用chrome来查看和编辑本地文件

事实上我们可以用chrome来查看本地文件，只要把相关目录拖到chrome浏览器中即可。

选择下一个匹配项

当在Sources标签下编辑文件时，按下Ctrl + D (Cmd + D) ，当前选中的单词的下一个匹配也会被选中，有利于你同时对它们进行编辑。

 

 

可视化的DOM阴影

 

 

奇淫技

.隐藏的刷新按钮，在开发者工具打开的情况下，长按左上角的刷新按钮，会出现多种加载选项。

 

 

Add Folder to Workspace，在Source面板下，右键选择Add Folder

 

Source下的Snippets，可以让你想保存小段的脚本、书签或是你在浏览器中调试时经常用到的代码，都可以使用Snippets，你可以在Source面板里创建、存储和运行这些Snippets。

 

 

 

保存，回退

可以保存修改，Source面板下的文件是可以修改并且支持版本回退的。打开一个文件，进行编辑，保存。右键打开Local Modifications,你可以看到保存记录，你可以选择回退，到某个时间点。你也可以另存为~

 

Chrome Dev开发者选项

Chrome Dev开发者选项,浏览器进入chrome://flags，你会看到很多浏览器很多隐藏功能，启用开发者工具实验。

然后再进入设置，你会看到新增加了很多开发者选项。

打开Layer面板，可以让你看到页面中的复合层。（查找页面原因的时候非常有用）

 

 

总结

这篇文章的内容到此为止算是完结了，总结的过程也重新复习了一遍操作。虽然这些技能可能都算不上什么特殊技巧，掌握它们，也不会让你瞬间变得有多强大。但是熟悉它们，善用它们，可能会让你在某些场合，省下大量时间去喝杯咖啡。睡觉！