如何在Chrome DevTools中查找JavaScript触发的HTML导航触发点？

当然有办法！Chrome DevTools提供了好几组工具，专门用来追踪这种藏在JS里的页面导航行为，我给你梳理几个最实用的方案，按优先级来：

这是最直接的方式，不管是JS修改location、调用History API，还是任何方式触发的页面跳转，都会被暂停：

• 打开Chrome DevTools（按F12或右键页面选「检查」）；
• 切换到Sources面板，在右侧的「Breakpoints」区域，勾选「Pause on navigation」（部分版本显示为「Pause before loading a new page」）；
• 触发你说的AJAX操作，当页面即将跳转时，DevTools会自动暂停，此时看右侧的「Call Stack」（调用栈），从下往上排查，就能找到项目代码里触发导航的那一行（注意跳过jQuery等第三方库的调用栈，找你自己项目的文件）。

如果是用history.pushState或history.replaceState触发的路由导航（很多SPA会这么做），可以直接给这两个方法加断点：

• 切换到DevTools的Console面板，输入以下命令并回车：

  debug(window.history.pushState);
  debug(window.history.replaceState);
  

• 之后只要代码调用这两个方法，DevTools就会立刻暂停在调用位置，直接定位到触发代码。

既然导航是在AJAX请求后发生的，我们可以给目标AJAX请求加断点，追踪请求完成后的所有操作：

• 在Sources面板的左侧，找到「XHR/fetch Breakpoints」，点击「+」按钮；
• 输入你要监控的AJAX请求的URL关键词（比如接口路径里的/api/data），回车添加断点；
• 触发操作，当这个AJAX请求完成时，DevTools会暂停，你可以一步步调试后续代码（按F10单步跳过，F11单步进入），看哪一行触发了页面导航。

如果是通过window.location.href、location.replace这类方式触发的跳转，可以用这个技巧强制断点：

• 在Console面板输入这段代码：

  Object.defineProperty(window, 'location', {
    set: function(val) {
      debugger; // 当location被修改时触发断点
      return val;
    }
  });
  

• 之后只要有代码试图修改location，就会立刻暂停，直接看到修改的来源。

• 暂停后，在「Call Stack」里右键点击第三方库的调用栈（比如jQuery的代码），选「Blackbox Script」，这样后续调试会自动跳过这些库的代码，只关注你项目的代码；
• 可以在DevTools的Search面板（按Ctrl+Shift+F）搜索window.location、history.pushState、location.href这些关键词，快速找到项目中所有可能触发导航的代码位置。

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