华为鸿蒙DevEco Studio编辑器初体验

前言

众所周知华为鸿蒙作为移动应用开发的第三个热门领域（前两个热门领域iOS原生、Android原生都已经落寞了），也是未来一段时间内大前端领域的热门方向，这给受大环境影响的大前端开发领域带来了一股新的机遇和希望，作为开发者我也很荣幸能够被华为鸿蒙推荐为社区KOL参加鸿蒙学堂创新实训营北京站的学习，以及参加华为鸿蒙2024鸿蒙生态千帆启航仪式。作为鸿蒙生态的开发者一员，使用鸿蒙自带开发编辑器是必备技能，大家想必都知道华为鸿蒙的HUAWEI DevEco Studio（以下简称DevEco Studio）编辑器是一款功能强大的开发工具，专为华为鸿蒙生态系统而设计的全功能开发工具，那么本文就来分享一下体验使用华为鸿蒙的DevEco Studio编辑器。

关于DevEco Studio编辑器

据华为鸿蒙官方的介绍，DevEco Studio是基于IntelliJ IDEA Community开源版本打造，为运行在HarmonyOS和OpenHarmony系统上的应用和服务（以下简称应用/服务）提供一站式的开发平台。DevEco Studio编辑器提供了丰富的功能和工具，帮助开发者编写、调试和部署应用程序，本文以DevEco Studio4.0版本来介绍。

据我所知，DevEco Studio编辑器作为一款开发工具，除了具有基本的代码开发、编译构建及调测等功能外，DevEco Studio还具有以下的特点：

高效智能代码编辑：支持ArkTS、JS、C/C++等语言的代码高亮、代码智能补齐、代码错误检查、代码自动跳转、代码格式化、代码查找等功能，提升代码编写效率。
低代码可视化开发：丰富的UI界面编辑能力，支持自由拖拽组件和可视化数据绑定，可快速预览效果，所见即所得；同时支持卡片的零代码开发，降低开发门槛和提升界面开发效率。
多端双向实时预览：支持UI界面代码的双向预览、实时预览、动态预览、组件预览以及多端设备预览，便于快速查看代码运行效果。
多端设备模拟仿真：提供HarmonyOS本地模拟器，支持手机等设备的模拟仿真，便捷获取调试环境。

使用准备工作

在开始深度体验DevEco Studio编辑器的可视化调试功能之前，我们需要先完成一些准备工作。先确保已经安装了最新版本的DevEco Studio编辑器，并且具备相应的开发环境和依赖，这里以Mac OS为例来分享， Windows系统的安装这里不在逐一介绍，如果大家需要其他操作系统的安装步骤请参考华为鸿蒙官方的套件安装文档：管理中心，打开该链接来查看对应的各个操作系统的安装步骤。先来分享一下关于搭建鸿蒙开发环境的流程，环境配置流程如下所示：

接下来分享一下关于Mac OS环境下安装DevEco Studio的运行环境要求，具体如下所示：

macOS(X86) 10.15/11/12/13 macOS(ARM) 11/12/13
内存：8GB及以上

硬盘：100GB及以上
分辨率：1280*800像素及以上

然后再来分享一下关于Mac OS系统具体的安装步骤如下所示：

然后下载之后，打开压缩包，找到DevEco Studio安装包，直接双击打开安装即可，具体的安装步骤这里不在一一介绍。安装成功之后，在电脑上的图标如下所示：

双击DevEco Studio图标，打开DevEco Studio，具体如下所示：

作为开发者和使用者来说，关于DevEco Studio的具体使用文档请参见华为鸿蒙官方文档：文档中心，打开之后，然后找到4.0版本关于DevEco Studio的使用指南，最后就可以准备好要调试的基于华为鸿蒙应用程序或服务的代码和相关资源，就可以直接开发啦。

应用/服务运行

