MyGo 中文文档

外观

Inspector(检查器) ​

检查器在一个停靠于内容旁边的面板中显示原生 UI 窗口的元素,就像 Chrome 的开发者工具显示页面那样:以标记形式呈现的元素树、所选元素的 样式、盒模型和属性、覆盖在内容上的高亮、帧耗时,以及问题。

开启了开发者工具的窗口可以通过 View → Toggle Developer Tools、F12, 或 macOS 上的 Alt+Cmd+I(其他平台为 Ctrl+Shift+I)打开检查器; Shift+Cmd+C(Ctrl+Shift+C)打开检查器并进入元素选取模式。开发构建 中开发者工具默认开启(正如 Web 检查器一样),WindowOptions.Page.DevTools 可为某个窗口开启或关闭它:

go
mygo.NewWindow(mygo.WindowOptions{
	Content: ui.View(app.view),
	Page:    mygo.PageOptions{DevTools: mygo.DevToolsDisabled},
})

内容把窗口的右侧让给面板:视图得到的窗口变窄了,c.Size() 会反映 这一点。

mygo build 的生产构建会剔除检查器,因为它们的开发者工具是关闭的: 检查器约占二进制文件 250 KB。mygo build -debug 保留它;在生产构建中, MYGO_INSPECTOR=1 mygo build 也会保留它,以便设置了 DevToolsEnabled 的窗口在那里打开它。用 go build 构建的应用保留检查器,除非用 -tags mygo_noinspector 将其剔除。拖动面板的左边缘可调整其宽度。 面板跟随浅色或深色外观。

工具栏上的 RTL 开关把窗口按从右到左布局,或切换 回来,以便在界面翻译之前试用它;面板本身保持从左到右。元素的计算样式 会显示其 direction。

元素 ​

树以标签的形式显示每个元素:控件用它的名字,如 <Button> 或 <List>, 其他则是 <Row>、<Column>、<Text> 之类,key 和 label 作为属性 显示,文本元素的文本显示在标签内部。靠近根的元素显示其内部的内容; 元素的箭头用于展开和折叠,Alt 点击则展开或折叠其内部的一切。

  • 悬停在某一行上会在内容中高亮其元素,与 Chrome 相同:内容区为蓝色, 内边距为绿色,边框为黄色,外边距为橙色;工具提示显示其尺寸、颜色、 字体和间距,以及辅助技术看到的信息:其名称和角色,以及键盘能否聚焦 它。带有过渡的元素的行会作出标注。
  • 点击某一行会选中其元素;方向键移动选择,Left 和 Right 折叠和展开 所选元素,或跳到其父元素并进入。树下方的面包屑导航显示到它的路径, 并可选择路径中的元素。
  • 点击工具栏的选取器,再点击内容,即选中指针下的元素:这次点击发给 检查器,而不是发给元素。按 Escape 停止选取。
  • Cmd+F(Ctrl+F)按标签名、文本、label 或 key 查找元素。

在树下方,所选元素有三个标签页:

  • 样式(Styles):它设置的样式,以 CSS 规则的形式呈现,并标明应用 在何处构建了它(创建它或为其指定 Key 的调用所在的文件和行号), 然后是它继承的文本样式,按设置它们的元素分组。MyGo 的布局就是 CSS 的布局,因此属性也是 CSS 的:flex-direction、gap、padding、 flex-grow、width、color,……
  • 计算值(Computed):盒模型,其外边距、边框、内边距和内容及其 尺寸,以及元素布局后的实际值:它在窗口中的大小和位置、字体、滚动 偏移。
  • 属性(Properties):它是什么(类型、ID、key、文本),它的状态 (是否聚焦、指针悬停、按下、禁用、移动中),以及辅助技术看到的信息。

性能与问题 ​

**性能(Performance)**显示最近几帧的构建、布局和绘制耗时,以条形图 对照窗口显示器的两次刷新间隔(120 Hz 为 8.3 ms,60 Hz 为 16.7 ms), 并给出最近值、平均值和最慢值。设置 MYGO_FRAME_STATS 可同时记录慢帧 (参见渲染)。

**问题(Issues)**列出构建时发现的错误,工具栏会统计数量:例如, 同一父元素下两个使用相同 Key 的元素共享一个状态,因此针对其中一个的 点击、焦点或滚动会落到另一个身上。应用对每个问题只记录一次日志; 测试器会在给出第二个键的地方 panic,使测试在那里失败。