如何查看、理解并修改网页中运行的JavaScript代码及变量？

一、Chrome DevTools 核心操作（解决你找不到实时执行状态的问题） #

你之前可能没用到Sources面板的核心功能，这是Chrome追踪JS执行的关键：

• 打开DevTools：按F12或右键页面→「检查」，切换到Sources标签
• 追踪当前运行的方法：
  • 触发断点后，Call Stack面板会实时显示当前的函数调用链，最顶部的就是正在执行的方法
  • 若要主动监控特定行为（比如点击、AJAX请求），用面板右侧的Event Listener Breakpoints（勾选对应事件，比如Mouse→click）或XHR/fetch Breakpoints，触发时会自动暂停，直接查看当前执行的函数
• 检查实时变量：
  • 代码暂停时，Scope面板会展示当前作用域的所有变量（局部、全局、闭包变量），鼠标悬停在代码中的变量上也会实时弹出值
  • 用Watch面板添加要持续监控的变量/表达式，页面运行时会自动更新值
• 修改运行中的代码：
  • 用Ctrl+P搜索目标JS文件名，打开后直接编辑代码，按Ctrl+S保存，页面会立即应用修改（多数场景无需刷新）
  • 遇到混淆代码时，点击面板底部的**{}**（Pretty Print）按钮格式化，方便编辑

二、进阶实时监控技巧 #

• Live Expressions：在Console面板点击眼睛图标，输入要监控的表达式（比如window.currentUser），它会在页面运行时实时更新值，无需暂停代码
• 条件断点：右键代码行设置断点时，添加条件（比如count > 50），只有满足条件才会暂停，避免频繁打断执行
• 黑名单脚本：把第三方脚本（如jQuery、统计脚本）加入Blackbox Scripts，避免调试时被无关代码干扰

三、可选替代工具 #

• Firefox DevTools：Debugger面板的调用栈和变量展示更直观，对动态加载脚本的解析兼容性更好
• VS Code + Debugger for Chrome插件：可在编辑器内直接调试网页JS，设置断点、监控变量，适合长期代码修改场景

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