UC 开发者调试工具及使用

安装

前往 https://plus.ucweb.com/download/#DevTool 下载对应平台的安装包(支持windows/linux/mac的64位平台),安装过程中可能需要忽略一些安全提示。

请确保系统中安装有adb命令行工具(是android platform-tools的一部分),并运行一次adb devices命令确认手机已成功连接电脑。

运行

运行平台对应的执行文件uc-devtools,即可启动uc-devtools。

连接

使用usb或者wifi adb连接手机,手机上运行支持devtools协议调试的浏览器webview应用(如果是UC浏览器,需要运行开发者版本)。成功运行可以看到webview设备列表界面:

UC Devtools Inspector_008.png | center | 832x588

点击可调试页面列表中的[inspect]按钮,可以开启对应页面的开发者调试界面,进行实际开发调试。

Developer Tools - wap.uc.cn-packinfo-chinese_999-ucbrowser-pf-145?uc_param_str=vepffrbiupladsdnni&r=main&from=wap-atb-mobile&plang=_011.png | center | 832x587

常用调试

1. Screencast

Screencast位于调试界面左上角(Element左侧), 即红框标注的位置。选中Screencast后, 可以在devtools窗口上看到页面效果, 该区域内支持点击/长按, 支持鼠标滚轮滚动页面, 支持鼠标拖动页面滑动。

RUIhKaeVB0.png | center | 832x473

2. Element

Element可以查看页面 DOM 树结构和页面元素css样式。

2.1 实时编辑DOM节点和CSS样式

双击DOM树中的节点,可以实时编辑标签属性,修改的效果即刻显示在浏览器中。

图片16.png | center | 832x192

点击右侧Style面板,可以实时修改CSS的属性值,所有样式的Name和Value都可编辑; 在每个属性后面单击可以添加新的样式。 下图为增加font-size样式后, 页面按新设置的字体大小显示。

图片15.png | center | 832x308

2.2 查看元素监听的事件

选中节点, 最右侧切换到Event Listeners, 即可看到当前节点监听的所有事件。点击具体事件, 可以看到该事件所在代码的位置(格式为”文件名:行号”, 点击可跳转到Source中对应代码的位置)。

Developer Tools - https:--m.qu.la-Login.html_039.png | center | 832x473

3. Console

Console中可以查看页面出错信息,执行javascript代码等。

3.1 输出页面出错日志

内核捕获页面执行中的异常, 输出在console上。 对于出错日志,左侧显示具体出错的原因, 右侧显示出错位置(格式为”文件名:行号”, 点击可跳转到Source中对应代码的位置)。

Developer Tools - https:--m.qu.la-book-62416-_018.png | center | 832x473

点击右侧出错信息所在文件和行号, 例如index.js:253,  即跳转到对应的js资源中。

Developer Tools - https:--m.qu.la-book-62416-_019.png | center | 832x473

3.2 输出调试日志

通过JS代码或者命令行console.log()、console.warn()和console.error()可以将日志信息输出到console。

图片4.png | center | 675x193

3.3 执行javascript代码

  • 在控制台输入命令时,会弹出相应的智能提示框,可以用Tab自动完成当前的选项。
  • 通过”$”选择页面元素。

图片5.png | center | 832x477

3.4 切换context

对于使用了service worker的页面, 可以在console上切换context (默认是top)。

WWoeT4Kr0m.png | center | 276x35

例如访问 https://simpleoffline.website/ , 默认是top level, 执行ServiceWorkerGlobalScope 提示 ServiceWorkerGlobalScope is not defined。

image.png | center | 702x133

如果切换context 到 service-worker, 再执行 ServiceWorkerGlobalScope, 则正常显示ServiceWorkerGlobalScope方法。

image.png | center | 695x127

4. Sources

Sources中可以查看网页的所有资源(html, js, css等),  更重要的功能是可以设置断点调试Javascript脚本。

4.1 资源格式化

