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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d1/v3/84dRNUzpSe6E2zBmWSB7lQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=0E90EAE8CA10F6A90F6DB71DB0323B8FA663D529E427A3ECAB32FCFE5A026988)

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/83/v3/kmmte7cJTzymWwahiuTCrw/zh-cn_image_0000002625074059.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=5FC686FCCB14F737EBF287A0F2C222718E88139FE52EE1904ABB43CEED9A8FFE "点击放大")

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

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e5/v3/UyjdHNsITwm5v__IUCGKVQ/zh-cn_image_0000002594474556.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=DC9F2319D7BA695D17281DF72C29A95C71CB4406D2F420E27768B97F9CFC7767 "点击放大")

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

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/d7/v3/SIvZmUOTQy6GeW_ZxQT9EQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=1F1C6BB3A49D49037BF2721298F72D7A2CE6328020383D4553473F4FB4848402)

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