如何调试 Nativescript 应用 UI？

How can debug Nativescript app UI?

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

感谢您的宝贵时间。

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

要进行调试，您可以使用：

tns debug ios --emulator

或

tns debug android --emulator

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

如其他答案中所述，您可以使用调试模式。我认为自从那个答案以来事情可能发生了一些变化，因为你可以在一定程度上调试 UI.

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

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

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