通常我們在寫腳本程序時大多會使用本地集成開發(fā)環(huán)境，比如idea、eclipse、vscode等，這也是我們大多數(shù)程序員熟悉的工作環(huán)境。近幾年基于js核心的web ide逐漸流行，比較常見的有：monaco editor、code mirror、ice等，其中monaco editor功能最強(qiáng)大，和vscode的功能幾乎一樣強(qiáng)大，使用起來也方便很多，效率非常高，可以說比傳統(tǒng)的本地IDE更好用。下面我們就詳細(xì)介紹下現(xiàn)代流行的web IDE。

web IDE的優(yōu)點(diǎn)

1.功能強(qiáng)大。目前以微軟開源的monaco editor功能最強(qiáng)大，因為它和vscode是同一個內(nèi)核，所以vscode有的功能它也具有。

2.使用方便。只要有瀏覽器就可以運(yùn)行非常方便，不需要提前安裝任何插件，即使在手機(jī)中也可以運(yùn)行。

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

4.開源，完全免費(fèi)。

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

6.如果有設(shè)備，一般也不需要用usb連接設(shè)備，直接可以在網(wǎng)頁操作。

舉例說明

說了這么多，大家可能還比較陌生，下面我舉個例子說明：

上圖是一個典型的web IDE，整個編輯區(qū)域可以分成三部分，左上為腳本代碼編輯區(qū)域；左下為調(diào)試區(qū)，包括log和錯誤等信息顯示區(qū)域；右邊為對應(yīng)手機(jī)設(shè)備的UI樹，顯示了ui細(xì)節(jié)。下面分別詳細(xì)介紹

代碼編輯區(qū)域

代碼編輯區(qū)域使用monaco editor，功能非常強(qiáng)大，支持代碼提示，引用，跳轉(zhuǎn)，重命名，搜索。快捷鍵等等，總之本地IDE具有的它都有

1.代碼提示功能，直接把鼠標(biāo)移動到對應(yīng)的函數(shù)上，立馬顯示函數(shù)對應(yīng)的詳情，非常方便。

2.寫代碼時，直接列出所有可能的函數(shù)，和對應(yīng)的函數(shù)原型，參數(shù)可以提示，非常便利。

3.在app函數(shù)上點(diǎn)擊右鍵，選擇引用，則會顯示所有引用app函數(shù)的地方，雙擊即可跳轉(zhuǎn)到對應(yīng)的函數(shù)地方。

4.在mac電腦中按command + F可以開始全文搜索，如上圖所示

還有很多功能，限于篇幅這里我就不一一列舉了，大家可以自己去體驗下。

調(diào)試區(qū)

可以實時查看遠(yuǎn)程設(shè)備的log信息，可以在腳本代碼中選擇某一段代碼執(zhí)行，log信息會在下面顯示，如下所示：

顯示錯誤信息，當(dāng)代碼有錯誤時，可以實時顯示并指出具體錯誤信息。

設(shè)備UI信息顯示區(qū)

在整個界面右邊顯示了當(dāng)前選擇的遠(yuǎn)程手機(jī)設(shè)備的UI樹，每個ui控件的詳細(xì)信息等。

可以在這個ui界面中全局搜索ui控件，非常直觀，效率非常高。

總結(jié)

web IDE總體上來說比傳統(tǒng)本地IDE的效率更高，操作更簡便，入門門檻更低，大家可以考慮試下，有任何問題，歡迎在評論區(qū)提問，有問必答。