使用浏览器检查工具进行交互检查

遇到的问题

在网页开发的过程中经常有一个难题，就是如何审查具有交互的元素，比如下图这个菜单，我们想修改或者 debug 下拉菜单的样式就非常困难，因为一旦鼠标移动出菜单的范围，下拉菜单立刻消失。

今天我们就来解决这个问题。

交互式难题的分类

我们根据鼠标触发方式不同，大致分为以下四种交互：

1. click
2. hover
3. focus
4. contextMenu

我做了个 demo，也可自己手动尝试：

click 方式触发的交互，调试比较简单，没啥特别的，问题比较大的是 2、3、4 触发的交互如何调试。

debugger 方式

这个解决方法比较通用。我们只需要在控制台输入 setTimeout(() => { debugger; }, 1000 * 3)，然后再去触发交互即可。

模拟 focus

对于鼠标 focus 触发的交互，我还以为通过 devtools 的 emulate a focused page 功能来解决。

1. 打开开发者工具（devtools）
2. run command 模式

3. 直接输入 Rendering 调试出 Rendering 面板
4. 找到 emulate a focused page

先触发一次 focus，再点击 Emulate a focused page 的复选框即可模拟 focus。

DOM 断点

其实这个方法也比较通用，但是因为现在的项目比较大，DOM 结构比较复杂比较难定位，所以较少使用。

案例 3 演示：

触发效果：

总结

交互式 UI 调试比较困难，目前我们有三种比较好的办法：

1. debugger
2. emulate a focused page
3. DOM 断点

三种方法虽然都能进行 UI 调试，但只有通过 emulate a focused page 演示的页面没有任何干扰，另外两种方法进入调试模式页面都会变灰。emulate a focused page 的缺点就是只能模拟 focus 时间，对于 hover 和 contextMenu 引发的 UI，毫无办法。

小彩蛋

演示 emulate a focused page 功能的时候，你仔细看的话，emulate a focused page 下面还有很重要的功能——enable automatic dark mode。可以进行暗黑模式调试，不用手动写死代码这着实方便了不少。

参考

• Apply other effects: enable automatic dark theme, emulate focus, and more

题目由 ChatGPT 赞助。