Chrome 小技巧

1.断点调试

代码中打debugger

• 点击源码中的代码行（两个效果基本一致）
• 事件监听器断点
  应用场景：快速定位事件发生时对应的代码行
• 条件断点
  应用场景：就在一个比较长的for循环里面(或者轮询)，我们只想看某个特定条件下的断点。

2.快速重发请求

应用场景：在非开发环境中需要快速重发请求时

1. 以fetch格式复制请求
2. 到控制台中手动修改请求参数
   

3.悬停时检测弹窗窗口

检查只在悬停时出现的弹出元素（eg:下拉菜单等）, 这些元素一旦页面失去焦点就会消失，导致检查变得异常困难。

应用场景1：定位hover时才出现的元素的位置
方法：

1. 打开开发者工具，鼠标放在hover时才出现的元素上，然后点击右键；
2. 不要选中任何选项，将鼠标移动到开发者工具的调试面板中；
3. 按下N键，此时悬浮的元素不会消失，定位成功。
   PS:还可以直接右键”检查“

应用场景2：修改悬浮元素的样式
方法：选中元素后，移除 mouseleave 事件的监听器

4.切换颜色格式

应用场景：查看元素颜色时，可以快捷切换颜色的格式。

5.实时表达式

应用场景：可实时输出表达式的值，动态监视某些值

eg：

• window.innerWidth
• document.activeElement
• Date.now()

6.Overrides 直接调试线上代码

应用场景：直接修改线上文件（html，css） or 请求返回

eg：以修改请求返回信息为例
1.找到请求，右键“替换内容”

2.在桌面新建一个空的文件夹

3.允许访问

4.直接修改返回体即可（记得保存）

PS：html 和 css 文件经过编译，修改起来不方便。