详解目前最流行的web IDE

通常我们在写脚本程序时大多会使用本地集成开发环境，比如idea、eclipse、vscode等，这也是我们大多数程序员熟悉的工作环境。近几年基于js核心的web ide逐渐流行，比较常见的有：monaco editor、code mirror、ice等，其中monaco editor功能最强大，和vscode的功能几乎一样强大，使用起来也方便很多，效率非常高，可以说比传统的本地IDE更好用。下面我们就详细介绍下现代流行的web IDE。

web IDE的优点

1.功能强大。目前以微软开源的monaco editor功能最强大，因为它和vscode是同一个内核，所以vscode有的功能它也具有。

2.使用方便。只要有浏览器就可以运行非常方便，不需要提前安装任何插件，即使在手机中也可以运行。

3.容易集成各种其他的工具。

4.开源，完全免费。

5.配置简单，不需要做其他配置，直接上手就可以用。

6.如果有设备，一般也不需要用usb连接设备，直接可以在网页操作。

举例说明

说了这么多，大家可能还比较陌生，下面我举个例子说明：

上图是一个典型的web IDE，整个编辑区域可以分成三部分，左上为脚本代码编辑区域；左下为调试区，包括log和错误等信息显示区域；右边为对应手机设备的UI树，显示了ui细节。下面分别详细介绍

代码编辑区域

代码编辑区域使用monaco editor，功能非常强大，支持代码提示，引用，跳转，重命名，搜索。快捷键等等，总之本地IDE具有的它都有

1.代码提示功能，直接把鼠标移动到对应的函数上，立马显示函数对应的详情，非常方便。

2.写代码时，直接列出所有可能的函数，和对应的函数原型，参数可以提示，非常便利。

3.在app函数上点击右键，选择引用，则会显示所有引用app函数的地方，双击即可跳转到对应的函数地方。

4.在mac电脑中按command + F可以开始全文搜索，如上图所示

还有很多功能，限于篇幅这里我就不一一列举了，大家可以自己去体验下。

调试区

可以实时查看远程设备的log信息，可以在脚本代码中选择某一段代码执行，log信息会在下面显示，如下视频所示：

logs

显示错误信息，当代码有错误时，可以实时显示并指出具体错误信息。

errors

设备UI信息显示区

在整个界面右边显示了当前选择的远程手机设备的UI树，每个ui控件的详细信息等。

可以在这个ui界面中全局搜索ui控件，非常直观，效率非常高。

总结

web IDE总体上来说比传统本地IDE的效率更高，操作更简便，入门门槛更低，大家可以考虑试下，有任何问题，欢迎在评论区提问，有问必答。