十一、强制改变元素状态
　　DevTools有一个可以模拟CSS状态的功能，例如元素的hover和focus,可以很容易的改变元素样式。在CSS编辑器中可以利用这个功能

　十二、可视化的DOM阴影
　　Web浏览器在构建如文本框、按钮和输入框一类元素时，其它基本元素的视图是隐藏的。不过，你可以在Settings -> General 中切换成Show user agent shadow DOM，这样就会在元素标签页中显示被隐藏的代码。甚至还能单独设计他们的样式，这给你了很大的控制权。

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

　十四、改变颜色格式
　　在颜色预览功能使用快捷键Shift + Click，可以在rgba、hsl和hexadecimal来回切换颜色的格式

十五、通过workspaces来编辑本地 文件
Workspaces是Chrome DevTools的一个强大功能，这使DevTools变成了一个真正的IDE。Workspaces会将Sources选项卡中的文件和本地项目中的文件进行匹配，所以你可以直接编辑和保存，而不必复制/粘贴外部改变的文件到编辑器。
　　为了配置Workspaces，只需打开Sources选项，然后右击左边面板的任何一个地方，选择Add Folder To Worskpace，或者只是把你的整个工程文件夹拖放入Developer Tool。现在，无论在哪一个文件夹，被选中的文件夹，包括其子目录和所有文件都可以被编辑。为了让Workspaces更高效，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。

赞

第十五条 给我很大帮助，另外补充一个，我在 调试 chrome crx插件时无意间发现的，以往每次修改完代码都要重新生成crx 重新安装，特别费时间。。无意间发现，可以直接拖动 crx项目文件 安装。。再加上楼主的第十五条，现在可以 直接在面板里 边改动 边保存，实时同步。方便多了。