Chrome浏览器应该是大部分程序员最喜欢的浏览器了，至少我是这样的O(∩_∩)O。简洁的设计、强大的插件、完美的兼容性，让我爱不释手。Chrome还提供了控制台工具，在开发和测试时提供了极大的便利。今天我们就来看看那些非常方便的Chrome使用技巧。Chrome快速切换文件如果我们想查看某个文件的源代码，我们会进入源代码控制面板，然后慢慢寻找。但是如果Source下的文件太多，要找到你想要的文件是一个复杂的过程。比如下图中的文件就那么多，你只能慢慢打开每个文件夹去寻找。例如，Chrome提供了快捷键cmd+P（Windows为Ctrl+P）来快速定位文件。可以通过关键字匹配文件名，一键输入文件。快速定位文件页面源代码搜索当你想直接搜索页面上的某个元素时，可以直接进入元素控制面板，按cmd+F快捷键（Windows中为Ctrl+F），这个搜索也是适用于Source下的js或css文件。cmd+F快捷键如果要查找所有出现特定字符串的源文件，可以使用cmd+option+F快捷键（windows下为Ctrl+Shift+F）。下面的例子是搜索所有出现的“container”，只要在js和html文件中有匹配，就会出现在结果中。搜索所有源文件并跳转到指定行在webstorm、IntellijIDEA等IDE中，快速跳转到指定行的快捷键是cmd+L。在输入框中输入行号后，可以直接定位到指定行。这个功能在Chrome的Source面板下也有。快捷键是cmd+P或者cmd+shift+p，会弹出一个输入框，然后在输入框的第一位输入一个冒号（:），然后输入数字跳转到指定的线。结果如下图。快速跳转到指定行进行多点编辑有时我们想同时编辑一个文件的多个地方。为此，我们需要按住命令键（Windows下为Ctrl键），然后单击鼠标同时定位多个点。***重新进入时，这些地方可以同时编辑。多点编辑设备模式在目前APP开发成本比较高的情况下，很多采用网页APP的模式，可以在网页浏览器中直接适配移动端。Chrome提供了强大的适配模式，可以直接模拟主流iphone、ipad、Galaxy等屏幕。这种可以随时切换的设备模式，为前端开发者提供了极大的方便。因此，我们只写一套代码就可以同时适配web端和多个不同的移动端。在设备模式下格式化代码在线环境中有很多压缩JS和CSS文件代码的网站，您可以通过Source面板中源文件下的{}图标对代码进行格式化。下图是格式化JS代码的方法，也用于格式化CSS代码。格式代码颜色选择器在页面上设置颜色时，在元素面板下提供了一个用于颜色预览的选择器。随着鼠标的移动，鼠标指针会变成放大镜，方便精确选色。不同状态下的颜色选择器编辑样式在页面上有一系列的悬停、聚焦等效果。默认情况下，这些定义的CSS样式不会直接显示在Chrome控制台中，但您可以通过单击相应的按钮查看它们并轻松进行编辑。不同状态下样式多点匹配编辑当我们需要同时编辑一个文件中的多个相同字符时，可以使用cmd+D快捷键（Windows中为Ctrl+D），按一次匹配一个字符。然后可以同时进行编辑。多点编辑总结今天的文章将使用Chrome控制台技巧，大家可以试试看，相信一定能提高大家的工作效率~
