前端开发调试 | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 10 天

• 序员的世界中，BUG 一词相信同学们再熟悉不过了，作为一名合格的前端开发人员，应该掌握一些开发调试知识。本篇笔记将记录一些常用的谷歌浏览器调试技巧。
• Chrome 开发者工具 F12 是前端开发、测试人员的利器，使用开发者工具可以非常方便地查看页面元素、源文件、控制台、网络等等。 其中的 Network 类似 fiddler 抓包工具，能够获取请求、响应、缓存等等内容。

console控制台

控制台最常用的功能恐怕就是日志的打印查看了，除了我们常用的console.log还有一些使用的方法

• Console.log()

  • 打印内容的通用方法，使用方法可以参考 string substitution。

• Console.time()

  • 启动一个以入参作为特定名称的计时器，在显示页面中可同时运行的计时器上限为 10,000.

• Console.warn()

  • 打印一个警告信息，可以使用 string substitution 和额外的参数。

• Console.warn()

  • 打印一个警告信息，可以使用 string substitution 和额外的参数。

• Console.table()

  • 将列表型的数据打印成表格。

network

• Controls 控制Network的外观和功能。
• Filters 控制Requests Table具体显示哪些内容。
• Overview 显示获取到资源的时间轴信息。
• Requests Table 按资源获取的前后顺序显示所有获取到的资源信息，点击资源名可以查看该资源的详细信息。
• Summary 显示总的请求数、数据传输量、加载时间信息。