LESSON-01 · TOPIC 03
能依資源請求、程式執行、實際 DOM 三層順序定位白畫面或樣式失效。
能依資源請求、程式執行、實際 DOM 三層順序定位白畫面或樣式失效。
先看 Network 能排除檔案根本沒載入；再看 Console 找執行失敗；最後才在 Elements 核對 selector 與 DOM，可避免跳著猜。
要修改的檔案：files/starter/index.html
定位：先在 Network 找 intentionally-missing.png，不要先改 selector。｜依 starter-3 定位，只修改「Network→Console→Elements 的排錯順序」的責任。
先結果，再原理；完成後要能說出自己看見的證據。
頁面的圖片破圖，且一個狀態區塊沒有樣式；你需要找第一個失敗層。
起始狀態：圖片 src 尚未指向 missingPath，Console 無本練習記錄，DOM 也沒有 inspected 標記。
同一次操作可觀察 missing URL/error、Console 記錄與 Elements data-debug-inspected=true。
驗收證據：missing resource URL/error、Console recorded=true、Elements marked=true
樣式沒有出現、按鈕沒反應、圖片破圖或畫面內容與檔案不一致時。
常見混淆：Network 的 404 不是 JavaScript 語法錯誤；Elements 也不是磁碟上尚未儲存的 HTML 原始碼。
這段程式是理解起點，不是要你直接跳過 Starter。
先問檔案有沒有到，再問程式有沒有跑，最後確認頁面實際長什麼樣。
正式說法：Network 面板觀察 request/response；Console 觀察 JavaScript runtime 與記錄；Elements 觀察當前 DOM、attribute 與樣式命中。
請求一個不存在的本地圖片，在 error handler 記錄 Console，再為實際 DOM 加上 data-debug-inspected。每一步都留下可觀察結果；如果沒看到，先看「卡住先查」。
檔案：files/starter/index.html 定位：先在 Network 找 intentionally-missing.png，不要先改 selector。
要做：先重新載入 Starter，記錄目前畫面、DOM、Computed、Console 或文件內容。
預期：能指出「先在 Network 找 intentionally-missing.png，不要先改 selector。」目前的缺口。
證據：保存 files/starter/index.html 的目前狀態，並指出下一步只會修改哪個檔案責任。
卡住先查：確認開啟的是 files/starter/index.html，且定位到 先在 Network 找 intentionally-missing.png，不要先改 selector。。
檔案：files/starter/index.html 定位：先在 Network 找 intentionally-missing.png，不要先改 selector。
要做：產生本地 missing resource，依 Network、Console、Elements 顯示三組不同證據。
預期：同一次操作可觀察 missing URL/error、Console 記錄與 Elements data-debug-inspected=true。
證據：missing resource URL/error、Console recorded=true、Elements marked=true
卡住先查：先在 Network 找 intentionally-missing.png，不要先改 selector。
檔案：files/starter/index.html 定位：先在 Network 找 intentionally-missing.png，不要先改 selector。
要做：重新整理頁面，再逐項比對預期結果與 evidence。
預期：同一次操作可觀察 missing URL/error、Console 記錄與 Elements data-debug-inspected=true。
證據：missing resource URL/error、Console recorded=true、Elements marked=true
卡住先查：先在 Network 找 intentionally-missing.png，不要先改 selector。
這個示範只讓你看懂概念，不會替你修改 Starter，也不會自動宣告完成。
Network：尚未檢查
Console：尚未檢查
Elements：尚未檢查
勾選只是學習紀錄；真正完成仍要回到 Starter 的實際結果。
依序只問三題：資源到了嗎？程式跑了嗎？DOM 是預期的嗎？
先在 Network 依 missing URL 定位，再找 Console 的 intentional debug 記錄，最後檢查 data-debug-inspected。
完整解答與原因：本練習先讓不存在的本地圖片觸發 error，在 handler 記錄 Console，再將目標 DOM 標記 data-debug-inspected=true；三個證據分屬載入、執行與 DOM 層。