点击底部的"{}", 即可格式化资源, 格式化之后的内容更符合阅读习惯。格式化后的资源, 会重命名为”文件名:formatted”。

4.2 设置断点

断点有多个触发时机, 可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发, 也可以手动在js中设置断点并触发。

  • DOM元素节点发生改变时 在Elements中指定的DOM节点上右击,在弹出的菜单中选择"Break on...",可以看到三个选择项,比如选择"Subtree modifications", 那么当该节点里面的子节点被添加、删除、修改时就会触发断点。设置方式如下图:

图片6.png | center | 832x622

  • XHR生命周期状态改变时 默认, 当XHR生命周期状态发生改变, 就会触发断点。如果希望只在url匹配到某些字符串才触发断点, 可点击”+”并输入字符串。

图片7.png | center | 228x56

  • 指定的事件执行时 Sources右侧右下角列出了各种类型的事件,勾选想监听的事件,在该事件被执行时,断点就会触发。

图片8.png | center | 225x359

  • 手动在js中设置断点并触发 在调试过程中, 以上三种断点方式不能满足工作需要, 手动在js中设置断点并触发必不可少。这个类型的断点, 需要开发者先找到可疑js代码, 然后设置断点, 最后构造条件触发断点。

图片9.png | center | 832x473

4.3 快速打开资源

点击截图区域选择"Open file", 或者直接Ctrl+P,  输入想打开的资源名, 即可直接打开该资源

xgq42iUFjw.png | center | 449x99

4.4 查看Service Worker的资源

对于使用了service worker的页面, 可以在Source上也可以区分context 。与之前Console章节对应, 在Source中同时显示了top 和service worker level的资源, 如下图。

nYXKu431nc.png | center | 234x200

5. Newwork

Newwork记录页面网络请求的详情信息,包括发起网页资源请求,  请求后得到的各类信息(包括状态、资源类型、大小、所用时间、Request和Response等),对网络性能优化有一些参考。

5.1 Network简介

Newwork主要包括5大块窗格(Pane):

  • Controls控制Network的外观和功能。
  • Filters 控制Requests Table具体显示哪些内容。
  • Overview 显示获取到资源的时间轴信息。
  • Requests Table 按资源获取的前后顺序显示所有获取到的资源信息,点击资源名可以查看该资源的详细信息。
  • Summary 显示总的请求数、数据传输量、加载时间信息。

选区_035.png | center | 832x625

5.2 查看具体资源的详情

点击某个资源的Name可以查看该资源的详细信息,根据选择的资源类型显示的信息也不太一样,可能包括如下Tab信息:

  • Headers 该资源的HTTP头信息。
  • Preview 根据你所选择的资源类型(JSON、图片、文本)显示相应的预览。
  • Response 显示HTTP的Response信息。
  • Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
  • Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

下图是Headers中包含的信息

Developer Tools - https:--m.qu.la-book-62416-_027.png | center | 832x473

<span data-type="color" style="color: rgb(245, 34, 45);">特别说明: 如果先访问页面再进入Inspect --Network, 不显示资源加载列表,刷新页面后才显示。</span>

6. Timeline

Timeline涉及的东西比较多, 可以利用来记录和分析网页运行过程中所有的行为信息, 可用于分析网页性能问题。

6.1 timeline简介

Timeline主要包括4大块窗格(Pane):

  • Control: 录制开关和控制录制过程中需要记录哪些信息。
  • Overview: 网页性能的概要信息。
  • Flame Chart: CPU堆栈轨迹的可视化图表。
  • Details: 当选择一个指定的事件后,会显示这个事件的更多信息;当没有选择事件时,会显示指定的时间帧信息。

Developer Tools - 100.84.42.129-testpage-cr57-feature-devtools-biquge_slow.html_042.png | center | 832x611

6.2 Control详解

