你不知道的浏览器调试技巧(一)

浏览器调试技巧（一）

1、$0

指代浏览器选中的页面元素节点，配合console.dir 使用可以获取节点对象，具体查看截图

image.png

扩展：（解析不出来，只能用图片代替）

image.png

$ : 选择器，选择单个（类似 document.querySelector）
$$：选择器，选择多个（类似 document.querySelectorAll）
参考

image.png

2、console.clear()

当使用控制台日志过多时，可以用 console.clear() 进行清理

image.png

扩展

console.memory 是属性，可以查看使用的浏览器内存
.time()/timeLog()/timeEnd() 配合可以记录运行到此处代码的时间；

image.png

更多详情看截图：

image.png

3、再次请求&修改参数请求

浏览器 -> F12 ->Network -> 选中某一个请求 -> Replay XHR -> 执行再次请求发送

image.png

浏览器 -> F12 ->Network -> 选中某一个请求 -> Copy -> Copy as fetch -> 切换到Console -> 粘贴 -> 可以得到fetch 下的url请求体，能够进行修改并回车进行请求（Network 会出现此请求）

image.png