前端开发神器之chrome 综述

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

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

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

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

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

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

六、Timeline —— 提升渲染性能
提供了加载页面时花费时间的完整分析，全部事件，从下载资源处处理Javascript，计算CSS样式等花费的时间都展现在Timeline中

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

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

九、security

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