按[F12]鈕 - Network Debug 的範例 - 當前端發出一個 Url Request 時(../API/V80E01AAPI/get_sub_TreeData1) , Debug 資料是否正確

目的: 按[F12]鈕  - Network Debug 的範例
           當前端發出一個 Url Request 時(../API/V80E01AAPI/get_sub_TreeData1) , 
           Debug 資料(url/Request method/傳入參數/傳回值/..)是否正確

處理說明: 1>當呼叫後端Request(url) 時,按 [F12]鈕, 

                      可以看到[Network]頁 列出後端的 URL

                  2>於 [Network]頁, 點[Header]Sheet, 看到 Request method: Post/Get

                  3>點[Payload]Sheet, 看到 傳入參數: Form Data

                  4>點[PreView]Sheet,看到傳回的資料(DataSet/Table)

                  5>點[Respons]Sheet,看到傳回的資料(json結構)

1>[Network]頁: URL

2>[Header]Sheet: Request method

3>[Payload]Sheet: 傳入參數(Form Date)

4>[Preview]Sheet : 傳回結果(dataset/datatable)

5>[Response]Sheet: 顯示 json結構

好的，我來示範一個「Network Debug 範例」，讓你能在瀏覽器 F12 檢查 TreeStore 的請求是否真的送出到後端：

---

🔧 步驟

1. 打開瀏覽器開發者工具

   • 在 Chrome/Edge 按 F12 或 Ctrl+Shift+I。
   • 切換到 Network 面板。

2. 展開節點觸發請求

   • 在你的 Ext.tree.Panel 裡點擊某個節點。
   • 如果 TreeStore 正常設定，這時候應該會送出一個 HTTP 請求。

3. 檢查請求細節

   • 在 Network 面板找到對應的請求 (通常 URL 是 ../api/V80E01AAPI/get_sub_TreeData1)。
   • 點擊該請求，檢查：
     • Request Method：是否為 POST（如果後端是 [HttpPost]）。
     • Request Payload / Form Data：是否有帶上 cur_DEPID。
     • Response：後端是否回傳 JSON，格式是否正確。

4. 常見錯誤排查

   • 如果請求沒有出現 → 代表 TreeStore 沒有觸發 Proxy，檢查 beforeload 是否正確設定。
   • 如果請求出現但狀態碼是 405 Method Not Allowed → 前端用 GET，後端只允許 POST。
   • 如果狀態碼是 404 Not Found → URL 路徑不匹配。
   • 如果狀態碼是 200 OK 但沒有資料 → 後端查詢邏輯或回傳格式不符。

---

範例截圖檢查重點

• Request URL: http://localhost:xxxx/api/V80E01AAPI/get_sub_TreeData1
• Request Method: POST
• Form Data:

  cur_DEPID: AIDC
  

• Response JSON:

  [
    { "id":"A001", "text":"A001:部門", "leaf":false },
    { "id":"E001", "text":"E001:員工", "leaf":true }
  ]
  

---

👉 這樣你就能快速判斷：到底是 前端沒送出，還是 後端沒接到，或是 資料格式不符。

要不要我幫你寫一個「最小可測試範例」的 TreeStore + Controller，讓你可以直接跑起來測試 Network 面板？