查看多端设备预览效果
==========

DevEco Studio支持HarmonyOS分布式应用/元服务开发，同一个应用/元服务可以运行在多个设备上。在HarmonyOS分布式应用/元服务的开发阶段，因不同设备的屏幕分辨率、形状、大小等不同，开发者需要在不同的设备上查看应用/元服务的UI布局和交互效果，此时便可以使用多端设备预览器功能，方便开发者在应用/元服务开发过程中，随时查看不同设备上的界面显示效果。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/8a/v3/A6YQiLvATN-Ye77On50t3g/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=E7BAD1408749ADE92B2E4721CCCC94434BC2FAC95D3DCB1E944F845956D7E263)

多端设备预览最多同时支持4个设备的预览。

前面介绍了DevEco Studio支持ArkTS、JS应用/元服务的预览器功能，多端设备预览器支持ArkTS、JS应用/元服务在不同设备上的同时预览。如果两个设备支持的编码语言不同，就不能使用多端设备预览功能。

下面以ArkTS应用/元服务为例，介绍多端设备预览器的使用方法，JS应用/元服务的多端设备预览器使用方法相同。

1.  在工程目录中，打开任意一个ets文件（JS请打开hml/css/js文件）。
2.  可以通过如下任意一种方式打开预览器开关，显示效果如下图所示：
    
    *   通过菜单栏，单击**View > Tool Windows > Previewer**，打开预览器。
    *   在编辑窗口右上角的侧边工具栏，单击**Previewer**，打开预览器。
    
3.  在Previewer窗口中，打开Profile Manager中的**Multi-profile preview**开关，同时查看多设备上的应用/元服务运行效果。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/9e/v3/HGIdixCLSaWX3pm9aJCazg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=0C479910ABA246E3B938409EC4C51E01E35D4064808ADD2AEA62031C9A1E1121)
    
    多端设备预览不支持动画的预览，如果需要查看动画在设备上的预览效果，请关闭Multi-profile preview功能后在单设备预览界面进行查看。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/a4/v3/8KwrvhM8Ts2c0rXiWMTy6Q/zh-cn_image_0000002594634662.png?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=97AF7257A7F4E59596AF1615467AD8CCECC8EBFD3810B5BB3FA804D551E8670A "点击放大")
    
    多设备预览效果如下图所示：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/25/v3/EYLpq2-KRw2aBsejuhh19A/zh-cn_image_0000002625074243.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132904Z&HW-CC-Expire=86400&HW-CC-Sign=CE1490F52D42A319F7D91CD6F7F022882E308CFCD679BE42154185D80E041F4A "点击放大")