你不知道的浏览器调试技巧(一)
2022-05-09 本文已影响0人
suliang2010
浏览器调试技巧（一）
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
