vue 跳转到选项卡_使用 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

 相关推荐

JavaScript 启动性能瓶颈分析与解决方案

从零看清Node源码createServer和负载均衡整个过程

【项目实战】sass使用进阶篇(下)

【项目实战】sass使用基础篇(上)

最详细的从零开始配置 TypeScript 项目的教程

5 款非常好用的开源 Docker 工具

WebSocket 全面知识补全

7个处理JavaScript值为undefined的技巧

immutablejs 是如何优化我们的代码的？

Chrome 新功能尝鲜！— CSS Overview

又一个布局利器， CSS 伪类 :placeholder-shown

封装一个vue视频播放器组件

对于组件的可重用性，大佬给出来6个建议

学习 TS 不要错过的八个工具

Node 中的全链路式日志标记及处理

使用 Node 开发服务器项目时如何高效地打日志？

用TypeScript学设计模式(享元模式)

用TypeScript学设计模式(模板方法模式)

TypeScript 设计模式之适配器模式

用TypeScript学设计模式(观察者模式)

用TypeScript学设计模式(单例模式)

点在看的人特别帅/美