chrome开发者工具-timeline的详细介绍

在这个模式中，Summary视图(在Timeline的顶部)显示了一些水平的栅栏，分别代表页面中的网络和HTML解析(蓝色)，JavaScript(黄色)，样式重计算和布局(紫色)以及绘画和合成(绿色)事件。重绘是浏览器事件，是为响应诸如窗口大小改变或者滚动之类的视觉变化而调用的。

在Summary视图下面是Details视图，包含了某个会话被记录后，相关类别的记录的详细内容。

每一个记录在左侧有用于说明的标题，右侧是时间轴区域。鼠标移到一个记录之上，会显示更多的提示信息，其中包括从开始录制到结束的时间

CPU资源。此区域图指明了事件的类型消耗的CPU资源。

当选择了一个事件火焰表中，详细信息窗格显示有关该事件的更多信息，如下图所示：

上图可见加载时间0.02s，脚本15.68s，渲染时间11.28s，绘制时间46.06s，其他时间49.06s，空闲1.27s时间。

上图是总表。下图是详细汇总表。

五、其他的功能

1、连接安卓手机调试代码

需要手机和电脑有chrome浏览器，安卓手机连接USB至PC

1.1在手机开发者工具中选择允许USB调试

1.2打开chrome://inspect/#devices，选择允许USB调试

会检测到可用的安卓手机和安卓手机打开的页面，也可以自己输入url，如下图所示：

1.3点击 图片中的inspect,即可进入手机页面的调试状态。

这样就可以在电脑上操作和调试手机页面了。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!