Rax Tools Chrome 开发者工具 0.0.1

#1

Rax Tools 是一款提升 Rax 开发体验的辅助工具,为 Rax 项目开发者提供更为便捷和实用功能,现发布 0.0.1 试运行版本,欢迎试用,本文对当前版本功能做一下简单介绍。

安装地址

chrome 网上应用商店

功能介绍

0.0.1 版本主要功能:更快捷的文档与 demo 查看、更大的地址二维码、更高效的当前 h5 页面检测

1、地址栏工具

地址栏中提供了核心组件的文档和 demo 检索,使用方式如下
地址栏文档检索能力:

rax doc view

地址栏 demo 检索能力:

rax demo view

在后续版本中将会更多的结合 Rax 开发者数据,打造更为精准和便捷的的搜索能力。

2、右上角工具

右上角工具提供了最常用的扫码工具(我们会比市面上的很多扫码工具更大,迎合页面的复杂地址),扫码工具提供了两种选项。当前地址二维码是预览当前页面,后面的 bundle 地址强制访问 weex bundle

除了扫码能力外,还提供了部分相关学习资源入口,自助学习顶呱呱

3、性能及稳定性检测工具

0.0.1 版本提供了一个最基础的性能和稳定性检测,说明如下

  • 页面加载时间(秒开 load finish < 1s): 页面 onload 时间,秒开时间计算值
  • 页面可交互时间 (<500ms) : domContentLoadedEventEnd - navigationStart, DOMContentLoaded 完成后用户可以对页面进行操作的时间。(同 jQuery 中的 domready)
  • 图片域名收敛(图片域名个数<=4): 图片尽量收敛成统一域名,考虑页面存在不同埋点系统会引入新的图片域名,暂时考虑 4 个作为参考值
  • 不推荐使用 GIF 图片,检测出页面存在 gif 时都将标红
  • FPS (>=48) : 该值与 ATS 一致
  • 页面加载图片资源数,未作数值限制,默认标绿
  • 页面加载 css 资源数 (<=4) : 该值与 ATS 一致
  • 页面加载 js 资源数 (<=4) : 该值与 ATS 一致
  • 页面加载超大图片个数(>50k): 请限制单个图片大小,该值与 ATS 一致
  • 所有资源总大小(<1M): 该值为估算值,不同业务无法统一
  • js 文件总大小(<500k): 该值为估算值,不同业务无法统一
  • 图片资源总大小(<500k): 该值为估算值,不同业务无法统一
  • 页面标签总数量 : 该值为影响页面的渲染性能,考虑业务复杂度不同,该值未作限制
  • 页面嵌套层级 (<=14) : weex 建议小于 14 是为了照顾老安卓机,超出标红
  • https 检测(查询 http 资源): 强制要求使用 https,出现 http 资源则标红
  • 资源加载失败(js error): 检测是否有下载失败资源
  • 是否出现不可用的 @weex-module 逻辑 : 建议 web 页面中不要使用 weex 模块,工具将检测所有用到的 js 资源,发现则标红

其他

当前插件对 h5 页面的检测不仅限于 Rax,也可以作为传统 h5 页面优化手段的一个指导。未来该插件还会输出更多的 Rax 体系已沉淀能力,敬请期待

1 Like