Chrome Sources窗口JS局部变量无法更新及threadID修改问题咨询

• 变量名显示为n是因为生产环境的JS代码经过了压缩混淆，变量名被替换成了短字符，若Source Map未正确加载，调试面板就会显示混淆后的变量名
• 直接修改调试面板的n不生效，是因为压缩后的代码存在变量复用、编译器优化等情况，调试面板修改的仅是作用域快照，不会同步到实际运行的调用栈中
• 无法获取$scope是因为AngularJS生产环境默认会执行$compileProvider.debugInfoEnabled(false)，关闭了通过DOM获取scope的调试能力，防止外部轻易读取内部数据

方案1：本地开发环境调试（优先推荐） #

关闭代码压缩混淆配置，开启Source Map生成，此时Sources面板会显示未压缩的原始代码，变量名正常为threadID，修改后可直接生效，也可直接获取$scope调用方法。

方案2：手动调用接口绕过变量修改 #

1. 在messagesApi.getMessages执行的行位置打上断点
2. 触发retrieveThreadMessages执行，断点停下后直接在控制台执行你需要的参数调用：

messagesApi.getMessages({ 
  companyReference: 替换为实际的公司参数值, 
  threadID: 替换为你想要修改的目标threadID, 
  markAsRead: true 
}, function success(data) {
  console.log('请求成功', data)
})

3. 跳过原有代码的执行，直接获取修改参数后的请求结果。

方案3：临时开启AngularJS调试权限获取$scope #

1. 在控制台执行angular.reloadWithDebugInfo()，页面会重载并临时开启调试模式，该修改仅对当前会话生效
2. 打开元素面板，找到绑定了ng-controller="threadViewCtrl"的DOM节点，点击选中该节点
3. 控制台执行以下代码即可拿到对应$scope，之后可直接调用方法传参：

const scope = angular.element($0).scope()
scope.retrieveThreadMessages(替换为companyReference值, 替换为目标threadID)

方案4：拦截请求直接修改参数 #

打开Chrome开发者工具Network面板，找到对应请求后右键选择「阻止请求」，再使用「拦截和修改请求」功能，匹配对应接口后直接把threadID参数修改为目标值，后续请求会自动使用修改后的参数。

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