> For the complete documentation index, see [llms.txt](https://www.robotmon.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.robotmon.app/jiao-ben-jiao-xue/robotmon-cha-jian-gong-neng.md).
# Robotmon VSCode 插件功能
## 工作區域介紹
{% hint style="info" %}
開啟VSCode後請務必先開啟一個工作資料夾！
{% endhint %}
A. (VSCode 控制區) 安裝Robotmon插件後會多出一個Robotmon Icon 
\
B. (LOCAL DEVICES) **近端USB連線裝置區**。手機裝置或是模擬器列表（手機必須使用USB連線）\
C. (REMOTE DEVICES) **遠端連線Service裝置區**\
D. (ASSETS) **螢幕截圖區**\
E. (SNIPPETS) **Robotmon APIs 指令集區**\
F. (ASSETS PANEL) **詳細螢幕截圖區**\
G. (SCREEN SYNC PANEL) **螢幕工具區**\
H. (DEVICE CONTROL PANEL) **裝置控制區**\
I. (VSCODE EDITOR) **VSCode 編輯區域**\
J. (LOGGER) **訊息日誌區**
### A. VSCode 控制區
安裝完Robotmon VSCode 插件後，會出現Robotmon Icon 
，點擊後會出現 B, C, D, E工作區域
### B. Local Devices 近端USB連線裝置區：啟動Robotmon Service
#### 手機啟動Service (Service 已經啟動可以略過此步驟)
1. 請先確認已經開啟開發者模式，並且允許USB偵測（與啟動Robotmon Service相同）
2. 手機連接USB至電腦，點擊
(scan)按鈕，會出現手機裝置ID
3. 確認手機Robotmon Service已經啟動，按鈕啟動Service/停止Service
#### 模擬器啟動Service（以NOX夜神模擬器為例子）
1. 啟動模擬器，點選(adb connect)，然後輸入127.0.0.1:62001，按Enter。
2. 點選(adb forward)按鈕，下方會出現模擬器IP項目 
{% hint style="info" %}
Nox模擬器多開：Port 依序為 62001, 62025, 62026, 62027, ...\
BS模擬器多開：Port 依序為 5555, 5565, 5575, 5585, ...\
雷電模擬器多開：Port 依序為 5555, 5556, 5557, 5558, ...
{% endhint %}
### C. Remote Device **遠端連線Service裝置區：連線Robotmon Service**
**手機連線**
Robotmon service 會自動廣播訊息給開發者（必須手機與電腦在同區網內），當Service啟動後，此區域會出現手機IP項目， 
，右邊按鈕分別為連線/斷線/安裝(尚未實作)，請點選連線 
按鈕。右方會出現 **G (DEVICE SYNC PANEL) 裝置同步區。**
如果手機已經啟動Service但沒有出現手機IP項目，可以點選 
手動新增，請輸入手機**`IP:8080`**。
#### 模擬器連線
1. 請先確認在上個步驟**模擬器啟動Service**後有點 
按鈕，此按鈕會建立電腦與模擬器的連線通道。
2. 點選連線按鈕。右方會出現 **G (DEVICE SYNC PANEL) 裝置同步區。**
{% hint style="success" %}
#### 裝置連線成功後，點選IP項目，下方會出現 H. (DEVICE CONTROL PANEL) 裝置控制區
{% endhint %}
### D. Assets 螢幕截圖區
顯示由 G. (SCREEN SYNC PANEL) **裝置同步區** 所截圖的所有圖片。在裝置同步區提供開發者方便的手機截圖功能（詳情請看G），截圖後會自動從手機下載到電腦，並且儲存在assets資料夾。\
圖片命名規則預設為：***(時間)\_(寬)x(高)\_xy(原始X座標)x(原始Y座標)\_wh(原始寬)x(原始高).png***。\
點擊 可開啟 F. (ASSETS PANEL) **詳細螢幕截圖區域**\
點擊 
可以自動插入Robotmon `openImage` 語法到編輯器中。
{% hint style="warning" %}
自動插入的openImage語法，路徑為手機內路徑。開發者必須自行將圖片上傳至手機內。路徑預設為 `/scripts/{projectName}/assets/{imageName}。`**projectName** 可以點擊 **H裝置控制區** > 
中設定。
{% endhint %}
### E. **Snippets** **Robotmon APIs 指令集區**
此區列出所有可用Robotmon APIs，滑鼠移過去可以看到使用範例，點擊 可以插入此Robotmon API語法到編輯器中，方便開發者使用。
### F. Assets Panel 詳細螢幕截圖區
繼上述D所述，多了螢幕截圖預覽。
### G. Screen Sync Panel 螢幕工具區
螢幕工具區包含了螢幕同步、螢幕截圖、螢幕取色、螢幕控制等功能。
放大縮小螢幕同步大小\ 
開始同步畫面\ 
螢幕區域截圖（必須先利用**Crop Image**選取區域）點擊後會自動區域截圖並存放在assets資料夾內\
**Crop Resize Ratio** 螢幕區域截圖後的縮放比例，預設為1.0\
**Image Prefix** 螢幕區域截圖，檔名前綴字串\
**Mouse XY: (x, y)** 顯示目前滑鼠在裝置螢幕上的座標\
**Color Info** 獲取顏色模式，點擊螢幕同步區會在 J. (LOGGER) 顯示 {x, y, r, g, b} 座標與顏色\
**Control** 控制模式，控制裝置\
**Crop Image** 螢幕區域截圖模式，可選擇截圖區域
### H. Device Control Panel 裝置控制區
{% hint style="warning" %}
請先在 C. (Remote Devices) 連線裝置，並且選取裝置，才會顯示此功能
{% endhint %}
**Setting:** 開啟 robotmon-settings.json 可設定螢幕截圖品質，emulator port等設定。\
**Run:** 執行工作區域的腳本，將腳本在裝置裝執行（請先點選工作區域）\
**Pause:** 暫停腳本，會呼叫內建 `pause();`\
**Resume:** 恢復暫停腳本，會呼叫內建 `resume();`\
**Stop:** 中斷腳本，會呼叫內建 `stop();`\
**Screenshot:** 螢幕截圖至工作資料夾內\
**Control:** 開啟 G. (Screen Sync Panel)
### I. VSCode **編輯區域**
VSCode 編輯器，支援所有VSCode功能。
{% hint style="info" %}
腳本副檔名請確認為 .js，才有程式碼標色功能，語法檢查
{% endhint %}
### J. Logger 訊息日誌區
**Robotmon** 紀錄所有工作訊息\
**Robotmon xxx.xxx.xxx.xxx (IP)** 紀錄所有腳本訊息
{% hint style="info" %}
如果腳本訊息沒有更新，請重新連線
{% endhint %}