在介绍应用/服务运行之前，先来了解一下DevEco Studio的使用，只需要按照如下几步，即可轻松开发并上架一个应用/服务到华为应用市场，具体如下所示：

再来分享一下鸿蒙应用/服务的运行，分为：运行HarmonyOS应用/服务、运行OpenHarmony应用/服务。据我所知运行HarmonyOS应用/服务是有三种情况的，即：使用本地真机运行应用/服务、使用模拟器运行应用/服务、使用远程真机运行应用/服务，这里只介绍运行HarmonyOS应用/服务，关于运行OpenHarmony应用/服务这里就不再过多介绍。

1、本地真机运行HarmonyOS应用/服务

由于本地真机运行HarmonyOS应用/服务有多种情况，因为是基于华为的多种设备的，所以这里只以华为Phone的运行来讲，其实在Phone和Tablet中运行HarmonyOS应用/服务的操作方法一致，可以采用USB连接方式或者IP Connection的连接方式。我们可以采用IP Connection连接方式要求Phone/Tablet和PC端在同一个网段，建议将Phone/Tablet和PC连接到同一个WLAN下。又由于华为Phone的本地真机运行也是分为两种连接方式在，这里只以USB连接方式来讲，具体步骤如下所示：

首先在Phone或者Tablet中，打开"开发者模式"，可在设置 > 关于手机/关于平板中，连续多次单击"版本号"，直到提示"您正处于开发者模式"即可，然后在设置的系统与更新 > 开发人员选项中，打开"USB调试"开关。

还需要在Phone或者Tablet中运行应用/服务，需要提前对应用/服务进行签名。

然后进行具体的操作步骤，使用USB方式，将Phone或者Tablet与PC端进行连接，在Phone或者Tablet中，USB连接方式选择"传输文件"，接着在Phone或者Tablet中，会弹出"是否允许USB调试"的弹框，单击确定。在菜单栏中，单击Run>Run'模块名称'或绿色三角形，或使用默认快捷键Control+R（仅适用于Mac OS）运行应用/服务。

最后，DevEco Studio启动HAP的编译构建和安装，安装成功之后，Phone或者Tablet会自动运行安装的HarmonyOS应用/服务。

2、模拟器运行HarmonyOS应用/服务

关于使用模拟器运行HarmonyOS应用/服务，掘官方显示DevEco Studio提供模拟器供开发者运行和调试HarmonyOS应用/服务，对于Phone、TV和Wearable可以使用本地模拟器（Local Emulator）和远程模拟器（Remote Emulator），对于Tablet可以使用Remote Emulator运行应用/服务，对于Lite Wearable和Smart Vision可以使用Simulator运行应用/服务。同时，DevEco Studio的Remote Emulator还提供超级终端模拟器（Super Device），开发者可以利用超级终端模拟器来调测跨设备应用/服务。

本文以本地模拟器为例来介绍，创建和运行Local Emulator的操作方法如下：

单击DevEco Studio > Preferences > SDK，下拉框选择HarmonyOS，勾选并下载Platforms下的System-image和Tools下的Emulator资源。

单击菜单栏的Tools > Device Manager，在Local Emulator页签，单击Edit设置本地模拟器的存储路径Local emulator location，默认存储在/Users/用户/.Huawei/HarmonyOSEmulator/deployed。然后在Local Emulator页签中，单击右下角的New Emulator按钮，创建一个本地模拟器。

在创建模拟器界面，可以选择一个默认的设备；同时也可以单击New Hardware，添加一个新设备，以便自定义设备的相关参数，如尺寸、分辨率、内存等参数。

然后就是一路点击"Next"，到最后一步核实确定需要创建的模拟器信息，同时也可以在该界面修改模拟器信息，然后单击Finish创建本地模拟器。最最后点击运行按钮，选择模拟器选项，即可运行起来，这里不在过多介绍。

3、远程真机运行HarmonyOS应用/服务

