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,即可以执行添加的代码。