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

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

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

多端设备预览最多同时支持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/bb/v3/iBT4mlN1RWq2opKnfqNyww/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=DAD18C61A33715619429C57E8CB3F606807A97B7D8B561FC6536B6B80495EE08)
    
    多端设备预览不支持动画的预览，如果需要查看动画在设备上的预览效果，请关闭Multi-profile preview功能后在单设备预览界面进行查看。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/cc/v3/cN2S7MMmQdajm03agEwklw/zh-cn_image_0000002594634662.png?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=022FD077A0091B6A8E6F37BF43CC53F6B8FBB9EACE3B4FD825B1AF1639F4FF1E "点击放大")
    
    多设备预览效果如下图所示：
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/33/v3/OPpohNWhTPC8qzFcV-YyIw/zh-cn_image_0000002625074243.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073855Z&HW-CC-Expire=86400&HW-CC-Sign=98094DAF2D99711923E407325B3EAFB60AF4C95C20D408A488BAD4A85C8D6EEC "点击放大")