Chrome 开发者工具

Question

chrome 开发者工具很好很强大，此处省略三千字，进入主题。下面主要分两部分内容：

1. 界面及整体功能概览
2. 使用介绍（按个人使用频率对各部分功能分别展开介绍）

界面及功能概览

从下图可以看到，chrome 开发者工具主要由下面几部分组成：

• Element Panel 元素面板，主要查看 dom 元素以及修改样式
• Resource Panel 资源面板，可以查看页面包含的资源，如html页面，js/css文件，cookie，本地缓存等
• Network Panel 网络面板，可以查看网络加载请求，包括静态资源（html/js/css等），还有各种ajax请求云云
• Source Panel 名字比较有迷惑性，其实是脚本调试用的，包括断点、变量监控等
• Timeline Panel 主要用来查看资源加载时间、内存使用情况等，比如js加载、解析花了多少时间，页面渲染* 花了多少时间等
• Profiles Panel 主要监控CPU使用情况、内存使用情况
• Console 大家用得比较多，主要有两个作用，查看调试信息，命令行工具（包括页面脚本引入的，以及工具内置提供的）