Inspector双向预览
=============

DevEco Studio提供HarmonyOS应用/元服务的UI预览界面与源代码文件间的双向预览功能，支持ets文件与预览器界面的双向预览。使用双向预览功能时，需要在预览器界面单击![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/05/v3/7fSuGV9sS0estebIFgZSyg/zh-cn_image_0000002594634480.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=D323C1ECB906B87151CA4B57B642161F56B7524B02CD8FA5273B99CC063D0EEB)图标打开双向预览功能。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cb/v3/UuSrEWMcSUKM1cvg08JzlQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=6545CD8C792C659AF2C9AECFD625D0C4AF21137A5A84990AA6CAB228C3A3B7CB)

不支持服务卡片的双向预览功能。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a5/v3/EprRc7M6QnWEuVOiHRdrrQ/zh-cn_image_0000002625074059.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=2527A8685BDE9883926110AD6E3C853520156E7A93BA45D3F163F6F43C2E633B "点击放大")

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/81/v3/R7BMpruLRuCXUSRs7ix8xg/zh-cn_image_0000002594474556.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=D858B317AB4F9767B739199332136814A2C3885548215B4B750DA1A12834D96F "点击放大")

在预览界面还可以通过组件的属性面板修改可修改的属性或样式，在预览界面修改后，预览器会自动同步到代码编辑器中修改源码，并实时的刷新UI界面；同样的，如果在代码编辑器中修改源码，也会实时刷新UI界面，并更新组件树信息及组件属性。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a3/v3/4cOKNiprSHyeTMq2tGQFIA/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=1610147F6476A90DC5AC30FCB02F79A285047ADC3C478FF250CE4C6572C6AFA4)

*   如果组件有做数据绑定，则其属性不支持在属性面板修改。
*   如果界面有使用动画效果或者带动画效果组件，则其属性不支持在属性面板修改。
*   多设备预览时，不支持双向预览。