如何在浏览器开发者工具中定位JavaScript全局变量的声明与赋值位置

Chromium系浏览器（Chrome、Edge、Brave、Vivaldi，含正式/金丝雀版） #

• 打开开发者工具（快捷键F12或Ctrl+Shift+I），切换到Sources面板
• 在左侧作用域区域展开Global（全局作用域），找到目标变量后右键点击，选择Show definition（显示定义），直接跳转到变量声明的代码行
• 若直接跳转无效，用断点追踪赋值：
  1. 在控制台输入：Object.defineProperty(window, '你的变量名', { set: function(val) { debugger; } })
  2. 刷新页面，当变量被赋值时调试器会自动触发断点，查看Call Stack（调用栈）就能找到触发赋值的代码位置
• 全局搜索排查：按Ctrl+Shift+F打开全局搜索框，输入变量名，勾选「搜索所有文件」，重点排查var/let/const 变量名、window.变量名 = xxx这类语句

Firefox浏览器（全版本） #

• 打开开发者工具（快捷键F12或Ctrl+Shift+I），切换到调试器面板
• 在左侧作用域区域展开窗口，找到目标变量后右键选择跳转到定义，定位声明位置
• 追踪赋值的方法和Chromium系一致：在控制台执行上述Object.defineProperty代码，刷新后通过调用栈查看赋值触发点
• 全局搜索：按Ctrl+Shift+F打开搜索框，输入变量名，选择「搜索所有文件」，筛选匹配的声明与赋值代码

额外提示 #

• 如果变量是浏览器扩展、第三方脚本注入的，调用栈或搜索结果会显示对应的脚本来源（比如扩展ID、第三方CDN域名）
• 遇到混淆压缩的代码，可点击面板中的「格式化代码」按钮（{}图标），还原可读性后再排查

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