Chrome DevTools之Console&Sources调试

      Console控制台面板和Sources资源面板常在一起被用于调试js代码。

一、查看代码中输出的log

      进入百度首页时，我们可以看到如下log输出

      点击log后面的行数，可以查看输出这段log的源代码

      源代码是被压缩过的，点击左下角的“{}”，可以将代码格式化显示

      同理，还可以使用console的warn、error、table等方法，输出其他类型的log。点击Default levels可以选择需要显示的log类型。

      点击左侧的sidebar图标，可以展开log的输出统计，显示了每种log类型的数量。点击可以过滤出选中类型的log。如下图，一共有9条messages，其中info类型有两条。

      点击clear图标，可以清除所有的log信息。

二、运行js代码，交互式代码调试

      可以把console面板当做编辑器，直接输入js语句，回车即可执行语句（若要换行，可以使用shift+回车），使用 $_ 可以引用控制台前一步操作的返回值。

      还可以直接使用浏览器提供的接口，如输入window。

      使用console.time()方法，可以监听执行某个代码片段的时间，案例如下：

三、Debugger断点调试

      Sources面板下分为几个子面板，主要使用的是page

      page展示当前URL下的所有静态资源，command+P可以搜索打开文件，点击文件前面的行数，可以添加断点。

      此外，也可以直接在代码中插入debugger。

      当程序运行到这段代码的时候，会自动暂停程序的运行，并定位到debugger行。

      鼠标悬浮到代码上，可以查看变量的值

      右侧的图标，从左到右，功能依次是：恢复脚本执行（直接执行代码，不进行断点操作）、跳过下一个函数的执行、进入到下一个函数的执行、跳出函数、单步执行、使断点无效、是否在捕获异常时暂停。

      如点击单步执行，代码进入下一步

      图标下面的功能，从上到下依次是调用的栈、作用域、断点、异步请求断点、DOM断点、全局监听器、事件监听断点。

      在Scope中可以查看当前pause作用域内的变量，且可以直接在console面板中输出变量

      在Event Listener Breakpoints中，可以直接给事件添加断点。以单击事件为例，展开选择mouse→click，当点击页面上的功能时，会在对应的click事件代码处暂停。

      点击第二个面板标签Filesystem，Add folder to workspace与右侧Drop in a folder to add to workspace的功能相同。可以把项目添加到DevTools中，把DevTools当做编辑器使用。

      点击Add folder to workspace会打开文件上传框，选择一个文件夹后DevTools会请求获取访问权限，点击允许，即可添加文件夹到Filesystem中，这时再修改代码，会直接修改本地文件。通过这种方式调试代码，调试完成后不再需要修改源代码。

      点击Sources面板下的最后一个标签Snippets，点击New snippet，可以在右侧添加代码片段，引入额外的库等。

      在新增的snippet右键点击run，即可以执行添加的代码。