Control中支持两种录制操作:录制网页交互和录制网页加载。为了便于分析,录制的时间不宜太长, 尽量避免不必要的交互操作。在录制之前点击Controls中的Screenshots复选框,可以在录制过程中捕获截屏,鼠标在Overview上移动则可以看到录制的动画。勾选Memory复选框, 可捕获Memory信息。 下图中红框区域是勾选Screenshots生成的, 篮框区域是勾选Memory生成的。

Developer Tools - 100.84.42.129-testpage-cr57-feature-devtools-biquge_slow.html_043.png | center | 832x777

6.3 Overvie详解

通过鼠标或者区域边界上的灰色滑块来拖出一个指定区域范围,Flame Chart会跟着局部放大显示指定区域内的详情信息. 也可疑通过键盘上的W/S来放大/缩小指定区域,通过A/D来向左/向右移动指定区域。该区域包括三个图表:

  • FPS  每秒帧数(Frames Per Second), 绿色柱状条越高,则每秒帧数越高, 出现的红色块表明这是一个长帧。
  • CPU  标记CPU资源的使用情况,不同颜色的面积图表明不同事件消耗的CPU资源。其中蓝色代表HTML文件;黄色代表脚本文件;紫色代表样式文件;绿色代表媒体文件;灰色代表其它杂项文件。
  • NET  标记请求资源耗时详情, 各种颜色的柱状条分别显示一种资源。柱状条越长,代表获取这个资源的时间越长。 其中较亮部分表示等待时间(当资源被请求时,直到第一个字节被下载的时间);较暗的部分表示传输时间(在第一个和最后一个字节被下载之间的时间)。

3mHWTSfr4I.png | center | 832x85

对于NET图表, 点击具体资源, 在Panel左下角, 会显示加载该资源的概述。

SNBHh5oRyn.png | center | 832x637

UC支持在Timeline中标记size过大的资源, 具体表现为: UC对不同类型资源size设定了一个阈值(根据经验值), 当资源size超过阈值时, 自动在右上角添加红色三角形提示, 点击被红色三角形标记的资源, 在panel的左下角, 会显示对资源size的建议(下图蓝色框所示)。

McqktExuMT.png | center | 832x636

UC开发者工具会根据实际情况调整阈值, 下图是目前不同资源的阈值。

资源size阈值.jpg | center | 521x250

6.4 Flame Chart详解

Chrome官方在Flame Char中标记了三条不同颜色的虚竖线。其中蓝色标记DOMContentLoaded event;绿色标记First Paint的时间点;红色代表load event; UC支持在Timeline中标记T2, 具体表现为: 在First T2时间点增加一条黑色的虚竖线(下图红色框圈出)。 T2标记线配合Overview里边的NET图表, 更直观地展示T2前加载的资源是否合理, 不合理的具体原因。

E5QCDugEhP.png | center | 832x635

Timeline更多请参考官方文档,  想详细了解UC对Timeline的优化, 请参考文档 xxx(待补充)。

7. Profiles

在Profiles中可以追踪网页程序的内存泄漏问题,进一步提升程序的JavaScript执行性能。主要包括以下功能:

  • Record JavaScript CPU Profile  显示网页中执行JavaScript函数耗时的位置。
  • Take Heap Snapshot 显示网页中JS对象和相关的DOM节点的内存分布情况。
  • Record Allocation Profile 从JS函数角度记录内存的分配信息。
  • Record Allocation Timeline 从Heap角度记录内存的分配信息的时间轴信息,利用这个可以实现隔离内存泄漏问题。

图片11.png | center | 832x354

7.1 Record JavaScript CPU Profile简介

选择Record JavaScript CPU Profile,点击Start,结合所要分析的具体场景(比如重新加载网页, 在网页上进行交互, 或者不操作),最后点击Stop,完成记录操作。提供三种不同的视图供分析:

  • Chart 按时间先后顺序显示。
  • Heavy(Bottom Up) 根据对性能的消耗影响列出所有的函数,并可以查看该函数的调用路径。
  • Tree(Top Down) 从调用栈的顶端(最初调用的位置)开始,显示调用结构的总体的树状图情况。

