不常见但很有用的chrome调试工具使用方法

前面的话

  对于chrome调试工具，常用的是elements标签、console标签、sources标签和network标签。但实际上，还有一些不太常见但相当实用的方法可以提高网页调试效率。本文将详细介绍那些不常见的chrome调试工具使用方法

 

控制台

  在控制台直接输入代码，按下回车键，代码就会被执行。其返回值也会在控制台中被打印出来

  通过上下箭头键，可以随时从相关列表中找回已经执行过的命令，并在控制台中重新执行它们

  通常情况下，控制台只提供单行输入，我们可以用分号做分割符来执行多个javascript语句；而如果需要多行代码的话，可以通过组合键shift+enter来实现换行，在这种情况下代码不会被立即执行

 

刷新

  一般地，人们对于刷新的印象只是停留在使用F5快捷键上。但实际上，刷新包括三种。在开发者调试工具打开的情况下，长按刷新按钮，会出现这三种刷新选项

 

搜索

  在elements标签下使用ctrl+f搜索功能，可以使用css选择器，如'.test'，所以搜索到所有类名为test的元素

 

计算样式

  通过点击elements标签右侧的computed子标签，可以查看元素计算后的样式

 

资源映射

  使用chrome浏览器的sourcemap功能可以将本地的文件和服务器上的文件关联起来。这样，通过chrome的开发者工具调试网页(如更改一个css属性值)时，本地文件的内容也会相应地发生变化并保存。如果再使用sass的watch命令， 在调试sass文件时，就可以实时保存文件并通过浏览器看到效果

  如下图所示，点击map to network resource，把本地文件关联到服务器上相应文件。浏览器会智能地把项目目录下的其他css文件和html文件和服务器上对应的文件都关联起来

 

当前位置

  在elements标签下，选择元素节点，点击右键菜单中的scroll into view，可以滚动浏览器到元素所处位置

 

代码反压缩

  一般地，线上的javascript代码都是经过压缩的，基本上无法直接阅读。点击下方的大括号｛｝图标，浏览器会反压缩过重新排版美化当前的javascript代码

 

断点调试

【按钮介绍】

第一个按钮(F8)：断点间调试
第二个按钮(F10)：单步调试
第三个按钮(F11)：进入函数
第四个按钮(shift+F11)：离开函数
第五个按钮(ctrl+F8)：取消全部断点

【文件搜索】

  搜索要进行断点调试的文件，使用ctrl+o即可调出搜索框

【添加watch】

  要将变量或函数添加到watch中，只需进行如下操作

【删除全部断点】

  在右侧断点区域(breakpoints)点击鼠标右键，选择(remove all breakpoints)即可