参考文章：https://segmentfault.com/a/1190000000683599 ----比较全，很赞。
一、进入开发者模式
第一“按F12”，第二：shift+ctrl+i
二、Google Chrome一共提供了8大组工具：
Elements: 允许我们从浏览器的角度看页面，也就是说我们可以看到chrome渲染页面所需要的的HTML、CSS和DOM(Document Object Model)对象。此外，还可以编辑这些内容更改页面显示效果；
Network: 可以看到页面向服务器请求了哪些资源、资源的大小以及加载资源花费的时间，当然也能看到哪些资源不能成功加载。此外，还可以查看HTTP的请求头，返回内容等；
Sources: 主要用来调试js；
Timeline: 提供了加载页面时花费时间的完整分析，所有事件，从下载资源到处理Javascript，计算CSS样式等花费的时间都展示在Timeline中；
Profiles: 分析web应用或者页面的执行时间以及内存使用情况；
Resources: 对本地缓存（IndexedDB、Web SQL、Cookie、应用程序缓存、Web Storage）中的数据进行确认及编辑；
Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；
Console: 显示各种警告与错误信息，并且提供了shell用来和文档、开发者工具交互。
三、[Network]
有时候我们的网页加载的很慢，而相同网速下，其他网页加载速度并不慢。这时候就得考虑优化网页，优化前我们必须知道加载速度的瓶颈在哪里，这个时候可以考虑使用Network工具。下图为我的博客首页加载时的Network情况：
请求的每个资源在Network表格中显示为一行，每个资源都有许多列的内容(如红色区块1)，不过默认情况下不是所有列都显示出来。
Name/Path: 资源名称以及URL路径；
Method: HTTP请求方法；
Status/Text: HTTP状态码/文字解释；
Type: 请求资源的MIME类型；
Initiator解释请求是怎么发起的，有四种可能的值：
Parser：请求是由页面的HTML解析时发送的；
Redirect：请求是由页面重定向发送的；
Script：请求是由script脚本处理发送的；
Other：请求是由其他过程发送的，比如页面里的link链接点击，在地址栏输入URL地址。
Size/Content: Size是响应头部和响应体结合起来的大小，Content是请求内容解码后的大小。进一步了解可以看这里[Chrome Dev Tools - “Size” vs “Content”](http://stackoverflow.com/questions/8072921/chrome-dev-tools-size-vs-content)；
Time/Latency: Time是从请求开始到接收到最后一个字节的总时长，Latency是从请求开始到接收到第一个字节的时间；
Timeline: 显示网络请求的可视化瀑布流，鼠标悬停在某一个时间线上，可以显示整个请求各部分花费的时间。
以上是默认显示的列，不过我们可以在瀑布流的顶部右键，这样就可以选择显示或者隐藏更多的列，比如Cache-Control, Connection, Cookies, Domain等。
我们可以按照上面任意一项来给资源请求排序，只需要单击相应的名字即可。Timeline排序比较复杂，单击Timeline后，需要选择根据Start Time、Response Time、End Time、Duration、Latency中的一项来排序。
红色区块2中，一共有6个小功能：
Record Network Log: 红色表示此时正在记录资源请求信息；
Clear: 清空所有的资源请求信息；
Filter: 过滤资源请求信息；
Use small resource raws: 每一行显示更少的内容；
Perserve Log: 再次记录请求的信息时不擦出之前的资源信息；
Disable cache: 不允许缓存的话，所有资源均重新加载。
选择Filter后，就会出现如红色区块3所显示的过滤条件，当我们点击某一内容类型(可以是Documents, Stylesheets, Images, Scripts, XHR, Fonts, WebSockets, Other)后，只显示该特定类型的资源。在XHR请求中，可以在一个请求上右键选择“Replay XHR”来重新运行一个XHR请求。
有时候我们需要把Network里面内容传给别人，这时候可以在资源请求行的空白处右键然后选择Save as HAR with Content 保存为一个HAR文件。然后可以在一些第三方工具网站，比如这里重现网络请求信息。选定某一资源后，我们还可以Copy as cURL，也就是复制网络请求作为curl命令的参数，详细内容看 Copying requests as cURL commands
此外，我们还可以查看网络请求的请求头，响应头，已经返回的内容等信息，如下图：
资源的详细内容有以下几个：
HTTP request and response headers
Resource preview: 可行时进行资源预览；
HTTP response: 未处理过的资源内容；
Cookie names and values: HTTP请求以及返回中传输的所有Cookies；
WebSocket messages: 通过WebSocket发送和接收到的信息；
Resource network timing: 图形化显示资源加载过程中各阶段花费的时间。
网友评论