前端老司机都在用的Chrome开发者工具15 个小技巧，你用过几个？( 二 ) _Chrome开发者工具

12.查看Shadow DOM由于其他基础的元素在视图中正常的隐藏，网页浏览器构建例如文本框，按钮和输入之类的东西。不过，你可以在Settings -> General 中切换成Show user agent shadow DOM，这样就会在元素标签页中显示被隐藏的代码。给了你很大的控制，让你甚至可以单独地设计他们。

文章插图

13.选择下一个匹配项当你在Sources 标签下编辑文件时，如果你按下Ctrl + D (Cmd + D)，下一个匹配项也会被选中，这能够帮助你同时编辑他们。

文章插图

14.改变颜色格式在颜色预览中使用Shift + Click ，可以在rgba, hsl 和 hexadecimal 这三种格式中改变。

文章插图

15.通过工作区来编辑本地文件Workspaces是Chrome DevTools的一个强大的的功能，这个功能使得Chrome成为一个真正的IDE 。Workspaces使Sources标签下的文件和你本地的工程文件相匹配。所以现在你可以直接编辑和保存，而不用复制粘贴到外部的文本编辑器里。
配置Workspaces，你只需要去Sources标签下，在左边的控制面板的任何地方点击右键，
并且选择Add Folder To Worskpace, 或者只是把你的整个工程文件夹拖放到DevTools 。
现在，无论你打开哪一页，被选择的文件夹的子目录和它包含的所有文件都将能被编辑。为了使它更加的有用，你可以将页面中用到的文件映射到相应的文件夹，允许在线编辑和简单的保存。