Chrome调试：定位修改document.location.hash的异步操作来源

当然可以！Chrome DevTools有几个超实用的功能，能帮你精准揪出异步修改hash的代码，我一步步教你怎么做：

方法1：用属性拦截器强制触发断点 #

这招最直接，能在hash被修改的瞬间立刻暂停代码执行：

• 打开Chrome DevTools的Console面板
• 粘贴并运行这段代码：

  Object.defineProperty(window.location, 'hash', {
    set: function(newHash) {
      debugger; // 这里会自动触发断点
      // 保留原有的hash修改逻辑，不影响页面正常运行
      const originalSetter = Object.getOwnPropertyDescriptor(window.location, 'hash').set;
      originalSetter.call(window.location, newHash);
      return newHash;
    }
  });
  

• 刷新页面，一旦有代码试图修改hash，DevTools会自动跳转到Sources面板，此时看右侧的Call Stack（调用栈），就能顺着找到触发修改的源头代码了。

方法2：使用DOM属性修改断点 #

hash变化会间接关联到<html>标签的href属性，我们可以监听这个属性的修改：

• 打开DevTools的Elements面板
• 在左侧DOM树里找到最顶层的<html>标签，右键点击它
• 选择Break on -> Attribute modifications
• 刷新页面，当hash被修改时，调试器会自动暂停，此时通过调用栈就能定位到修改代码。

方法3：给已添加的监视项加“值变化断点” #

既然你已经添加了document.location.hash的监视项，直接利用它就行：

• 切换到Sources面板，找到右侧的Watch面板
• 右键你添加的document.location.hash监视项，选择Break on value change
• 刷新页面，当hash值发生变化时，调试器会立刻暂停，此时查看调用栈就能找到修改的源头。

如果知道大概的代码范围，还可以在Sources面板里给可疑代码行设置条件断点，输入比如document.location.hash === '#target'这样的条件，进一步缩小排查范围。

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