DevEco Studio：Inspector双向预览

注意：多设备预览时，不支持双向预览。

通过双向预览功能，可以实现代码和预览界面的双向联动。

先打开预览界面，然后点击右上角的Inspector按钮，打开双向预览功能：

开启双向预览功能后，支持代码编辑器、UI界面和Component Tree组件树三者之间的联动：

• 选中预览器UI界面中的组件，则组件树上对应的组件将被选中，同时代码编辑器中的布局文件中对应的代码块高亮显示。
• 选中布局文件中的代码块，则在UI界面会高亮显示，组件树上的组件节点也会呈现被选中的状态。
• 选中组件树中的组件，则对应的代码块和UI界面也会高亮显示。

例如，在预览界面中点击按钮，在代码区域自动用红框选中了对应的代码，在右侧的Component Tree界面自动到了对应的组件：

在代码界面点击代码，例如点击Button，在预览界面和Component Tree中对应展示：

在右侧Component Tree中选中某个组件，在预览界面中会高亮显式，在代码区域自动选中了对应的代码：

可以在属性区域中修改属性，会同步体现在代码中：