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

Question

我正在编写一个脚本,该脚本使用XMLHttpRequest来搜索由相对路径定义的文件,尝试解析该脚本可识别的其他相同域绝对路径的相对路径,然后尝试从已解析的文件中加载该文件网址.如果我遇到404,我只是尝试将文件相对路径解析为另一个绝对路径,然后再试一次.对于这个特殊的脚本,它完全可以遇到404-然而,我的控制台上到处都是"无法加载资源:服务器响应状态为404(未找到)消息,我想要抑制它们.

据我所知,没有错误可以捕获 - 错误情况由xmlHttpRequest.onreadystatechange处理程序处理,并且没有window.onerror.

有没有办法压制这些消息？

谢谢

Answer 1

这个功能是去年推出的.您可以在此处启用它:DevTools- > Settings- > General- > Console- > Hide network messages.

另请参阅在devtools文档中过滤控制台输出和其他设置.

Answer 2

唉，无论如何，如果状态代码是 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.替换serviceworker中的4XX和5XX响应

noerr.js 服务工作者可以这样写：

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

const proxyResponse = orig => orig.status<400 ? orig : new Response(null, {
    status: 202,
    statusText: "Accepted",
    headers: new Headers({
        "Status": orig.status,
        "StatusText": orig.statusText
    })
});

self.addEventListener('fetch', e => e.respondWith(
    fetch(e.request).then(proxyResponse)
));

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

202 Accepted响应状态码表示请求已被接受处理，但处理尚未完成；事实上，处理可能还没有开始。该请求最终可能会或可能不会被执行，因为在实际处理时可能会拒绝该请求。202 是非承诺的，这意味着 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
    )
});

现在，正确的方法不是console.log，而是throw在响应被认为是错误的情况下，并可选择稍后捕获它（未捕获的异常会升级为控制台错误）。

无缝解决方案

为了实现这一点，我们可以编写一个fetch2类似于fetch()的函数，但不会在 4XX 和 5XX 上写入控制台错误：

const fetch2 = (req, opt) => fetch(req, opt).then(res =>
    res.status!=202 ? res : new Response(null, {
        status: res.headers.get("Status"),
        statusText: res.headers.get("StatusText"),
        headers: res.headers
    })
);

// receives the response body or false if not ok
// called on any response including 4XX or 5XX
function responseHandler(body) { ... }

// called when the server does not respond
// or if the responseHandler throws
function serverError(errorEvent) { ... }

// never generates console.error
fetch2("nonexistent.html")
.then(r => r.ok && r.text())
.then(responseHandler)
.catch(serverError)

窗口错误

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

控制台.清除

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

Answer 3

使用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();
}

应该记录这个

获取https://invalidurl/ net::ERR_NAME_NOT_RESOLVED

但它会被清除。