Chrome调试工具

发表于   |   分类于   |     |   次阅读

Chrome Developer Tools是一件非常棒的艺术品。

Chrome DevTools Overview


Elements：查看和编辑当前页面中的 HTML 和 CSS 元素。标签页的左侧就是对页面HTML结构的查看与编辑，
                          可以直接在某个元素上双击修改元素的属性，右侧可以对元素的CSS进行查看与编辑修改。
Console：用于显示异常错误信息，脚本中所输出的调试信息，或运行测试脚本等。
Sources：查看和调试当前页面所加载的脚本的源文件。
Network：监控当前网页所有的http请求的面版，主体部分展示每个http请求，每个字段表示着该请求的不同属性
                         和状态，当点击某一个具体请求URL，可以看到该请求的详细HTTP请求情况：

1. Headers:  请求头信息和响应头信息
2. Preview:  预览结果，如果是文件可以查看这个文件；如果是图片可以预览这个图片；如果是从服务器返回来的JSON数据，可以查看格式话后的JSON
3. Response:  从服务器返回的响应结果
4. Cookies:  请求和响应的Cookie
5. Timing:  具体的响应时间

Timeline：查看脚本的执行时间、页面元素渲染时间等信息。提供了对于在加载Web应用的过程中，时间花费情况
                        的概览，包括处理DOM事件, 页面布局渲染和向屏幕绘制元素。
Profiles：查看 CPU 执行时间与内存占用等信息。
Resources：展示了当前页面所加载的资源列表，比如HTML、CSS。还有Cookie和Local Storage 、Session 等本地
                            存储信息，并且可以自由地修改、增加、删除本地存储。
Audits：用于优化前端页面，加速网页加载速度等。

Chrome 调试小技巧

a. 文件快速切换 用快捷键Ctrl + P (Mac 上Cmd + P)就可以快速查找你的工程文件。
b. 源代码内部查找 如果不是想要搜索文件名，而是要查找源代码的内容，可以使用Ctrl + F (Cmd + F)并输入字符串关键词。而且在搜索的右侧有一个Replace的复选框，当选中后就可以实现替换了。
c. 文件跳转到某一行 当在Chrome DevTools中打开一个源文件后，你可以指定到任意一行，用快捷键Ctrl + O，并输入“：”+第几行。
d. 选中下一个出现位置 如果在源代码窗口中使用 Ctrl + D (Cmd + D) 键，那么当前词的下一个出现位置也会被选中，方便你同时进行调整

进一步了解可以参考

Timeline Part

从输入URL到页面加载完成的过程中都发生了什么事情？

  1. 浏览器查找域名的 IP 地址
  2. 这一步包括 DNS 具体的查找过程，包括：浏览器缓存->系统缓存->路由器缓存…
  3. 浏览器向 web 服务器发送一个 HTTP 请求
  4. 服务器的永久重定向响应（从 http://example.com 到 http://www.example.com）
  5. 浏览器跟踪重定向地址
  6. 服务器处理请求
  7. 服务器返回一个 HTTP 响应
  8. 浏览器显示 HTML
  9. 浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）
  10. 浏览器发送异步请求

Timeline面板记录和分析了web应用运行时的所有活动情况，主要包括Loading events 加载事件，Scripting events 脚本执行事件，Rendering events 渲染事件，Painting events 绘制事件。

事件模式

事件模式提供以类型组织的记录期间捕获的所有事件的概览。大致能看出你的应用在什么类型的任务上的主要的时间消耗。这个视图中的水平条的长度对应于事件完成花费的时间长度。

帧模式

帧模式提供洞察应用的渲染性能的能力。一“帧”代表浏览器渲染一帧要显示的内容必须要做的工作–运行JavaScript、处理事件、更新DOM、改变样式布局和绘制页面。你的应用的目标是运行在每秒60帧下，对应于大多数（但不是全部）视频显示器的60Hz的刷新速率。因此，你的应用程序有大约16.6毫秒（1000毫秒/60）对每一帧做准备。
贯穿帧视图的水平线呈现60FPS和30FPS的帧速率目标。帧的高度对应于该帧渲染所花费的时间。每帧填充的颜色表明了每种类型的任务所花费的时间百分比。
渲染每帧花费的时间显示在记录试图的顶部。如果你把鼠标悬停在显示时间上，会显示帧的附属信息，包括每种类型的任务的时间、CPU时间、计算FPS的时间。

页面代码是如何被转换成屏幕上显示的像素的? 这个转换过程可以归纳为这样的一个流水线，包含五个关键步骤：JS / CSS > 计算样式 > 布局 > 绘制 > 渲染层合并
每一帧都是经过上述的流水线处理之后渲染出来的，但并不意味着页面每一帧的渲染都需要经过上述五个步骤的处理。

内存模式

内存视图展示你的应用的随着时间内存使用情况，包括文档数、DOM节点数，以及在内存内的事件监听(未被垃圾回收的)。

Audits Part

Chrome Audits的是用来分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案。对网络和页面性能进行检测，根据测试的结果进行优化。但是检测结果只是参考，在实际的项目中肯定有特殊情况存在，并不能为了满足某项测试结果而忽略特定情况的存在。

Best Practices for Speeding Up Your Web Site By Yahoo

  1. 尽可能减少HTTP请求数
  2. 使用CDN
  3. 添加Expire/Cache-Control头
  4. 启用Gzip压缩
  5. 将CSS放在页面最上方
  6. 将Script放在页面最下方
  7. 避免在CSS中使用Expressions
  8. 把Javascript和CSS都放在外部文件中
  9. 减少DNS查询
  10. 压缩JavaScript和CSS
  11. 避免重定向
  12. 移除重复的脚本
  13. 配置实体标签(ETAG)
  14. 使AJAX缓存

相类似的检测工具有PageSpeed和YSlow
http://yslow.org/
https://developers.google.com/speed/pagespeed/insights/

火狐浏览器可以使用下面这个插件来测试页面性能
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/

很多时候都是事与愿违的，往往特别想得到什么，往往结果却是一场空，
没有理由和原委，结果就是这样，没有其它的选择。当我一次次努力想要
达到自己的追求，一次次的被打回来。没有任何防备，无论是工作还是
生活上的，没有一点点是自己顺心的，反过来想想也不知道是为什么或者
什么导致了现在这种状态，我没有办法去反抗，因为除了接受还是接受。