谷歌浏览器现在是网络开发者使用的最流行的网络浏览器。凭借每六周的发布周期和不断扩展的强大开发功能集，Chrome已成为必备工具。大多数前端开发人员可能都熟悉chorme的许多功能，例如使用控制台和调试器在线编辑CSS。在本文中，我们将分享15个炫酷技巧，让您进一步改进工作流程。阅读完这些提示后，你会惊讶和兴奋地发现它是否与SublimeText非常相似。1.快速文件转换没有SublimeText中的“Gotoanything”功能你就活不下去了。所以你会很高兴听到DevTools也有这个功能。当DevTools打开时，您可以按Ctrl+P（Mac上为Cmd+P）快速查找并打开项目中的任何文件。2.在源代码中搜索但是如果你想在源代码中搜索怎么办？按Ctrl+Shift+F（在Mac上为Cmd+Opt+F）在所有加载的文件中查找特定字符串。此搜索方法还支持正则表达式。3.跳转到特定行当您在源选项卡中打开文件时，DevTools允许您轻松跳转到代码中的任何行。Windows和Linux用户只需按Ctrl+G（在Mac上使用Cmd+L），然后输入要跳转的行数。另一种跳转方式是按Ctrl+O，输入:和行号而不是查找文件。4.在控制台选择元素DevTools控制台支持一些变量和函数来选择DOM元素：)它将返回页面上的第一个div元素）。$$()：document.querySelectorAll()的缩写，返回一个数组，其中包含匹配的CSS选择器的元素。$0–$4：返回Elements面板中最近选中的五个DOM元素的历史记录，$0为最新记录，以此类推。要了解有关控制台命令的更多信息，请阅读命令行API5。使用多个光标并选择另一个可以胜过SublimeText功能。在编辑文件时，您可以通过按住Ctrl（Mac上为Cmd）并单击您希望光标停留的位置来设置多个光标，这样您就可以同时在多个位置输入相同的文本。6.保存日志勾选Console选项卡下的保存日志选项，可以让DevTools的控制台在每次页面加载后继续保存日志而不清除日志。当您想调查页面加载完成之前发生的错误时，这会很方便。7.格式化打印{}Chrome的开发者工具内嵌了美化代码，可以帮你返回一个最小化易读的格式化代码。正确打开文件后，这个漂亮的排版按钮位于“源”选项卡下的左下角。8.设备模式DevTools包含一个强大的模式，可用于开发友好的移动界面。9.设备仿真传感器设备模式的另一个很酷的特性是移动设备传感器的仿真，例如触摸屏和加速度计。您甚至可以欺骗您的地理位置。该函数位于调试窗口的底部。点击调试窗口右上角的showdrawer，可以看到Emulation->Sensors。10.颜色选择器当我们在样式编辑器中选择颜色后，可以点击颜色预览，颜色选择器会弹出。当颜色选择器打开时，如果您将鼠标悬停在页面上，您的鼠标指针会变成放大镜，以像素精度选择颜色。11.EnforceelementstateDevTools有一个模拟CSS状态的功能，比如在元素上悬停和聚焦，可以很容易地设计它们的样式。该功能来自css编辑器。12.ViewShadowDOMWeb浏览器构建文本框、按钮和输入等内容，因为其他基本元素通常是隐藏在视图之外的。但是，您可以在设置->常规中切换到ShowuseragentshadowDOM，这将在元素选项卡中显示隐藏的代码。给你很多控制权，让你甚至可以单独设置它们的样式。13.选择下一个匹配当你在Sources选项卡下编辑一个文件时，如果你按下Ctrl+D（Cmd+D），下一个匹配也会被选中，这可以帮助你同时编辑它们。14、更改颜色格式在颜色预览中使用Shift+Click，可以更改rgba、hsl、十六进制三种格式。15、通过工作区编辑本地文件工作区是ChromeDevTools的一个强大功能，它让Chrome成为了真正的IDE。工作区将“源”选项卡下的文件与您的本地项目文件相匹配。所以现在您可以直接编辑和保存，而无需复制和粘贴到外部文本编辑器中。要配置工作区，您只需转到“源”选项卡，右键单击左侧控制面板上的任意位置，然后选择“将文件夹添加到Worskpace”，或者只需将整个项目文件夹拖放到DevTools中。现在，无论您打开哪个页面，所选文件夹的子目录及其包含的所有文件都将是可编辑的。为了使它更有用，您可以将页面中使用的文件映射到相应的文件夹，以便在线编辑和轻松保存。
