不常见但颇有用的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)便可