如何调试Nativescript app UI？

Question

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

感谢您的时间。

Answer 1

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

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

  

调试ios --emulator

或

  

调试android --emulator

然而，使用它你将不得不调试构建屏幕的JS代码。你最好看一下xml并理解布局如何工作以准确理解它是如何产生的。然后尝试调试你正在犯的错误。

Answer 2

如其他答案中所述，您可以使用调试模式。我认为自从该答案以来，情况可能已有所改变，因为您可以在某种程度上调试UI。

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

之类的链接

2）打开Chrome中的链接。 使用“元素”选项卡查看元素的xml树。您可以更改元素并将其添加到元素。示例：右键单击元素，单击“添加属性”，然后添加color =“ blue”，这应将元素的字体颜色更改为蓝色。

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

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