Chrome开发工具提供了一套非常棒的工具，可以帮助您在Web平台上进行开发。以下是一些你可能还不知道的建议
在ELEMENTS面板中拖放
在Elements面板中，您可以拖放任何HTML元素并更改其在页面上的位置 
引用控制台中当前选择的元素
在Elements面板中选择一个节点，并在控制台中键入$0来引用它。 
提示:如果使用jQuery，可以输入$($0)来访问这个元素上的jQuery API。
使用控制台中最后一个操作的值
使用$_引用在控制台中执行的前一个操作的返回值 
添加CSS并编辑元素状态
在元素面板中有两个超级有用的按钮。 第一个选项允许您添加一个新的CSS属性，使用您想要的任何选择器，但要预先填充当前选定的元素: 
第二个选项允许您为所选元素触发一个状态，这样您就可以看到当它处于活动状态、悬停状态、焦点状态时应用的样式。 
找到定义CSS属性的位置
在元素面板中的CSS属性，DevTools将指向定义该属性的地方，即源面板
保存并归档修改后的CSS
单击您编辑的CSS文件的名称。检查器将它打开到Sources窗格中，然后您可以在应用的实时编辑中保存它。 这个技巧不适用于使用+或元素添加的新选择器。样式属性，但仅适用于已修改的现有属性。 
屏幕截图一个元素
选择一个元素并按下cmd-shift-p(或在Windows中按ctrl-shift-p)打开命令菜单，然后选择Capture node截图 
使用CSS选择器查找元素
按下cmd-f(在Windows中ctrl-f)将在Elements面板中打开搜索框。 你可以在里面输入任何字符串来匹配源代码，或者你也可以使用CSS选择器让Chrome为你生成一个图像: 
在控制台中SHIFT-ENTER
要在控制台中编写跨越多行代码的命令，请按shift-enter。 一旦你准备好了，按下回车在脚本的最后，以执行它: 
清除控制台
您可以使用控制台左上角的clear按钮清除控制台，或者按ctrl-l或cmd-k。
GO TO…
在资源面板:
- 显示页面加载的所有文件。
- 显示当前文件中的符号(属性、函数、类)。
- ctrl-g转到特定的行。
监视表达式
在调试过程中，您将多次检查变量名或表达式，而不是一次又一次地编写变量名或表达式，而是将其添加到监视表达式列表中。 
XHR /获取调试
从调试器中打开XHR/Fetch断点面板。 您可以将它设置为在发送XHR / Fetch调用时断开，或者仅在特定的调用上: 
对DOM修改的调试
右键单击元素并在子树修改上启用Break:每当脚本遍历该元素的子元素并修改它们时，调试器都会自动停止，以便让您检查发生了什么。 
