15个关于Chrome的开发必备小技巧[译]

谷歌Chrome，是当前最流行且被众多web开发人员使用的浏览器。最快六周就更新发布一次以及伴随着它不断强大的开发组件，使得Chrome成为你必备的开发工具。例如，在线编辑CSS，console以及debugger这些经常使用的调试技术，或许你已经了解。在本篇文章中，咱们将介绍15个炫酷且实用的技巧，这将更快的提升你的开发效率。

该篇博客原文地址：http://www.cnblogs.com/giggle/p/5966991.html

1、快速查找文件

若是你使用过Sublime，那么你会知道’Go to anything’的强大。没错，Chrome如今也有了这一功能。

操做以下：

一、F12打开你的Chrome调试器；

二、按下Ctrl+P（Mac上Cmd + P）;

三、搜索你想打开的文件名便可。

2、在源代码中搜索

可是，若是咱们想在整个工程下，查找一段源代码呢？

操做以下：

一、F12打开你的Chrome调试器；

二、按下Ctrl+Shift+F（Mac上Cmd+Opt+F）;

三、在输入框中输入你想查询的源代码，回车，就OK啦。

注：该搜索也支持正则表达式。

3、跳到指定行

当你在Chrome调试器的sources栏，已经打开了文件，Chrome也容许你跳到指定的行数，在Windows和Linux系统下，只需按下Ctrl+G（Mac上Cmd+L），而后输入你指定的行数便可。

另外一种，方法就是Ctrl+O，输入”:”+行数便可。

4、在控制台(Console)中获取DOM元素

Chrome控制台，提供了方法和变量来快速获取页面中的DOM元素，以下：

一、$()—就是document.querySelector()原生方法的映射。功能嘛，就是获取并返回第一个与填写的CSS属性匹配的DOM元素，如$(‘div’)就会返回第一个出如今页面中的div元素。

二、$$()—就是document.querySelectorAll()原生方法的映射。功能嘛，就是获取并返回一个数组，数组中包含了全部与你填写的CSS属性匹配的DOM元素。

三、$0--$4—表明你在Chrome调试器中操做不一样DOM元素的历史记录，且最多记录5次，故而只有$0-$4这五个变量。$0表明最近一次，依次类推。

5、多光标

另外一个牛逼的功能就是多光标。

当你想在呈现的文件中多处操做代码时，你能够经过按住Ctrl（Mac上Cmd），而后鼠标点击，你想要出现的光标处便可。

6、保存日志

在console面板上勾选‘保存日志’选项，则不会在你每次加载页面时，清空日志。当你想要调查页面关闭前的bugs时，可要记住这一选项哦。

7、格式化代码

Chrome经过其内置的优化器，帮助你提升文件内容的可读性。对于压缩过或者杂乱的代码，尤其适用。

怎么实现呢？

操做以下：

一、F12打开Chrome开发工具；

二、选择你想要阅读的文件；

三、点击文件下方的”{ }”状按钮便可。

9、设备模拟器

另外一个十分酷炫的功能就是，模拟移动设备端。

例如咱们能够经过Chrome模拟人为触摸屏幕和晃动设备。你甚至能够经过它改变你的地理位置哦。

操做以下：

一、F12打开Chrome调试器；
二、在调试器底部选中Emulation选项；

三、最后在Emulation面板中，左侧选中Sensors便可。

10、颜色选择器

当你调用了Chrome的颜色选择器后，你能够经过你的鼠标，悬浮在网页中的任意处，获取颜色，它会十分精准地将其转换成对应的编码格式。

是否是很炫酷？

操做以下：

一、F12打开Chrome调试器；

二、选中目标元素；

三、在样式编辑器中，点击颜色预览，就会出现这个颜色选择器。

11、强制改变元素状态

Chrome开发工具备一个强制改变元素CSS状态的功能，如:hover和:focus。对于CSSer比较方便。

12、可视化“隐藏的DOM”

Web浏览器在构建例如textbox，button以及input这些元素时，一般会隐藏在其之下的展示层元素。

可是，咱们能够经过Setting à General，在General面板中选中’Show user agent shadow DOM’这一选项，来展现这些被隐藏掉的基础元素。

你甚至能够单独地去设置它们的样式。

十3、选中下一个匹配项

当你选中一个匹配项后，利用Ctrl+D（Mac上Cmd+D），就会将下一个相同的匹配项也选中，该功能能够帮助你同时编辑它们。

十4、 改变颜色格式

在颜色预览中，经过Shift + 鼠标点击，就能够在rgba,hsl和hexadecimal三种格式中，来回切换。

十5、利用Chrome的工做空间，编辑本地文件

Chrome的工做空间，也是很是强大的，它能够直接编辑和保存你的本地文件，无需额外的操做，例如复制、粘贴。怎么配置它呢？

操做以下：

一、 F12打开Chrome调试器

二、 找到Sources栏，出如今左侧的控制面板，点击鼠标右键，选择Add Folder To Workspace。或者，直接将你整个工程文件夹，拖拽到调试器中。

这样操做后，无论你打开哪一个页面，都会出现刚才你操做的文件。为了更加有用，你能够将页面中用到的文件映射到相应的文件夹，容许在线编辑和简单的保存。

 

原文：15 Must-Know Chrome DevTools Tips and Tricks