Javascript [21天] 前端开发chrome调试技巧

0

[21天] 前端开发chrome调试技巧

阅读:227 时间:2022年06月06日

一、一键重新发起请求前端与后端联调时,最常见的就是后端反复的说:你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。...

一、一键重新发起请求

前端与后端联调时,最常见的就是后端反复的说:你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。

  1. 按F12打开控制台选中Network标签

  2. 找到Fetch/XHR 类型下我们刚发过的请求

  3. 右键点击 Replay XHR命令

 微信截图_20220606094713.jpg

那如果要调整一个参数呢?

二、修改请求信息后重新发起请求

同上右键请求,选择copy -> copy as fetch

在Console标签中修改请求信息后回车发起新请求

三、复制请求的url、request、response

复制url:

同上右键请求,选择copy -> copy link address

复制request:

选中请求条目,选择Payload标签,在Request内容上右键选择 Copy value 或 Copy object

选择 Store object as global variable 可以将右键对象做为变量在console里直接调用。

微信图片_20220606102840.png

复制response:

同上,选中请求条目,选择Preview标签,在Response内容上右键选择 Copy value 或 Copy object

四、获取Elements调试器选中的dom元素

可以在控制台使用变量$0直接获取

微信截图_20220606104748.jpg

五、dom查找方法别名

我们常用的两个dom查找方法

document.querySelector()

document.querySelectorAll()

比较冗长,在console里,可以使用其别名方法$, $$

$() 方法等效于 document.querySelector()

$$() 方法等效于 document.querySelectorAll()

六、控制台引用上一次执行的结果

可以使用$_变量引用控制台上一次执行的结果

比如我们先执行:

[1,2,3,4].map(item => item**2)

控制台返回

[1, 4, 9, 16]

我们复制返回结果再调试

1, 4, 9, 16].join('-')

如果使用$_变量可以直接

[1,2,3,4].map(item => item**2)
// -> [1, 4, 9, 16]
$_.join('-')
// -> '1-4-9-16'


发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^