1.快速稳健转换：打开DevTools,按下Ctrl+P来快速寻找和打开你工程中的任意文件。
2.在源代码中搜索：打开DevTools,按下Ctrl+Shift+F,即可在所有已加载文件中查找一个特定的字符串，这个搜索的方法也支持正则表达式。
3.调整到特定的行数：打开一个源标签的文件后，DevTools能够允许你轻松跳转到代码中的任意一行。只需按下Ctrl+G，输入行数即可。
另一种Ctrl+o也可实现，输入”:行数”即可。
4.在控制台选择元素：DevTools控制台支持一些变量和函数来选择DOM元素
4-1：$()：document.querySelector()缩写，返回第一个与之匹配的CSS选择器的元素（例如：$(‘div’) 但会本页面的第一个div元素）。
4-2：$$(): document.querySelectorAll()的缩写，返回一个数组，里面有与之匹配的CSS选择器的元素。
4-3：$0----$4依次返回五个最近你在元素面板中选择过的DOM元素的历史记录，$0是最新的记录，以此类推。
5.使用多个光标和选择：当你在编辑一个文件的时候，你可以通过Ctrl,同时点击你想让光标停留的位置，设置多个光标，这样你可以同时在多个位置输入同一文本。
6.保存记录：勾选在Console标签下的保存记录选项，你可以使Console继续保存记录而不会在每个页面加载之后清除记录。当你想要研究在页面还没有加载完之前出现的bug时，这会是一个方便的方法。
7.漂亮的打印：Chrome的开发者工具有一段嵌入的美化代码，它可以帮你返回一段最小化的且格式易读的代码，这个漂亮的印刷按钮在你正确打开文件之后的Sources标签下的左下角。
8.设备模式：DevTools包括了一个强大的模式可用于开发友好的移动端界面，这是来自谷歌的视频介绍了它最主要的功能，有调整大小，触摸仿真和模拟糟糕的网络连接。
9.设备仿真传感器：设备模式的另一个很酷的功能就是模拟移动设备的传感器，例如触摸屏幕和加速器，可以恶搞你的地理位置。点击“show Drawer”按钮，就可以看见Emulation标签àSensors.
10.颜色选择器：当我们在样式编辑器中选择一种颜色时，你可以点击颜色预览，颜色选择器则会弹出。当颜色选择器开启时，如果你停留在某一页面，你的鼠标指针就会转换成一个放大镜，选择像素精度的颜色。
11.元素状态：DevTools有一个功能是模拟CSS状态，如在元素中的hover和focus，这能够容易的设计他们的样式。
如果:hover排在前，:focus排在后，则当光标获得焦点时显示:focus的样式，但当光标经过链接时，样式并未显示:hover的样式，而是继续是:focus的样式，因为应用的focus样式在hover之后，覆盖了前面的样式。
12.可视化Shadow DOM:由于其他基础的元素在视图中正常的隐藏，网页浏览器构建例如文本框，按钮和输入框之类的东西。不过，你可以在setting->General中切换”show user agent shadow DOM”,这样就会在元素标签中显示被隐藏的代码。
eg:<input type=“range”>
13.选择下一个匹配项：当你在sources标签下编辑文件时，如果你按下Ctrl+D，下一个匹配项也会被选中，这只能够帮助你同时编辑他们。
14.改变颜色格式：在颜色预览中使用shift+click，可以在rgba,hsl和hexadecimal这三种格式中改变。
15.通过workspaces来编辑本地文件：Workspaces是一个强大的Chrome DevTools的功能，这使它成为一个真正的IDE。Workspaces使Sources标签下的文件和你本地的工程文件相匹配。所以现在你可以直接编辑和保存，而不用复制粘贴到外部的文本编辑器。
配置Workspaces，你只需要去Sources标签下，在左边的控制面板的任何地方点击右键（Sources标签下），选择Add Folder To Workspaces。
详见：https://developer.chrome.com/devtools/docs/workspaces
16.样式修改并保存到本地
以下是针对Elements面板
更过快捷方式：详见
https://developer.chrome.com/devtools/docs/shortcuts
console API参考：
Eg:Var list=document.querySelector(“#myList”);
Console.assert(list.childNodes.length<10,”list item count is>=10”);
Eg:function login(user){console.count(“Login called”);}
Login();
Eg:console.dir(document.body);
等价于：console.log("document body: %O", document.body);
…………
详见：https://developer.chrome.com/devtools/docs/console-api
http://www.admin10000.com/document/6159.html
