谷歌浏览器是网络开发者中使用最广泛的浏览器。六周的发布周期和一套强大且不断扩展的开发功能使其成为web开发人员的必备工具。您可能已经熟悉了它的一些功能，例如使用控制台和调试器在线编辑CSS。在本文中，我们将分享15种有助于改进开发过程的技术。

首先，快速切换文件

如果你使用了崇高的文字，你可能不习惯没有覆盖到任何东西。你会很高兴听到chrome Developer功能也有这个功能。打开DevTools后，按Ctrl P(MAC上的cmd p)快速搜索并打开项目的文件。

第二，在源代码中搜索

如果你想搜索源代码呢？在页面上加载的文件中搜索特定字符串。快捷键是Ctrl Shift F (Cmd Opt F)。这种搜索方法也支持正则表达式

第三，快速跳到指定线

在“源”选项卡中打开一个文件，按Ctrl+G，(或Cmd+L代表Mac)并在Windows和Linux中输入行号，DevTools将允许您跳转到文件中的任何一行。

另一种方法是按Ctrl O，输入：和行数，而不是找文件。

第四，选择控制台中的元素

开发工具控制台支持一些变量和函数来选择DOM元素：

$()document . queryselector()的缩写，返回第一个匹配css选择器的元素。例如，$(“div”)返回此页面中的第一个div元素

$ $()document . queryselectorall()的缩写，返回匹配css选择器的元素数组。

$0-$ 4返回您最近在元素面板中选择的五个DOM元素的历史记录，$ 0是最新的记录，依此类推。

要了解有关控制台命令的更多信息，请点击这里：命令行应用编程接口

5.使用多个插入进行选择

编辑文件时，您可以按住Ctrl键(cmd代表mac)，在要编辑的位置单击鼠标，并设置多个插入，这样您就可以一次在多个位置进行编辑。

不及物动词保留记录

选中“控制台”选项卡下的“保存记录”选项，您可以使DevTools控制台在加载每个页面后继续保存记录，而无需清除记录。当您想要研究页面加载前出现的bug时，这是一种方便的方法。

七、高质量印刷

Chrome的开发者工具有内置的美化代码，可以返回最小化的可读代码。“漂亮打印”按钮位于“来源”标签的左下角。

八、设备模式

DevTools包含一个非常强大的开发移动友好页面的模型。这段谷歌视频介绍了它的主要功能，比如调整屏幕大小、触摸模拟和模拟不良网络连接

(原ps:中的视频文件丢失。这张图是小补充。你可以自己测试这个工具，非常有用。)

九.设备传感仿真

设备模式的另一个很酷的特性是模拟移动设备的传感器，例如触摸屏和加速度计。你甚至可以欺骗你的地理位置。该功能位于元素标签的底部。单击“显示抽屉”按钮查看仿真标签-传感器。

X.颜色选择器

当在样式编辑中选择颜色属性时，您可以单击颜色预览，颜色选择器将弹出。当选择器打开时，如果您停留在页面上，鼠标指针将变成放大镜，允许您以像素精度选择颜色。

十一、被迫改变元素的状态

DevTools有一个可以模拟CSS状态的功能，比如元素的悬停和焦点，可以轻松改变元素的样式。您可以在CSS编辑器中利用这个特性

十二.可视化DOM阴影

在Web浏览器中构建文本框、按钮和输入框等元素时，会隐藏其他基本元素的视图。但是，您可以在设置-常规中切换到显示用户代理阴影DOM，这将在元素选项卡中显示隐藏代码。你甚至可以设计自己的风格，这给了你很大的控制权。

十三.选择下一个匹配项

在“来源”选项卡下编辑文件时，按Ctrl D (Cmd D)，将选择当前选定单词的下一个匹配项，这有利于您同时编辑它们。

十四、改变颜色格式

使用颜色预览功能中的快捷键Shift Click，可以在rgba、hsl和十六进制之间来回切换颜色格式

十五.通过工作区编辑本地文件

工作区是Chrome DevTools的一个强大功能，它让DevTools成为了一个真正的IDE。工作区将使“源”选项卡中的文件与本地项目中的文件相匹配，因此您可以直接编辑和保存，而无需将外部更改的文件复制/粘贴到编辑器中。

要配置工作空间，只需打开“源”选项，然后右键单击左侧面板上的任意位置并选择“将文件夹添加到工作空间”，或者只需将整个项目文件夹拖放到开发人员工具中。现在，无论是哪个文件夹，选中的文件夹，包括它的子目录和所有文件都可以编辑。为了使工作区更高效，您可以将页面中使用的文件映射到相应的文件夹，从而允许在线编辑和简单保存。