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，这能够容易的设计他们的样式。
•:link代表为访问链接的样式，所以只要你是超链接，且未被访问过，则链接都会按照你设定的样式显示，所以它的位置顺序无所谓。
•:visited代表链接访问后的样式，则链接一旦被访问，则之后它的样式就会是你所设置的visited样式
•重点是下面这几个：
•:focus 代表的是获取焦点时的样式，有人说啥是获取焦点时的样式，这个我们可以通过tab键来查看，一旦链接获取了焦点，则它的样式就是你设置的focus样式
•:hover 代表的是你光标经过某一元素时的样式，如果将此样式放在:focus之后，则当链接获取焦点时，显示:focus样式，当光标经过此链接时，会显示hover的样式，因为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.样式修改并保存到本地
•首先在styles模式下找到你需要修改的元素；
•点击样式文件进入该样式文件的sources文件（必须是独立的样式文件）；
•修改后可以查看文件differ，并可以选择覆盖重置操作（上述修改记录只保存在浏览器中，非源文件）；
•若需保留修改至源文件，则可以save as 到源文件地址，直接覆盖即可。
快捷键：
•打开开发工具：F12，Ctrl+shift+I
•检查元素模式/浏览器模式切换：Ctrl+Shift+C
•控制台切换：Ctrl+Shift+J
•显示设置回话：？/F1
•上/下一个面板：Ctrl+[ / Ctrl+]
•返回上/下一个面板：Ctrl+Shift+[ / Ctrl+Shift+]
•改变开发工具面板位置：Ctrl+Shift+D
•打开设备模式：Ctrl+Shift+M
•切换Console面板开关以及关闭设置对话框：ESC
•刷新页面：F5/Ctrl+R
•清除缓存内容并且刷新页面：Ctrl+F5/ Ctrl+Shift+R
•在当前文件或者面板中搜索：Ctrl+F
•全局搜索：Ctrl+Shift+F
•搜索文件名：Ctrl+O
•放大/缩小：Ctrl+ + / Ctrl+ -
•恢复设置文本大小：Ctrl+0
以下是针对Elements面板
•撤销：Ctrl+Z
•取消撤销：Ctrl+Y
•导航：UP/Down
•展开/折叠节点：Right/Left
•一次打开该节点的所有子节点：Ctrl+Alt+点击节点
•编辑属性：双击或者Enter
•隐藏元素：H
•编辑模式切换：F2
•插入新的属性：single-click on whitespace
•编辑规则：single-click
•Source中查看该样式属性：Ctrl+Click on property value
更过快捷方式：详见
https://developer.chrome.com/devtools/docs/shortcuts
console API参考：
•Console.assert(expression,object):如果指定的表达式是错误的,将消息写入控制台以及一个堆栈跟踪
Eg:Var list=document.querySelector(“#myList”);
Console.assert(list.childNodes.length<10,”list item count is>=10”);
•Console.clear();清理控制台
•Console.count(label):写的次数计数
Eg:function login(user){console.count(“Login called”);}
Login();
•Console.dir(object)
Eg:console.dir(document.body);
等价于：console.log("document body: %O", document.body);
•console.dirxml(object)
•console.error(object [, object, ...])
•console.group(object[, object, ...])
•console.groupCollapsed(object[, object, ...])
•console.info(object [, object, ...])
• console.profile([label])
•console.time(label)
…………
详见：https://developer.chrome.com/devtools/docs/console-api