Google Devtools

Console 面板应该算是开发中最常用的面板之一，主要用途：一个是查看记录log消息，一个是运行Js代码（表达式）。通过这两个用途，提高页码开发的效率，使得开发更加容易。

Network 面板记录页面所有网络请求。可以查看网页显示所需资源，包括 CSS、JavaScript 和 HTML 文件以及图像。除此之外，可以查看页面所有的XHR请求，记录xhr请求的详细信息。

Sources Panel 记录当前页面所有引用关联的文件资源，通过面板可以查看文件内容、修改文件内容、js调试等。开发过程中最常用来打断点查看任务执行顺序进行调试。

Application Panel 主要用来查看检查、修改、调试Web应用程序清单、应用缓存、Web后台服务、页面Frame窗体对象。大部分开发主要用来查看应用会话缓存Cookie和SessionSt

使用Performance 面板来分析页面运行时性能，用来对页面的响应、动画和空闲阶段进行优化。Performance Panel 应该是每个前端开发者都应该了解并会使用

Google版本差异，陆续新增一些新的面板供开发者使用，本文列举一些新面板功能，希望你有所了解，欢迎补充。

本文主要介绍DevTools 中的Memory Panel，可以查看当前网页的内存分配情况，用来排查内存泄漏问题

DevTools 提供强大的Elements Panel 面板，提供整个文档树的查看，开发者可以通过该面板查看节点的样式、属性、层级关系、绑定事件等节点信息，可以对页面内容进行在线编辑，如样式调整、

> DevTools 自带功能强大的命令行功能，本章主要收集常用的命令行以及一些好用的命令行，欢迎留言补充，持续更新。

Chrome开发者工具（简称DevTools）是一组网页制作和调试的工具，内嵌于Google Chrome浏览器中。DevTools使开发者更加深入的了解浏览器内部以及他们编写的应用。通过使用DevT