前端开发神器之chrome 综述

作为前端工程师，也许你对chrome开发工具不陌生，但也谈不上对各个模块有深入了解。
本文主要是为chrome开发工具使用这个系列做个开篇。
参考资料：
谷歌开发者： https://developers.google.com/web/tools/chrome-devtools
极客官网：http://wiki.jikexueyuan.com/project/chrome-devtools/tips-and-tricks.html
chrome 系列
Chrome开发者工具不完全指南（一、基础功能篇）
Chrome开发者工具不完全指南（二、进阶篇）
Chrome开发者工具不完全指南：（三、性能篇）
Chrome开发者工具不完全指南（四、性能进阶篇）
Chrome开发者工具不完全指南（五、移动篇）
Chrome开发者工具不完全指南（六、插件篇）

打开方式快捷键：ctrl+shift+I或F12
chrome九大面板：elements、console、 sources 、network、 timeline 、profiles、resources、audits、security（新增）
1、elements 面板：—— 审查元素
允许我们从浏览器的角度看页面，可以查看chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象，并提供实时编辑保存显示功能。
在Element中主要分两块大的部分：HTML结构窗格和DOM样式、布局计算结果、事件监听、结构窗格

2、console面板:—— 记录输出诊断信息
显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。使用控制台编程接口提供的方法来记录诊断信息。如 console.log()或console.profile() 。

3、 source —— javascript调试
主要作为js调试，帮助开发者快速发现问题的原因和并找出有效的解决方法

4、network:—— 提高网络加载性能
可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看所有资源的HTTP的请求信息，返回内容等；
通过提供的网页相关已经下载和加载过的资源的详细分析，可以在优化页面的基本过程中，确定和找到那些请求通常要比预计的时间更长。

5、audit 审计 —— 页面加载建议
审计面板可以像加载页面时那样分析一个页面。然后提供关于减少页面加载时间的建议和优化，以此提高响应速度的优化方案。要进一步的了解该功能，推荐使用 pagespeed 。

6、Timeline —— 提高渲染性能
提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中

7、Profiles面板—— 分析JavaScript 和 CSS 的性能
分析web应用或者页面的执行时间以及内存使用情况，允许您为网络应用程序或页面配置执行时间和内存使用量。这些有助于你理解资源的消耗，以帮助你优化你的代码。
提供的分析器有：
a、 CPU 分析器 会显示你页面上的 JavaScript 函数的执行时间
b、 堆内存分配器 显示页面的 JavaScript 对象和 DOM 节点。
c、 JavaScript 配置文件会显示脚本的执行时间。

8、Resources 资源面板—— 存储监视
允许你监视页面中加载的资源。它可以让你使用 HTML5 的本地存储，数据库，缓存，appcache

9、security

总结：当然chrome 功能模块不仅限于此，除了以上几个面板，开发者工具还提供了Emulation功能，做移动开发时特别有用。