前端调试小技巧一、如何改动 tooltip 的样式方法一：在 console 台中输入 setTimeout 随后将

一、如何改动 tooltip 的样式

方法一：在 console 台中输入 setTimeout

setTimeout(() => {
    debugger;
}, 5000)

随后将鼠标 hover 到 tooltip 上等待一会儿，这个 tooltip 就不会消失了

觉得这个方法不优雅就用下面的方法二

方法二：找到触发元素删掉 mouseleave 事件

这个时候你想，万一是通过子元素代理给父元素怎么调试呢

其实照样使用，mouseleave 事件是无法代理的，一般会用 mouseout 事件代替，mouseout 可以代理给父元素

其实关于这个还有个有意思的技巧，就是 csdn 在我们没有登录时，是不让我们 copy，没错，copy 也是一个事件，我们直接选中希望 copy 的地方把元素找到删掉对应的 eventListener 就行

二、如何调试 select-item

当我们展开下拉框组件时，想要针对 item 去调试样式，点击聚焦元素按钮，这个 list 会收起，就很烦

这里我们需要去 more tools 中找到 render 然后勾选下面这个按钮，然后就可以正常调试了

三、一行代码，让页面变成编辑态

控制台输入：document.designMode = "on";

其实跟进入到 element 面板改文案差不多，就是多了种选择，模拟文本超出换行

这里学习的石小石大佬的这篇文章：只需一行代码，任意网页秒变可编辑！大家好，我是石小石！在我们日常工作中，可能会遇到截图页面的场景，有时页面有些内容不符 - 掘金

四、Console 台中手动调用接口

当我们需要反复测试某个 api 接口时，同时不希望通过 ui 操作触发请求，不妨试试这个操作

在 chrome 的 network 中，选择指定接口右键后点击 copy as fetch ，然后放到 console 中就可以调用这个接口了，你也可以分享给团队其他成员去在他的电脑中调用这个接口，不过可能会跨域

还有个 reply xhr 可以让我们直接再次调用接口

五、浏览器直接 mock 接口

应该是 chrome 117 更新的内容，现在应该 chrome 版本 130+

比如掘金热门 juejin.cn/hot/article… 里面 list 接口是 article_rank ，我选中后右键选择 overrides content 然后去修改数据保存到本地，F5刷新，就会生效了

这个 mock 需要 url 唯一性，因此接口若有时间戳放到 url 后面就无法通过这个方法去 mock

注意：第一次使用时需要选择路径去存储我们的 overrides 文件，windows 不要选择 C 盘，可能是权限的原因不生效

六、console.table

针对数组对象，我们在 log 时可以用 table 替换，它的展示会更加直观

七、事件监听器断点

假设我们希望看某个弹窗的触发逻辑，我们又懒得去找代码插入 debugger，我们就可以这样做

包括我们可以在 element 中对特定 dom 添加断点，这个应用场景可能是我们应用了某些三方库不清楚人家是如何操作 dom 的，比如 vue-visual-scroller ，可能会用上这种调试工具

八、console 中的 copy

有时候想把console 中的某些对象的数据结构发给后端，粘贴出来的数据都是不能展开的，用 copy 就能解决这个问题，用法就是 copy(变量)

包括 $ 符号，后面接上 0 - 4 可拿到当前dom，1 就是上一次聚焦的 dom，到 4 一直往后推，不过这个东西的用处我感觉不多，因为 element 页面中本身有个属性，我们可以看得到结构，包括拿到 parentElement、offsetHeight 啥都行

九、alt + click 一键展开所有 dom

有时候有的元素可能被嵌套得很深，我们需要一层一层的去展开，这个时候用这个快捷键就会很方便

前端调试小技巧