使用 DevTools 新增的 Issues 选项卡发现网页问题

你是否有过被 Chrome 控制台的各种警告和错误支配的恐惧？大量的信息让我们难以找到网页的真正问题以及我们想要的信息。

DevTools 新增的 Issues 选项卡是帮助你查找和修复网页问题的新办法。浏览器检测到的问题会和控制台分开并以结构化展示，它用简明的语言描述了问题的信息以及解释问题的方法。

我们可以找到一个有报错的页面来试一下：

点击 Go to Issues 按钮，或者也可以在 More tabs 中找到 Issues 选项卡：

Issues 选项卡汇总了不同类型的问题，让我们的控制台更加简洁，第一版的 Issues 选项卡支持检测三种问题：

• Cookie 问题：一般是 SameSite 属性设置的问题
• Cross-Origin-Embedder-Policy 问题，详细可以了解我这篇文章：新的跨域策略：使用COOP、COEP为浏览器创建更安全的环境
• 混合内容问题：HTTPS 站点中加载了 HTTP 资源

未来版本中还会加入更多问题。

我们可以打开一个问题的详情：

可以看到问题的标题、问题的背景、以及问题的解决方案。

另外，还能看到具体受影响的资源：

点击具体的一个资源，可以跳转到这个资源的详情，悬浮在资源上面，也能看到问题解决的详情：

很实用的新工具，赶快用起来吧！ 了解更多：https://www.youtube.com/watch?v=1TbkSxQb4bI

点赞、在看、转发支持作者❤️