查看ArkTS/JS预览效果
==============

预览器支持ArkTS/JS应用/元服务“实时预览”和“动态预览”。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/41/v3/XYaGJL3_Sd-MZOklTanLgA/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=52EF97FBEFE1F0B895B18FFE46D1345250456C759909959DE47D0A907100102A)

*   预览支持Phone、Tablet、2in1、Car、Wearable、TV设备的ArkTS工程，支持LiteWearable和Wearable设备的JS工程。
*   预览器功能依赖于电脑显卡的OpenGL版本，OpenGL版本要求为3.2及以上。
*   预览时将不会运行Ability生命周期。
*   从DevEco Studio 6.0.0 Beta3版本开始，HAP/HSP引用HSP时支持预览，HAR模块引用HSP不支持预览，请直接在HSP内预览或为该HSP[设置Mock实现](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-previewer-mock)。
*   预览场景下，不支持通过相对路径及绝对路径的方式访问resources目录下的文件。
*   预览不支持组件拖拽。
*   部分API不支持预览，如Ability、App、MultiMedia等模块。
*   Richtext、Web、Video、XComponent组件不支持预览。
*   不支持调用C++库的预览。
*   HAR在被应用/元服务使用时真机效果有区别，真机上实际效果应用不显示menubar，元服务显示menubar，但预览器都以不显示menubar为准。若开发HAR模块，请注意被元服务使用时预览器效果与真机效果的不同。

*   **实时预览**：在开发界面UI代码过程中，如果添加或删除了UI组件，您只需**Ctrl+S**进行保存，然后预览器就会立即刷新预览结果。如果修改了组件的属性，则预览器会实时（亚秒级）刷新预览结果，达到极速预览的效果（当前版本极速预览仅支持ArkTS组件。支持部分数据绑定场景，如@State装饰的变量）。实时预览默认开启，如果不需要实时预览，请单击预览器右上角![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/7a/v3/znM0x5PhTBKcbGun-ObdQw/zh-cn_image_0000002594634522.png?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=C17EFD7B457AE94D4E6E62F7D4A613BDD9E68E572E8A6662E808A74A1F15136C)按钮，关闭实时预览功能。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/16/v3/A7FZ_6vmRmyUrrE-LXg41w/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=B3BB1D4FDDC1557021312D4E3505CB1FA4FD620FB5D50D4E22F38476AF4A59CE)
    
    开发者修改resources/base/profile目录下的配置文件（如main\_pages.json/form\_config.json），不支持触发实时预览，开发者需要点击重新加载![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e5/v3/DLFQ2ABMT0ymZVISQj-LGQ/zh-cn_image_0000002625074103.png?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=D28ADC99AC90862A95A15B45F28A326CCD1B42DFD8E6B5AAB637DE71AED44211)。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/2b/v3/_SlRkoLrRoyals-_aAuqDQ/zh-cn_image_0000002594634526.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=5BC3C5031185A4C2B86561F5802F23D15EB32E81DDED3723A21C08389CDD65B7 "点击放大")
    
*   **动态预览**：在预览器界面，可以在预览器中操作应用/元服务的界面交互动作，如单击、跳转、滑动等，与应用/元服务运行在真机设备上的界面交互体验一致。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b8/v3/DV9xFhlvQPSnwLHaxMba2Q/zh-cn_image_0000002625074113.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=7CA11AD9400FB93B9A0D414CDD24CD81998F8F6FAA6DABC697B924E227576B13 "点击放大")
    

以ArkTS为例，使用预览器的方法如下：

1.  创建或打开一个ArkTS应用/元服务工程。本示例以打开一个本地ArkTS Demo工程为例。
2.  在工程目录下，打开任意一个.ets文件（JS工程请打开.hml/.css/.js页面）。
3.  可以通过如下任意一种方式打开预览器，启动预览。
    
    *   通过菜单栏，单击**View > Tool Windows > Previewer**打开预览器。
    *   在编辑窗口右上角的侧边工具栏，单击**Previewer**，打开预览器。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e6/v3/C_56uGR_QvCDdhcSTpr9TA/zh-cn_image_0000002594634524.png?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=2084EA7F21C3F3B8FB752E97539704FA1F62112712FA5733B9E1BCD1CD30063B "点击放大")
    
4.  点击按钮![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/c7/v3/h57TGcuYRf2jJtcPJd47Zw/zh-cn_image_0000002594634528.png?HW-CC-KV=V1&HW-CC-Date=20260709T132903Z&HW-CC-Expire=86400&HW-CC-Sign=B24E04BE8A6DCD6FDD0DAF016016A2F882118ECE47FB6E65867D754FE42C5AF0)，停止预览。