接下来以Chart视图为例分析下JS的性能. Chart视图以时间顺序展示CPU的性能情况,视图主要分成两块:

  • Overview 录制结果的鸟瞰图,柱形条的高度对应调用堆栈的深度,即柱形条越高,调用堆栈越深。
  • Call Stacks 函数调用堆栈图, 横轴表示时间,纵轴表示调用栈(自上而下地表示函数调用情况, 即上面的函数调用在它下面的函数)。

在Call Stacks区域, 鼠标移到函数上会显示函数名称和执行时间等相关数据,具体提供的信息有:

  • Name 函数名称。
  • Self time 本次调用函数运行的时间,仅包含该函数本身的运行时间,不包含它调用的子函数的运行时间。
  • Total time 本次调用函数运行的总时间,包含它调用的子函数的运行时间。
  • URL 函数在文件中的位置,其格式为file.js:100,表示函数在file.js文件的第100行。
  • Aggregated self time 本次录制中函数调用运行的总时间,不包含它所调用的子函数的时间。
  • Aggregated total time 本次录制中所有的函数调用运行的总时间,包含它所调用的子函数的时间。

更多使用请参考官方文档。

8. Application

Application记录网站加载的所有资源信息,包括存储数据(Local Storage、Session Storage、IndexedDB、Web SQL、Cookies)、缓存数据、字体、图片、脚本、样式表等。主要4大块窗格(Pane):

  • Clear storage: 用于快速清除页面存储的数据,主要是storage和cache。
  • Storage: 显示当前页面所有的storage数据。
  • Cache: 显示当前页面的cache。
  • Frames: 将页面上的资源按frame类别进行组织显示。

Developer Tools - https:--m.qu.la-book-62416-_030.png | center | 832x473

选中资源,右键即弹出四个选项,点击第一个”Reveal in Network Panel”, 即跳转到Network中。

图片12.png | center | 832x474

Developer Tools - https:--m.qu.la-book-62416-_031.png | center | 832x473

9. Security

Security用于调试当前网页的安全和认证等问题, 并确保网站正确地实现HTTPS。如果网页是安全的,则会显示这样一条消息:This page is secure (valid HTTPS).。

图片13.png | center | 832x466

但是,Chrome57版本该功能不完整, 不能正确检测网页是否安全, UC目前也存在这个问题, 检测结果如下图

Developer Tools - https:--m.baidu.com-?from=2001a_034.png | center | 832x473

同样, 各链接中给的证书也无法打开(对比Chrome高版本可以打开)。

Developer Tools - https:--m.baidu.com-?from=2001a_033.png | center | 832x473

10. Audits

Audits对当前网页进行网络利用情况、网页性能方面的诊断,并给出一些优化建议。强烈推荐使用UC适配的Lighthouse Lighthouse Lighthouse(x3 重要事情说三遍)。

Developer Tools - https:--m.qu.la-book-62416-_028.png | center | 832x473

选中Network Utilization、Web Page Performance,点击Run按钮,将会对当前页面进行网络利用率和页面的性能优化作出诊断,并给出相应的优化建议, 比如列出所有没有用到的CSS文件等。

图片14.png | center | 832x473

11. Lighthouse

在 Lighthouse 之前,一般基于 Performance API 以及 Devtools 来做页面性的能监控和优化。Performance API 给出的是页面加载过程的关键时刻数据,如 Time to First Byte(TTFB)、Fist Meaninful Paint 等指标,这些数据很有用,但不足以反映页面的整体情况及用户的真实感受。Devtools 功能很强大,但对于使用者的专业素养要求较高,而且每次都要人肉去分析(当然,对于特定问题,人肉分析还是无法避免),对于一些常用的有规律可循的检测无法沉淀。 Lighthouse 的出现一定程度上解决了 Performance AP 指标单一、 Devtools 难以驾驭的问题。使用 Lighthouse,除了在性能优化的道路上能走得更远,在最佳实践、SEO、Accessibility、PWA 以及扩展业务指标也大有可为。

