15个开发者必须知道的chrome技巧

Chrome浏览器是Web开发者必备的工具之一。其每周的发布周期以及不断扩展的强大功能，使得它成为了广受欢迎的浏览器。我们将分享15个开发者必须掌握的Chrome技巧，这些技巧将极大地改进你的开发流程。

一、快速切换文件：如果你熟悉Sublime Text的Go to anything功能，那么Chrome开发者工具也能实现这一功能。当DevTools打开时，按Ctrl+P（Mac上为cmd+p），可以快速搜索并打开你的项目文件。

二、源代码中快速搜索：要在已加载的页面中搜索特定的字符串吗？按下Ctrl + Shift + F（Mac上为Cmd + Opt + F）就能快速搜寻，而且支持正则表达式哦。

三、跳转到指定行：在Sources标签中打开文件后，按下Ctrl + G（Mac上为Cmd + L），然后输入行号，DevTools将允许你跳转到文件中的任意一行。另一种方式是按Ctrl + O，然后输入冒号和行数，无需在文件中寻找。

四、控制台选择元素：DevTools控制台支持一些命令来选择DOM元素。例如，$()是document.querySelector()的简写，可以返回第一个匹配的元素；$$()是querySelectorAll()的简写，返回一个元素数组。$0-$4可以访问最近选择的五个DOM元素的历史记录。

六、保存控制台记录：勾选Console标签下的保存记录选项，可以让DevTools的console继续保存记录而不会清除。这对于研究页面加载过程中的bug非常有帮助。

七、优质打印：Chrome的Developer Tools有内建的美化代码功能，可以返回一段最小化且格式易读的代码。Pretty Print按钮位于Sources标签的左下角。

八、设备模式：对于开发移动友好页面，DevTools包含一个强大的设备模式，可以调整屏幕大小、进行触摸仿真和模拟网络连接等。还可以模拟移动设备的传感器，如触摸屏幕和加速计，甚至可以模拟地理位置。

九、颜色选择器：在样式编辑中选择颜色属性时，点击颜色预览会弹出一个颜色选择器。当选择器开启时，鼠标指针会变成放大镜，让你选择像素精度的颜色。这个功能让你可以更精确地选择和调整颜色。

十一、掌控元素状态

想象一下，DevTools就像一位熟练的魔法师，拥有模拟CSS状态的功能。它能让元素的hover和focus状态变得触手可及，轻松改变元素样式。在CSS编辑器中，你可以尽情施展这一神奇功能。

十二、揭开DOM阴影的神秘面纱

Web浏览器在构建一些元素时，如文本框、按钮和输入框，会隐藏其他基本元素的视图。但这层面纱并非无法揭开。在Settings中切换到Show user agent shadow DOM，元素标签页中就会显现出被隐藏的代码。你甚至可以单独设计他们的样式，仿佛掌握了巨大的控制权，犹如一位真正的网页设计师。

十三、寻找下一个匹配项

当你在Sources标签下编辑文件时，按下特定的快捷键组合，当前选中的单词的下一个匹配项也会被轻松选中。这一功能极大地简化了你的编辑流程。

十四、色彩格式的自由切换

颜色预览功能是一项强大的工具，使用快捷键Shift + Click，你可以在多种颜色格式之间自由切换，如rgba、hsl和hexadecimal。这让你在设计和开发过程中更加灵活多变。

十五、Workspaces：让你的本地文件在DevTools中起舞

Workspaces是Chrome DevTools的一项强大功能，它让DevTools变成了一个真正的集成开发环境（IDE）。Workspaces会将Sources选项卡中的文件和你的本地项目文件进行智能匹配，这样你就可以直接编辑并保存，无需将外部改变的文件复制粘贴到编辑器中。

如何配置Workspaces呢？打开Sources选项，在左边面板右击，选择Add Folder To Workspace，或者干脆将整个工程文件夹拖入Developer Tool。现在，无论在哪个文件夹，被选中的文件夹及其子目录和所有文件都可以被轻松编辑。为了让Workspaces更高效，你可以将页面中的文件映射到相应的文件夹，实现在线编辑和简单保存的无缝衔接。从此，你的代码将在DevTools中自由舞动！