Javascript [21天] 前端开发chrome调试技巧
0
[21天] 前端开发chrome调试技巧
一、一键重新发起请求前端与后端联调时，最常见的就是后端反复的说：你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。...
一、一键重新发起请求
前端与后端联调时，最常见的就是后端反复的说：你操作一下再发个请求我下个断点看一下。但是对于前端来说可能要在页面上鼓捣半天才能达到指定的接口发起(即使用PostMan等工具也很麻烦不是)。这个痛点chrome早已经为我们想到并解决了。可以一键重发请求。
按F12打开控制台选中Network标签
找到Fetch/XHR 类型下我们刚发过的请求
右键点击 Replay XHR命令
那如果要调整一个参数呢？
二、修改请求信息后重新发起请求
同上右键请求，选择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里直接调用。
复制response:
同上，选中请求条目，选择Preview标签，在Response内容上右键选择 Copy value 或 Copy object
四、获取Elements调试器选中的dom元素
可以在控制台使用变量$0直接获取
五、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'
