chrome-devtools 调试技巧
这里列举一些能提高开发者效率的chrome-devtools调试技巧,暂时列举这么多,后面用到会继续加上.查看chrome-devtools每个版本的新功能点击这里.
简化了本地修改网络响应表头和内容 117
通过自定义修改网络响应表头和内容能让我们在不修改接口的情 况下去模拟返回的数据,这个功能以前就有,但是这次更新简化了操作.
打开DevTools在网络面板中右键一个网络请求选择覆盖内容
第一次打卡会让你选择一个文件夹来存放覆盖的文件,这里选择一个文件夹,然后点击同意就行.
同意后，DevTools 会将您带到Sources > Overrides,这里可以看到刚才网络响应的内容,这里可以直接编辑,然后 command + s 或者 Ctrl + S保存.我们刷新网页就可以看到网络响应内容变成了我们刚才编辑的内容了.
注意到我们编辑了响应内容他的资源显示右下角会有紫色的图标.
取消网络覆盖 Sources > Overrides，可以点击取消 “Enable local overrides” 复选框，或者点击旁边的 Clear 图标.
这里用动图展示下修改过程,以及取消这次的网络覆盖.
覆盖XHR的内容和重新请求 67
这个是67版本就发布了的功能,当我们需要修改请求头,内容重新发起请求时,可以右键网络 Copy > Copy As Fetch,就会生成fetch()请求的等效代码.需要修改请求时,只需将其粘贴到控制台上修改然后点击enter就可以重发你的请求.
console
console面板 $ 符号使用
我们在元素面板选中一个元素后,可以看到选中的元素后面有一个$0标识符号,在console面板直接输入$0然后点击回车就可以看到当前选中的元素被打印到控制台上面了.
console.table
在控制台将数据以表格的形式打印出来.表格的第一列是 index。如果数据 data 是一个数组，那么这一列的单元格的值就是数组的索引。如果数据是一个对象，那么它们的值就是各对象的属性名称。点击表头可以对表哥进行排序.
console.dir
这个方法也是打印一个对象,但是在打印DOM结构时,打印出来的是元素的属性
console.time/timeLog/timeEnd
time开启一个计时器,timeLog打印出开启计时器到现在的时间,timeEnd停止计时器显示开启到停止的时间.
console.time('answer time')
alert('Click to continue')
console.timeLog('answer time')
alert('Do a bunch of other stuff…')
console.timeEnd('answer time')
在浏览器控制台输入这段代码,输出显示用户关闭第一个警报框所花费的时间，然后是用户消除两个警报所花费的累积时间.