前端 谷歌 chorme f12开发者工具调试技巧

谷歌调试技巧

• 谷歌调试技巧：
• • 1.快速重复发送请求
  • 2.在控制台调试请求，更改参数，不需回到代码中修改。
  • 3.复制js变量
  • 4.快速选中的元素，输出其html代码。
  • 5.截取滚动页面的长屏幕
  • 6.一键展开html某层级下的全部元素
  • 7.控制台输出上次结果。
  • 8.更换主题颜色。
  • 9.选中某个元素与全部元素.
  • 10.根据条件设置断点。

谷歌调试技巧：

本文是学习b站视频的笔记，视频地址：https://www.bilibili.com/video/BV1q3411n7KW/?spm_id_from=333.788&vd_source=b56a5316b634658238c415c4f648b802。

1.快速重复发送请求

网络—请求右键----重放xhr / network-----replay xhr

2.在控制台调试请求，更改参数，不需回到代码中修改。

网络—请求右键----复制—以fetch格式复制，回到控制台粘贴，调试后回车即发送。

3.复制js变量

在控制台输出后，右键—复制object/或把object保存为全局变量，在控制台可以根据变量名访问。

4.快速选中的元素，输出其html代码。

选中后-----在控制台 $0 (也可以获取它的属性$0.classname等等)

5.截取滚动页面的长屏幕

在控制台，按住ctrl+shift+p，出现运行弹窗，输入screen，选择截取完整尺寸的屏幕。就会下载该图片。

6.一键展开html某层级下的全部元素

按住alt键再单击该层级即可

7.控制台输出上次结果。

通过${}_{，}还可以调用其他方法$.split,$.reverse等。

8.更换主题颜色。

9.选中某个元素与全部元素.

$("h1")选中1个h1,$$("h1")选中全部h1,(我用起来没差别)。
$的本质：document.querySelector，$$就是document.querySelectorall。

10.根据条件设置断点。

源代码--右键设置断点---输入条件断点。v就是item，只有当价格是5880的时候，循环才会遇到断点停下。