通常我們在寫腳本程序時大多會使用本地集成開發環境，比如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信息會在下面顯示，如下所示：
顯示錯誤信息，當代碼有錯誤時，可以實時顯示并指出具體錯誤信息。
設備UI信息顯示區
在整個界面右邊顯示了當前選擇的遠程手機設備的UI樹，每個ui控件的詳細信息等。
可以在這個ui界面中全局搜索ui控件，非常直觀，效率非常高。
總結
web IDE總體上來說比傳統本地IDE的效率更高，操作更簡便，入門門檻更低，大家可以考慮試下，有任何問題，歡迎在評論區提問，有問必答。