做传统的移动端开发大家想必都知道，如果开发者没有真机设备资源，则不能很方便的调试和验证自己的应用，HarmonyOS应用也是如此，但是DevEco Studio为了方便开发者，DevEco Studio提供了Remote Device远程真机设备资源供开发者使用，减少开发成本，据我所知DevEco Studio远程真机支持Phone和Wearable设备，开发者使用远程真机调试和运行应用时，同本地物理真机设备一样，需要对应用/服务进行签名才能运行。相比远程模拟器，远程真机是部署在云端的真机设备资源，远程真机的界面渲染和操作体验更加流畅，同时也可以更好的验证应用/服务在真机设备上的运行效果，比如性能、手机网络环境等。

在DevEco Studio菜单栏，单击Tools > Device Manager。然后在Remote Device页签中，单击Sign In，在浏览器中弹出华为开发者联盟帐号登录界面，请输入已实名认证的华为开发者联盟帐号的用户名和密码进行登录。

在登录之后，请单击界面的允许按钮进行授权，具体如下所示：

接着在Single device中，单击设备运行按钮，启动远程真机设备（同一时间只能启动一个设备）。

然后单击DevEco Studio的Run > Run'模块名称'，或使用默认快捷键Control+R，具体如下所示：

最后，DevEco Studio会启动应用/服务的编译构建，完成后应用/服务即可运行在远程真机上。

可视化调试

接下来再来分享一下关于DevEco Studio的可视化调试，据我所知可视化调用是DevEco Studio编辑器的一项强大功能，它可以帮助开发者在运行时实时查看和修改应用程序的界面和数据，通过可视化调试，我们可以更直观地了解应用程序的运行状态和交互行为，快速定位和修复问题。关于HarmonyOS应用/服务调试其实有很多内容，这里只举两个有代表性的调试来介绍，而且只做理论介绍，其他没介绍到的大家可以对应鸿蒙官方文档自行查阅。

变量可视化调试：据我了解到的，在HarmonyOS应用/服务调试过程中，查看变量的变化过程是否符合预期结果是一项常用的调试方法，为此DevEco Studio提供了调试变量的可视化功能，支持Java、C/C++、JS和ArkTS语言的基本数据类型、数值类型的集合和表达式可视化调试，并以Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）的形式呈现。我们开发者可以根据这些图形化界面观察当前值、数据类型以及数值的连续变化，通过查看、比对、分析当前变量的变化过程和逻辑关系，判断出当前值（变量）是否符合预期结果，从而迅速有效的定位问题。另外，变量可视化支持当前值可视化和连续变化值可视化两种方式。其中，当前值可视化，是通过解析Debugger当前帧的信息，获取指定变量当前栈帧中的值，以Plain（树形）、Line（折线图）、Bar（柱状图）和Table（表格）方式进行可视化展示。当前值可视化每次只能观察一个变量，开发者可以根据需要切换变量进行观察。而连续变化值可视化，是通过折线图的方式，可以同时显示多个变量的连续变化过程，以及变量之间的关系，截止目前连续变化值可视化，只支持基本数值类型的数据可视化。
堆栈可视化调试：再来分享一下HarmonyOS应用/服务堆栈可视化调试，据悉堆栈可视化功能可以在调试过程中，将函数之间的调用关系以直观的可视化结构图呈现出来，保留了历史调用关系，克服了跨设备跨语言堆栈列表不连续的弊端。另外，堆栈可视化可使用不同颜色表示不同设备调试的模块，点击调用关系结构图中的函数节点能自动定位到代码中的函数处，这就使我们开发者溯源代码更加轻松快捷。

在DevEco Studio编辑器中，我们可以轻松地运行和调试应用程序或服务，通过简单的配置，我们可以选择目标设备或模拟器，并启动应用程序。而且DevEco Studio提供了实时日志和调试信息的显示，帮助我们实时监控应用程序的运行情况。

DevEco Studio配置参数列表

