chrome高级调试技巧总结

①一键重新发起请求

在与后端接口联调或排查线上BUG时，你是不是也经常听到他们说这句话：你再发起一次请求试试，我这边看下为啥出错了！这个时候，我们正常做法是不是刷新页面，把对应的功能重新操作一下。

不麻烦吗？今天给你推荐一个非常爽的技巧，一定会让你爽到爆

a.在network找到对应的请i去

b.右击鼠标，选择"Replay XHR"

②在控制台快速发起请求

在联调或者修改bug的时候，我们应该有这样的需求，我们需要修改一下入参然后重新发起请求。

比如：后端在找bug时候，会让你把某个字段先写死某一个固定值，这时候我们是不是直接改代码中的请求参数。

又比如：我之前写导出功能的时候，一直出问题，这时候我会判断应该是请求头设置有问题，这时候我们不断调整代码中的请求头，然后重新执行代码去重新发送请求。现在想来自己真实太傻了。

下面来看看chrome的快速修改请求参数神器：

a.打开network

b.找到需要修改参数的请求

c.右击选择”Copy as fetch“

d.粘贴到console，修改请求参数，按回车

e.在network中查看响应结果

③复制JavaScript复杂对象

比如：我们在代码中使用console.log打印复杂的对象时候，他是格式化的，不便于复制给其他人查看。

var obj = {

    "name": "张三",

    "age": 25,

    "gender": "male",

    "edu": "本科"

}

console.log(obj)

为了拷贝：

console.log(JSON.stringify(obj))

现在实现

copy(obj)

④截取一张全屏的网页

对网页截屏的需求我们应该一直都用，一屏还好，系统自带的截屏或者微信截图等都可以办到，但是要求将超出一屏的内容也截下来咋办呢？

不用慌，chrome其实已经给我们准备好了

a.打开要截图的网页

b.cmd + shift + p 执行Command命令

c.输入Capture full size screenshot 按下回车

⑤Add conditional breakpoint条件断点的妙用

我们一定会遇到过，对循环体打断点，这时候会有一个痛点：如果这个循环数据量非常大，

我们需要不断的执行，直到我们想要的那个一条数据。

示例：我想要知道名字是zs5的人的年纪是多大（这里只是一个示例，我们现实中，可能都不知道这个数组中每一条数据有多少个字段，之前我开发gis服务，经常会用到这个条件断点，因为数据量非常大，且每一个点位的数据结构很复杂，这时候这个方法就非常的奏效）

 var list = [           

{name:'zs1',age:12},           

{name:'zs2',age:13},           

{name:'zs3',age:14},           

{name:'zs4',age:15},           

{name:'zs5',age:16},           

{name:'zs6',age:17},           

{name:'zs7',age:18},           

{name:'zs8',age:19},           

{name:'zs9',age:20}]       

list.forEach(item=>{           

   console.log(item.name)       

})

说到这里有的同学可能会说，我直接这样写不就好了：

list.forEach(item=>{             

     if（item.name==='zs8'）{

            debugger

     }

     console.log(item.name)     

})

确实，但是这样写有个不好的地方，这种调试需要修改代码才能实现，而浏览器本来就提供了条件断点，直接使用岂不快哉

⑥$i直接在控制台安装npm包

最后来一个大招

你遇到过这个场景吗？有时候想使用比如dayjs或者lodash的某个API，但是又不想去官网查，如果可以在控制台直接试出来就好了。

Console Importer 就是这么一个插件，用来在控制台直接安装npm包。

使用：

a.安装Console Importer插件

GitHub - pd4d10/console-importer: Easily import JS and CSS resources from Chrome console.

https://www.crx4chrome.com/extensions/hgajpakhafplebkdljleajgbpdmplhie/

b.$i('name')安装npm包

 

更多学习视频学习资料请参考：B站搜索“我们一起学前端”