前端：chrome调试页面时如何查看对某个复选框有影响的js代码有哪些？

一，步骤：

如果这个复选框被点击时会触发某些 JS 逻辑，或者有代码在监听它的变化，可以直接查看它身上绑定了哪些事件。

1. 在 Elements 面板中选中该复选框。

2. 在右侧的子面板中，切换到 “Event Listeners”（事件监听器） 标签页。

3. 展开 change 或 click 事件（复选框最常绑定的事件）。

4. 你会看到绑定在该元素上的 JS 函数。点击后面的文件名和行号（例如 main.js:123），就能直接跳转到具体的 JS 代码位置。
   💡 小提示： 如果框架（如 jQuery, Vue, React）对事件进行了封装，你看到的可能是框架的源码。

此时可以勾选右上角的 “Framework onionskin / Toggle framework listeners”，或者展开后看 [[FunctionLocation]] 来寻找业务代码。

二，示意图