通过上文关于DevEco Studio的主要功能和特点的介绍，最后再来分享一下关于DevEco Studio的配置参数，上面也介绍到了DevEco Studio是基于IntelliJ平台开发，在原生的IntelliJ参数的基础上新增了部分参数，这些参数可在idea.properties中进行配置，具体的参数列表内容如下所示：

|------------------------|----------------------------------------|
| 参数 | 参数说明 |
| grs_url | 设置DevEco Studio连接的云端环境。 |
| npm_config_strict_ssl | 设置是否开启npm的https证书校验。默认为true，表示开启证书校验。 |
| ohpm_config_strict_ssl | 设置是否开启ohpm的https证书校验。默认为true，表示开启证书校验。 |

具体参数表格上面已经列出来了，但是我们在使用的时候一定要注意一点：关闭证书校验，很有可能会带来安全风险，所以大家一定要谨慎使用！

番外篇：参加鸿蒙生态学堂·创新实训营北京站的培训

2023.12.19~21号，以社区开发者KOL的身份参加鸿蒙生态学堂·创新实训营北京站的线下培训活动，并顺利结业，获得华为开发者学堂HarmonyOS应用开发者高级认证。我觉得参与鸿蒙开发，让我正真具备了"大前端"开发能力，因为没有鸿蒙领域的开发是不完整的大前端，所以入门鸿蒙开发，对我的技术栈涉猎领域有了完整性。作为开发者，我也面临35岁中年危机，我也遇到了裁员潮，程序圈内卷严重等问题，看到鸿蒙生态要在未来几年内着重发力，让我们这些开发者看到了希望，毕竟养家糊口是我们普通程序员的根本，鸿蒙生态的繁荣发展可以让大部分程序员有了更多的发展机会，意味着让更多的家庭能够继续很好的生活下去，是一个非常有意义的事情。鸿蒙生态带给我的除了机会、机遇之外，我还结识了很多志同道合的朋友，也认识很多业界大佬，对我的人脉是一个很好的拓展，对我的认知也有了新的提升。

还是那句话：得鸿蒙者，不失业；入门鸿蒙，从此和裁员说拜拜。完全没有夸张的讲，鸿蒙生态的发展带动了国内前端圈的新的希望，能让很大一部分已经失去工作的开发者二次就业，这是非常好的事情。与我个人而言，我觉得入门鸿蒙对我自己来说又多了一个个人竞争优势，2024年时我个人发展的关键一年，我也希望通过搭上鸿蒙的东方，实现自己的个人腾飞。我也是非常期待参会见证鸿蒙的历史时刻，自从上次被邀请参与鸿蒙的培训到参与鸿蒙发布会，两次的经历都是义无反顾的积极参与，竭尽全力支持，因为我自己也有本职工作，所以时间精力有限，但是我自己也说不清楚为什么就对鸿蒙这么的上心支持，真的可以说是用爱发电让我参与鸿蒙、学习鸿蒙、见证鸿蒙。也希望自己在2024能够在鸿蒙领域创出属于三掌柜的一片天，也期待鸿蒙生态能够赶快腾飞，实现iOS、Android、鸿蒙三足鼎立的局面！

结束语

通过本文深入体验了华为DevEco Studio编辑器，想必读者可以更直观地了解鸿蒙应用程序的运行状态和交互行为，并快速定位和修复问题，而且DevEco Studio编辑器提供了丰富的功能和工具，帮助我们开发者提高开发效率和调试过程的便捷性，也期待大家能够通过充分利用DevEco Studio编辑器的可视化调试功能，为华为鸿蒙生态系统的应用开发贡献更多优秀的应用作品。最后值得一提的是，无论是布局调试、数据查看和修改，还是事件监视和调试，DevEco Studio编辑器都为开发者们提供了强大的工具和功能，助力我们开发出高质量、稳定可靠的鸿蒙应用程序和服务。让我们一起享受DevEco Studio编辑器带来的便捷和效率吧！