UC lighthouse 除了 fork 了官方代码,也适配了 U4 内核,同时也提供了业务扩展能力, 目前包括但不限于提供加载性能、滚动性能、渲染性能等检测, 目前可执行的案例有:

  • Chrome cases(chrome原生)
  • uc default cases
  • load performance
  • rendering
  • memory analyze

11.1 执行用例

点击界面左上角的"+" 或者点击界面中间的"Perform an audit"按钮(如下图),进入案例选择。

Developer Tools - https:--m.baidu.com-?cip=119.145.89.97&baiduid=3734B4AF184CF6B2D574EC683622B2A2&from=2001a?from=2001a&index=&ssid=0&bd_page_type=1&logid=11651327183671827804&pu=sz-401321_480&t_noscript=jump_049.png | center | 522x280

勾选用例(单选),点击"Run audit",即可执行案例。

Developer Tools - https:--m.baidu.com-?cip=119.145.89.97&baiduid=3734B4AF184CF6B2D574EC683622B2A2&from=2001a?from=2001a&index=&ssid=0&bd_page_type=1&logid=11651327183671827804&pu=sz-401321_480&t_noscript=jump_050.png | center | 522x303

11.2 Chrome cases

UC Lighthouse将Chrome原生的多个案例归一为Chrome cases, 具体包括: PWA支持检测(Progressive Web App), 性能检测(Performance), 最佳实践检测(Best Practices)。 结果具体含义参考官方文档。

image.png | center | 304x263

11.3 load performance

加载性能有多个检测项, 主要包括对关键指标t0t1t2, 图片压缩格式, 资源size, 资源请求, 排版渲染, Localstorage读写频率, JS执行耗时, 整体耗时, 缓存命中等维度的检测。 这些检测项的通过标准基于经验值。

image.png | center | 523x779

11.4 rendering

渲染性能有四个检测项, 主要包括对惯性滚动性能, 图层合成复杂度, 图层合成稳定性和惯性滚动过程中发生光栅化性能的检测。 和加载性能一样, 这些检测项的的通过标准基于经验值。

image | center | 594x313

ps: 想了解以上四个检测项的详情,可参考以下ATA文档 惯性滚动性能测试 https://www.atatech.org/articles/75082 光栅化性能测试 https://www.atatech.org/articles/75080 图层复杂度和稳定性 https://www.atatech.org/articles/75081

11.5 uc default cases

uc default cases案例包括最佳实践, 加载性能和渲染性能三大部分。其中加载性能同 11.3 load performance, 渲染性能同 11.4 rendering,  这里不再详述。

image.png | center | 522x472

最佳实践只有两个检测项:

  • 页面meta是否设置viewport。 通过标准是 <head>中有<meta name="viewport">标记, 此节点包含content 属性,且该属性值是包含文本width=
  • 页面内容宽度是否等于视口宽度。 如果内容宽度小于或大于视口宽度,则通常表明页面没有针对移动设备屏幕进行优化。通过标准是window.innerWidth === window.outerWidth。

image.png | center | 522x160

11.6 memory analyze

memory analyze根据经验值分析各种 RAM/ROM 下可能出现内存使用不正常的场景。各项结果的意义参考ATA文档 https://www.atatech.org/articles/93961

image.png | center | 522x179

image.png | center | 522x774

image.png | center | 523x924

ps: 本章节的测试基于sina.cn 想了解UC对Lighthouse的优化, 请参考文档 xxx(待补充)。

问题与反馈

工具兼容devtools,更多使用可以参考: https://developer.chrome.com/devtools

http://plus.ucweb.com/?locale=en-us https://github.com/uc-developers/devtools/issues