如何捕获浏览器控制台显示的异常？HTTP链接返回200却无法访问

这个问题我之前帮不少开发者解决过——HTTP 200只能说明服务器成功返回了响应，但页面能不能正常访问，还得看前端资源加载、JS执行、DOM渲染这些环节有没有出问题。这些问题不会改变主文档的HTTP状态码，但会在浏览器控制台抛出异常，导致页面功能失效。下面是几种实用的捕获方法：

1. 捕获JavaScript运行时错误 #

大部分同步JS错误可以通过全局事件监听捕获：

// 用window.onerror捕获基础JS错误
window.onerror = function(message, source, lineno, colno, error) {
  console.log(`JS执行错误：${message}，来源文件：${source}，行号：${lineno}`);
  // 这里可以把错误信息上报到你的测试系统
  return true; // 阻止浏览器默认的错误提示
};

// 或者用addEventListener更灵活
window.addEventListener('error', function(event) {
  if (event.error) {
    console.log(`捕获到错误：${event.error.message}`);
  }
});

注意：这种方法抓不到异步Promise的未处理拒绝，得单独处理。

2. 捕获Promise未处理的拒绝 #

如果页面里有Promise链没加.catch()，会触发unhandledrejection事件：

window.addEventListener('unhandledrejection', function(event) {
  console.log(`Promise拒绝未处理：${event.reason}`);
  event.preventDefault(); // 关掉浏览器默认的控制台警告
});

3. 捕获资源加载失败 #

比如图片、CSS、第三方脚本加载失败，即使主文档是200，这些资源出问题也会导致页面异常。你可以全局监听或者针对特定元素监听：

// 全局捕获所有资源加载错误（图片、脚本、CSS等）
window.addEventListener('error', function(event) {
  // 判断是不是元素加载错误
  if (event.target instanceof HTMLImageElement || 
      event.target instanceof HTMLScriptElement ||
      event.target instanceof HTMLLinkElement) {
    console.log(`资源加载失败：${event.target.src || event.target.href}，类型：${event.target.tagName}`);
  }
}, true); // 用捕获阶段监听，避免事件被冒泡阻止

// 针对单个元素监听（比如测试特定图片）
const testImg = document.querySelector('.test-image');
testImg.addEventListener('error', () => {
  console.log(`指定图片加载失败：${testImg.src}`);
});

4. 手动测试时用DevTools排查 #

如果是手动验证URL，Chrome DevTools是神器：

• 打开Console面板，勾选「Preserve log」和「Verbose」，这样页面刷新或跳转时不会清空日志，能看到所有错误、警告甚至调试信息。
• 切换到Network面板，筛选「Failed」标签，一眼就能看到哪些资源加载失败，哪怕主文档是200。
• 用Lighthouse工具做全面检测，它会自动列出所有加载错误、JS异常、可访问性问题，帮你定位根本原因。

5. 自动化测试中的异常捕获 #

如果是批量测试URL，用自动化工具（比如Puppeteer、Playwright）可以自动捕获这些异常：
以Puppeteer为例：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 捕获页面JS错误
  page.on('error', (error) => {
    console.log(`页面JS错误：${error.message}`);
  });

  // 捕获未处理的Promise拒绝
  page.on('pageerror', (error) => {
    console.log(`未处理Promise拒绝：${error.message}`);
  });

  // 捕获资源加载失败
  page.on('requestfailed', (request) => {
    console.log(`资源加载失败：${request.url()}，错误原因：${request.failure().errorText}`);
  });

  await page.goto('你的测试URL');
  // 可以等待页面加载完成再做判断
  await page.waitForTimeout(2000);
  
  await browser.close();
})();

总结一下：HTTP 200只是服务器层面的“成功响应”，但页面的可用性取决于前端整个加载和执行流程。通过上面这些方法，你就能把浏览器控制台里的异常都抓出来，从而准确判断URL是否真的能正常访问。

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