如何调试 Nativescript 应用 UI？

Question

我是 NativeScript 技术的新手，在开发应用程序时，我需要调试 UI 组件，例如为什么这个 textview 没有显示、布局与另一个重叠或找出 UI 中的其他失真

感谢您的宝贵时间。

Answer 1

正如另一个答案中提到的，您可以使用调试模式。我认为自从那个答案之后事情可能发生了一些变化，因为您可以在一定程度上调试 UI。

1) 在您的模拟器中运行应用程序 tns debug android --bundle 例如 这将输出链接，例如chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

2) 在 chrome 中打开链接。 使用元素选项卡查看元素的 xml 树。您可以更改和添加元素的属性。示例：右键单击一个元素，单击“添加属性”并添加颜色 =“蓝色”，这应该将元素的字体颜色更改为蓝色。

<Label color="blue"... 您可以在右侧查看计算出的 CSS。但是我认为您不能像在 Web 开发中那样编辑/修改右侧的 css。

这里是文档 https://docs.nativescript.org/tooling/debugging/chrome-devtools

Answer 2

通常，字段关闭的唯一原因是您使用的边距为负值，或者您将多个项目放在绝对或网格布局单元格中。

---

要调试，您可以使用：

tns 调试 ios --emulator

或

tns 调试 android --emulator

但是，使用它您将不得不调试构建屏幕的 JS 代码。您最好查看 xml 并了解布局如何工作以准确了解它的布局方式。然后尝试调试您所犯的错误。