在控制台中抑制 Chrome“无法加载资源”消息

Question

我正在编写一个脚本，该脚本使用 XMLHttpRequest 来搜索由相对路径定义的文件，方法是尝试根据脚本知道的其他相同域绝对路径解析该相对路径，然后尝试从中加载文件解析的网址。如果遇到 404，我只是尝试将文件相对路径解析为另一个绝对路径，然后重试。对于这个特定的脚本，遇到 404 完全没问题-但是，我的控制台上到处都是“无法加载资源：服务器响应状态为 404（未找到）消息，我想抑制它们。

据我所知，没有要捕获的错误 - 错误情况由 xmlHttpRequest.onreadystatechange 处理程序处理，并且没有 window.onerror。

有什么办法可以抑制这些消息吗？

谢谢

Answer 1

此功能是 去年推出的。您可以在此处启用它：

DevTools

->

Settings

->

General

->

Console

->

Hide network messages

.

另见过滤控制台输出和其他设置在devtools文档中。

Answer 2

在

console.clear()

块或错误处理函数中使用

catch

。 它会在记录后立即清除控制台上的那些请求错误。

请注意

来自 MDN

请注意，在 Google Chrome 中，如果用户在设置中选择了“导航时保留日志”，则 console.clear() 无效。

在 MDN 上阅读更多信息

try {
  var req = new XMLHttpRequest();
  req.open('GET', 'https://invalidurl', false);
  req.send();
} catch(e) {
  console.clear();
}

应该记录这个

GET https://invalidurl/ net::ERR_NAME_NOT_RESOLVED

但它会被清除

Answer 3

如果您使用 web worker 执行 XMLHttpRequest 请求，错误将被记录到 worker 脚本上下文中，因此它们不会出现在控制台上，除非专门选择此上下文进行显示。

Answer 4

唉，无论状态码是 4XX 还是 5XX，浏览器都会在控制台打印网络错误。可以按照康拉德的回答建议过滤错误，但这些错误仍然存在（即它们没有被抑制，只是被过滤）并且如果您再次取消选中复选框它们会重新出现。

为了避免这些错误，最简单的解决方案是不从服务器返回 4XX 响应，但这有点像政客那样撒谎和破坏协议。

客户端的干净解决方案可以通过以下步骤实现：

1。注册一个 service worker 来拦截后台请求

navigator.serviceWorker.register("noerr.js").then(_=> navigator.serviceWorker.controller
    ? window.dispatchEvent(new CustomEvent("swready")) // normal reload
    : navigator.serviceWorker.ready.then(_=> location.reload()) // first load or Ctrl+F5
);

自自定义

swready

事件以来抑制作品。

2。替换 Service Worker 中的 4XX 和 5XX 响应

noerr.js service worker 可以这样写：

self.addEventListener('install', e => {
    self.skipWaiting(); // update even if other tabs are open in the browser
});

const catchResponse = code => new Response(null, {
    status: 204, headers: new Headers({"Status": code})
});

self.addEventListener('fetch', e => e.respondWith(
    fetch(e.request).then(r => r.status>=400 ? catchResponse(r.status) : r)
));

如果服务器响应4XX或5XX，SW拦截请求并按照标准返回202 Accepted状态码：

202 Accepted response status code表示请求已经被接受处理，但是处理还没有完成；事实上，处理可能还没有开始。该请求最终可能会或可能不会被执行，因为在实际进行处理时可能会拒绝该请求。 202 是 non-committal，这意味着 HTTP 以后无法发送异步响应来指示处理请求的结果。它适用于另一个进程或服务器处理请求或批处理的情况。

引用中提到的过程是我们的 ServiceWorker，它在

Status

标头中返回原始 HTTP 状态代码。

例子

window.addEventListener("swready", _=> {
    // suppressing network errors works since now
    fetch("nonexistent.html").then(r =>
        r.headers.get("Status")==404 && console.log("Server says 404")
        // no error appears in browser console
    )
});

window.onerror

为了澄清你的问题，有window.onerror。当响应代码为 4XX 或 5XX 时它不会被触发，因为它仍然是一个有效的响应，而不是错误。只有当服务器没有响应时才会触发错误。

console.clear

console.clear() 不是正确的方法，因为它清除了所有控制台注释，而不仅仅是网络错误。在我的用例中，我想每分钟 ping 服务器以检查它当前是否可用。调试它是一项艰巨的任务：浏览来自 ping 的数千个控制台错误并寻找真正的错误。