浏览器工作原理与实践--Chrome开发者工具：利用网络面板做性能分析

“浏览器中的页面循环系统”模块我们已经介绍完了，循环系统是页面的基础，理解了循环系统能让我们从本质上更好地理解页面的工作方式，加深我们对一些前端概念的理解。

接下来我们就要进入新的模块了，也就是“浏览器中的页面”模块，正如专栏简介中所言，页面是浏览器的核心，浏览器中的所有功能点都是服务于页面的，而Chrome开发者工具又是工程师调试页面的核心工具，所以在这个模块的开篇，我想先带你来深入了解下Chrome开发者工具。

Chrome开发者工具（简称DevTools）是一组网页制作和调试的工具，内嵌于Google Chrome 浏览器中。Chrome开发者工具非常重要，所蕴含的内容也是非常多的，熟练使用它能让你更加深入地了解浏览器内部工作原理。（Chrome开发者工具也在不停地迭代改进，如果你想使用最新版本，可以使用Chrome Canary。）

作为这一模块的第一篇文章，我们主要聚焦页面的源头和网络数据的接收，这些发送和接收的数据都能体现在开发者工具的网络面板上。不过为了你能更好地理解和掌握，我们会先对Chrome开发者工具做一个大致的介绍，然后再深入剖析网络面板。