如何使用Chrome开发者工具审查jQuery UI autocomplete组件的样式

方案1：延时触发元素选择 #

• 先在页面输入内容唤起autocomplete下拉弹窗，保持弹窗处于显示状态
• 立刻按下元素审查快捷键Ctrl+Shift+C（Windows/Linux）或Command+Shift+C（Mac），稍等片刻后再移动鼠标到弹窗上选中目标元素即可。该方案利用Chrome元素选择模式启动的短暂延迟，避开弹窗的失焦关闭逻辑。

方案2：通过事件断点阻止弹窗关闭 #

弹窗自动消失是因为触发了输入框失焦blur事件或全局点击事件，你可以通过事件断点暂停页面交互，保持弹窗显示：

• 打开Chrome开发者工具，切换到「源代码」面板
• 展开右侧「事件监听器断点」列表，找到「鼠标」分类，勾选click和blur两个事件
• 回到页面唤起autocomplete弹窗，此时点击任意位置都会触发断点暂停页面执行，弹窗不会消失，你可以切换回「元素」面板直接审查弹窗样式
• 审查完成后取消勾选的事件断点即可恢复页面正常交互

方案3：临时修改组件配置强制弹窗常驻 #

你可以在代码中添加临时配置，阻止autocomplete的关闭事件：

$("你的autocomplete选择器").autocomplete({
  close: function() {
    return false;
  }
});

添加后刷新页面，唤起的弹窗会一直保持显示，可直接进行样式审查，调试完成后删除这段临时代码即可。

提示：如果仅需要调整基础样式，jQuery UI 1.12版本的autocomplete下拉弹窗默认挂载.ui-menu类，下拉项默认挂载.ui-menu-item类，直接修改这两个类的CSS规则即可覆盖默认样式。

内容的提问来源于stack exchange，提问作者dfrankow