chrome浏览器的开发调试工具提供了一系列令人惊讶的功能来帮助你在web平台上进行开发。这儿有一些你之前可能并不清楚的小技巧。
在Elements面板的拖拽操作
在Elements面板你可以拖拽任何HTML元素并且从页面上来改变它的定位。
在Console面板引用当前已被选中的元素
在Elements面板选择一个节点，然后在Console面板输入$0来引用这个节点。
提示：如果使用了jQuery，可以通过输入
$($0)来为这个元素引入jQuert API。
在Console面板引用上一次操作的值
在Console面板输入$_来引用先前一次执行操作返回的值
添加CSS属性编辑元素状态
在Elemsnts面板有两个超级好用的按钮
第一个按钮可以让你为任何选择器添加新的CSS属性，只是新建的选择器会复制当前已被选中的元素：
第二个按钮可以让你为选中的元素激活其状态，因此你可以在元素的激活、悬停、聚焦状态看到它的样式。
寻找定义某个CSS属性的位置
在Elemsnts面板ctrl-click(Macs上的cmd-click)一个CSS属性，开发调试工具会在Sources面板跳转定位到定义这个CSS属性的位置。
将修改的CSS保存到文件夹
点击需要编辑的CSS文件夹的名称。监视器会在Sources面板打开它，并且在这里你可以保存当前添加的编辑。
但是这个方法并不适用于使用+所添加的新选择器及其中的元素样式属性。
单个元素的屏幕截图
选中一个元素ctrl-shift-p(Mac上的cmd-shift-p)来打开命令菜单，然后选择Capture node screenshot来为当前选中的元素创建屏幕截图。
使用CSS选择器找寻某个元素
在Elements面板ctrl-f(Mac上的cmd-f)打开搜索框。
在此你可以输入任何字符来找寻与其匹配的代码，同时你也可以通过CSS选择器来让chrome生成一张图片。
在Console面板使用shift-enter
在Console面板shift-enter可以为多行命令换行。
而enter可以在脚本的末尾执行这些命令。
清空Console
你可以使用Console面板左上角的CLear按钮来清空Console，或者ctrl-l(Mac上的cmd-k)来清空。
跳转
在Sources面板：
ctrl-o(Mac上的cmd-o)展示所有被页面加载的文件ctrl-shift-o(Mac上的cmd-shift-o)展示当前文件中的特性、函数、类的标记ctrl-g(Mac上的cmd-g)跳转至具体位置
监视表达式
相对于在debug阶段将一个变量名或表达式输入一遍又一遍，将它们添加入Watch Expression不失为一个好办法。
XHR/Fetch的debug
从debugger面板打开XHR/Fetch Breakpoints。
你可以在XHR/Fetch请求发送过程中的任何时间设置断点来调试，或者在具体的某个位置。
在DOM修改时的debug
右键单击一个元素然后选择Break on Subtree Modifications：每当脚本遍历元素子项并且改变它们时，debugger会自动停止以方便你监视现在的改变。