如何定位触发模态对话框的Javascript代码？可借助Chrome DevTools调试

可以通过Chrome DevTools的以下几种设置实现需求：

• DOM变更断点（最通用方案）
  模态框弹出必然伴随DOM节点的插入、属性修改操作，你可以按以下步骤设置：

1. 打开DevTools的「Elements」面板，找到你现在能排查到的模态框对应的元素，或是模态框大概率会插入的父容器（比如<body>节点）
2. 右键对应节点，选择Break on，根据弹窗的特性选择对应断点类型：
   • 若模态框是动态插入到页面的，选择subtree modifications（子树变更）
   • 若模态框本身已存在于页面、只是从隐藏状态切换为显示，选择attribute modifications（属性变更）
     设置完成后，只要有代码操作对应节点触发变更，DevTools就会自动断在执行操作的JS代码行，你可以通过调用栈回溯定位到触发弹窗的具体插件代码。如果断点停在了jQuery核心库的代码中，可以右键jQuery的脚本文件选择Blackbox Script屏蔽库文件，后续断点会直接跳转到业务/插件代码层面。

• 函数断点（针对已知弹窗方法）
  如果你的项目用了常见的jQuery弹窗插件，可以直接在Console面板给对应弹窗方法加断点：

// 针对jQuery UI dialog插件
debug(jQuery.fn.dialog)
// 针对原生alert/confirm
debug(window.alert)
// 针对其他第三方弹窗组件，替换为对应方法即可
debug(bootbox.alert)

对应方法被调用时就会自动触发断点。

• 事件断点（针对用户交互触发的弹窗）
  如果弹窗是在点击、提交表单等操作后触发，可以在DevTools的「Sources」面板右侧找到「Event Listener Breakpoints」，展开对应事件分类（比如Mouse -> click）勾选对应事件，触发操作后就会进入断点，逐步跟进即可找到弹窗逻辑位置。

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