LESSON-01 · 自主延伸

開發環境與瀏覽器排錯

把「開發環境與瀏覽器排錯」拆成 3 個可獨立完成、可重設、可驗證的自主學習 module。

1. 現在要做什麼

成果：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

需要的檔案：files/starter/index.html（整合起點，保留跨 module 的最小缺口。）

完成後：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

0 / 7 個操作已記錄

2. 先備自我檢查

逐項展開；答不出來時先走補救連結，不必硬做。

已完成本章基礎練習並能找到 Starter。

自我檢查：我能否指出本章 Starter 入口與唯一 TODO？

不足時補救：回到本章 README，先完成基礎練習與入口導覽。

能開啟本機 HTML 並讀取至少一種瀏覽器證據。

自我檢查：我能否開啟 Elements、Console 或 Network 並找到本頁？

不足時補救：先開 DevTools，重新整理一次，確認目前文件與第一筆 request。

3. 完整學習目標與 Learning Map

每一個目標只對應一個 module；成功狀態必須能指出證據。

能從 URL 與 origin 判斷頁面由檔案系統或本機伺服器提供。

為什麼重要
開啟來源會影響 origin、資源請求、CORS 與部分 Web API；不先確認來源，後面的錯誤很容易判斷錯方向。
完成條件
以檔案直開與 localhost 各開同一頁，不查看 Solution。
成功狀態
畫面同時列出真實 protocol、origin 與 href，並能說明 file: 與 http: 的差異。
證據位置
網址列與畫面顯示一致的 protocol、origin、href

能以畫面版本與 Navigation/Resource Timing 證據區分檔案未儲存、一般重載與繞過快取重取。

為什麼重要
舊畫面不一定是程式錯誤；先分清儲存與快取，才不會在正確程式碼上反覆修改。
完成條件
在版本字串可見的頁面，依序儲存、重載並讀取 Navigation/Resource Timing。
成功狀態
畫面版本由 saved-v1 變 saved-v2，並顯示 navigation.type、transferSize 與 cache candidates。
證據位置
可見版本 before/after、navigation.type、transferSize 與 cacheCandidates

能依資源請求、程式執行、實際 DOM 三層順序定位白畫面或樣式失效。

為什麼重要
先看 Network 能排除檔案根本沒載入；再看 Console 找執行失敗；最後才在 Elements 核對 selector 與 DOM，可避免跳著猜。
完成條件
在本機頁面觸發一個故意不存在的圖片資源，全程不對外部服務發請求。
成功狀態
同一次操作可觀察 missing URL/error、Console 記錄與 Elements data-debug-inspected=true。
證據位置
missing resource URL/error、Console recorded=true、Elements marked=true

4. 3 個知識模組與 Micro Labs

依序展開；每次只改一項，操作後確認該模組自己的 DOM、progress 與 evidence。

1file:// 與 localhost 的資源來源差異

完整解釋

白話：file:// 是直接讀電腦裡的檔案；localhost 是瀏覽器透過 HTTP 跟本機伺服器要頁面。

正式說法：URL scheme 是 file: 時不經 HTTP server，localhost 則使用 http: 或 https: origin；origin 由 scheme、host 與 port 組成。

何時使用：頁面直開正常、改用 Live Server 卻失敗，或 fetch/module/CORS 表現不同時先檢查。

修改前後：Before：只說「我開了 HTML」。After：能以 protocol、origin、href 三個值指出真實來源。

常見混淆：localhost 不是公開網站；它是同一台電腦上的本機網路服務，也不等於雙擊 HTML 的 file://。

名詞與最小範例

file:// 與 localhost 的資源來源差異 File URL versus localhost origin

白話
file:// 是直接讀電腦裡的檔案；localhost 是瀏覽器透過 HTTP 跟本機伺服器要頁面。
正式定義
URL scheme 是 file: 時不經 HTTP server，localhost 則使用 http: 或 https: origin；origin 由 scheme、host 與 port 組成。
何時使用
頁面直開正常、改用 Live Server 卻失敗，或 fetch/module/CORS 表現不同時先檢查。
最小範例
在 Console 執行 `({ protocol: location.protocol, origin: location.origin, href: location.href })`。
驗收證據
網址列與畫面顯示一致的 protocol、origin、href
常混淆
localhost 不是公開網站；它是同一台電腦上的本機網路服務，也不等於雙擊 HTML 的 file://。

Micro Lab｜file:// 與 localhost 的資源來源差異

情境：同事說「本機都一樣」，但頁面在雙擊與 localhost 的資源表現不同。

起始狀態：畫面尚未讀取任何 location 值。

  1. 按下檢查來源，再分別以 file:// 與 localhost 開本頁，比較三個真實值。
  2. 執行下方操作，觀察獨立的 DOM 與資料狀態。
  3. 依證據欄位重新驗收。

目前主題：file:// 與 localhost 的資源來源差異

protocol: 未讀取

origin: 未讀取

href: 未讀取

尚未執行；DOM data-state=starter。

預期：畫面同時列出真實 protocol、origin 與 href，並能說明 file: 與 http: 的差異。

證據：網址列與畫面顯示一致的 protocol、origin、href

第一個檢查：先看網址列是 file: 還是 http:，再對照畫面 protocol。

重設：重新整理，或改用另一種開啟方式後再按一次。

卡住時

  • 症狀：兩次都顯示 http: 而且 origin 一樣。
    可能原因：兩次其實都在同一個 localhost 分頁操作。
    先檢查：對照兩個分頁完整 href，確認一個以 file:/// 開頭。
    修正：從 Finder 另開實體 index.html，保留原 localhost 分頁再比較。

理解檢查

哪組證據能直接區分檔案直開與 localhost？

尚未作答。

查看解釋

這三個值直接來自當前 URL 與 origin，不受頁面文案影響。

本模組官方來源：MDN｜Setting up a local testing server

2儲存→一般重新整理→強制重新整理

完整解釋

白話：先確定編輯器真的存檔，再讓瀏覽器重新要資源；強制重整是在排除快取干擾。

正式說法：reload 會產生 navigation entry；Resource Timing 的 transferSize 可作為網路傳輸與快取候選證據，但不能單獨當成所有瀏覽器的快取定論。

何時使用：修改 HTML/CSS/JS 後畫面沒變，但 Console 也沒有新錯誤時。

修改前後：Before：凭感覺連按重新整理。After：版本字串與 timing 證據能對上這次載入。

常見混淆：強制重新整理不會幫你儲存編輯器中尚未儲存的檔案。

名詞與最小範例

儲存→一般重新整理→強制重新整理 Save, reload, and hard reload

白話
先確定編輯器真的存檔，再讓瀏覽器重新要資源；強制重整是在排除快取干擾。
正式定義
reload 會產生 navigation entry；Resource Timing 的 transferSize 可作為網路傳輸與快取候選證據，但不能單獨當成所有瀏覽器的快取定論。
何時使用
修改 HTML/CSS/JS 後畫面沒變，但 Console 也沒有新錯誤時。
最小範例
顯示 `performance.getEntriesByType('navigation')[0]?.type` 與 resource transferSize 總和。
驗收證據
可見版本 before/after、navigation.type、transferSize 與 cacheCandidates
常混淆
強制重新整理不會幫你儲存編輯器中尚未儲存的檔案。

Micro Lab｜儲存→一般重新整理→強制重新整理

情境：你已改過標題，但瀏覽器似乎還是舊版。

起始狀態：版本固定為 saved-v1，尚未讀取本次 navigation/resource timing。

  1. 按下版本檢查，讓畫面版本從 saved-v1 變 saved-v2，同時讀取 navigation 與 resource timing。
  2. 執行下方操作，觀察獨立的 DOM 與資料狀態。
  3. 依證據欄位重新驗收。

目前主題：儲存→一般重新整理→強制重新整理

畫面版本：saved-v1

navigation：未讀取

cache：未讀取

尚未執行；DOM data-state=starter。

預期：畫面版本由 saved-v1 變 saved-v2，並顯示 navigation.type、transferSize 與 cache candidates。

證據：可見版本 before/after、navigation.type、transferSize 與 cacheCandidates

第一個檢查：先確認畫面 before 是 saved-v1，再看 navigation.type。

重設：按全部重設將版本恢復 saved-v1；重新整理可重新讀 timing。

卡住時

  • 症狀：按了重新整理，版本文字還是舊的。
    可能原因：編輯器的檔案尚未儲存，或瀏覽器開的不是這份檔案。
    先檢查：先看編輯器分頁的未儲存標記，再對照網址列完整 href。
    修正：儲存正確檔案後先做一般重載；仍舊才使用強制重載。

理解檢查

畫面沒變時，第一個要分開的兩件事是什麼？

尚未作答。

查看解釋

內容來源不對時，修改程式本身不會解決問題。

本模組官方來源：MDN｜HTTP caching

3Network→Console→Elements 的排錯順序

完整解釋

白話：先問檔案有沒有到，再問程式有沒有跑，最後確認頁面實際長什麼樣。

正式說法：Network 面板觀察 request/response；Console 觀察 JavaScript runtime 與記錄；Elements 觀察當前 DOM、attribute 與樣式命中。

何時使用：樣式沒有出現、按鈕沒反應、圖片破圖或畫面內容與檔案不一致時。

修改前後：Before：在程式碼中隨機修改。After：先記錄第一個失敗的 request/runtime/DOM 證據再修正。

常見混淆：Network 的 404 不是 JavaScript 語法錯誤；Elements 也不是磁碟上尚未儲存的 HTML 原始碼。

名詞與最小範例

Network→Console→Elements 的排錯順序 Network, Console, then Elements debugging chain

白話
先問檔案有沒有到，再問程式有沒有跑，最後確認頁面實際長什麼樣。
正式定義
Network 面板觀察 request/response；Console 觀察 JavaScript runtime 與記錄；Elements 觀察當前 DOM、attribute 與樣式命中。
何時使用
樣式沒有出現、按鈕沒反應、圖片破圖或畫面內容與檔案不一致時。
最小範例
請求一個不存在的本地圖片，在 error handler 記錄 Console，再為實際 DOM 加上 data-debug-inspected。
驗收證據
missing resource URL/error、Console recorded=true、Elements marked=true
常混淆
Network 的 404 不是 JavaScript 語法錯誤；Elements 也不是磁碟上尚未儲存的 HTML 原始碼。

Micro Lab｜Network→Console→Elements 的排錯順序

情境：頁面的圖片破圖，且一個狀態區塊沒有樣式；你需要找第一個失敗層。

起始狀態：圖片 src 尚未指向 missingPath，Console 無本練習記錄，DOM 也沒有 inspected 標記。

  1. 產生本地 missing resource，依 Network、Console、Elements 顯示三組不同證據。
  2. 執行下方操作，觀察獨立的 DOM 與資料狀態。
  3. 依證據欄位重新驗收。

目前主題：Network→Console→Elements 的排錯順序

故意失敗的本地資源

Network：尚未檢查

Console：尚未檢查

Elements：尚未檢查

尚未執行；DOM data-state=starter。

預期：同一次操作可觀察 missing URL/error、Console 記錄與 Elements data-debug-inspected=true。

證據：missing resource URL/error、Console recorded=true、Elements marked=true

第一個檢查：先在 Network 找 intentionally-missing.png，不要先改 selector。

重設：按全部重設或重新整理；missing resource 是故意本地失敗，不會寫入外部系統。

卡住時

  • 症狀：Network 看到 missing request，但 Elements 沒有 inspected 標記。
    可能原因：error handler 未執行，或 elementsSelector 沒找到實際節點。
    先檢查：先看 Console 是否有 intentional debug 記錄，再於 Elements 搜 data-debug-root。
    修正：修正 handler 綁定或 selector，只重跑這個 missing resource。

理解檢查

如果 CSS 檔根本 404，第一個應修正的是什麼？

尚未作答。

查看解釋

檔案沒載入時，內部 selector 和權重還沒有機會執行。

本模組官方來源：MDN｜Browser developer tools

5. 開發環境與瀏覽器排錯｜整合 Lab

情境：在同一份章節作品中整合 3 個 module，排除單項通過但組合失敗的問題。

交付：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

尚未執行整合步驟。

  1. 1觀察整合 Starter 並找出第一個未通過 module。

    檔案：files/starter/index.html　定位：#observe

    操作：逐項讀取 outcomes，執行一次現況操作。

    // OBSERVE：不修改程式，先記錄第一個失敗 moduleId。

    預期：能指出第一個未通過 module。

    證據：第一個 moduleId 與缺少的 evidence。

    原因：先觀察可避免未重現就直接改答案。

    卡住先查：確認開啟的是 files/starter/index.html。

  2. 2依 module 順序修改，一次只加入一個責任。

    檔案：files/starter/index.html　定位：#modify

    操作：按下檢查來源，再分別以 file:// 與 localhost 開本頁，比較三個真實值。 → 按下版本檢查，讓畫面版本從 saved-v1 變 saved-v2，同時讀取 navigation 與 resource timing。 → 產生本地 missing resource，依 Network、Console、Elements 顯示三組不同證據。

    // 01-01-file-localhost: 按下檢查來源，再分別以 file:// 與 localhost 開本頁，比較三個真實值。
// 01-02-topic: 按下版本檢查，讓畫面版本從 saved-v1 變 saved-v2，同時讀取 navigation 與 resource timing。
// 01-03-network-console-elements: 產生本地 missing resource，依 Network、Console、Elements 顯示三組不同證據。

    預期：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

    證據：網址列與畫面顯示一致的 protocol、origin、href；可見版本 before/after、navigation.type、transferSize 與 cacheCandidates；missing resource URL/error、Console recorded=true、Elements marked=true

    原因：逐項整合能把回歸定位到明確 module。

    卡住先查：回到第一個未通過的 module，只修該處。

  3. 3驗證所有 module 在整合後仍成立。

    檔案：files/solution/index.html　定位：#verify

    操作：重新整理並依 outcomes 順序重跑所有證據。

    // VERIFY：逐項記錄 pass/fail，不以看到畫面代替 evidence。

    預期：3/3 module 通過。

    證據：每個 moduleId 都有實際結果與重設後重現紀錄。

    原因：單項通過不代表整合後沒有 selector、id 或狀態衝突。

    卡住先查：若失敗，回到第一個失敗 module，不同時修多項。

  4. 4把本章責任轉用到不同內容情境。

    檔案：files/starter/index.html　定位：#challenge

    操作：替另一個商家情境重做，仍達成：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

    // CHALLENGE：只替換內容與資料，不新增框架或跳過 self-check。

    預期：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

    證據：轉用後的作品與全數 module self-check。

    原因：能轉用才代表理解責任，而非只記住原範例。

    卡住先查：先確認共同基底與 module id 未被改壞。

重設方法：重新載入 files/starter/index.html；若 localStorage 不可用，使用頁面內記憶狀態並提供重設按鈕。

6. 自學挑戰與三層提示

挑戰：將同一組責任轉用到另一個商家情境，仍達成：能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。

限制：不新增框架。；保留 module id 與驗收證據。

提交證據：提交可直接開啟的作品與逐項 self-check。

提示 1｜方向提示

拆小：在「開發環境與瀏覽器排錯」先完成第一個尚未通過的 module：file:// 與 localhost 的資源來源差異，不同時修改其他責任。

提示 2｜關鍵片段

串接：依 01-01-file-localhost → 01-02-topic → 01-03-network-console-elements 核對各自輸入與證據。

提示 3｜完整解答與原因

完整解答與原因：依序執行 按下檢查來源，再分別以 file:// 與 localhost 開本頁，比較三個真實值。 → 按下版本檢查，讓畫面版本從 saved-v1 變 saved-v2，同時讀取 navigation 與 resource timing。 → 產生本地 missing resource，依 Network、Console、Elements 顯示三組不同證據。；這個順序能把每個結果對回單一 module，避免整合後無法定位。

完整解答預設收合；先留下自己的嘗試，再開第三層。

7. 症狀式除錯指南

8. 理解測驗、驗收證據與下一步

哪個狀態代表 01-01-file-localhost 完成？

尚未作答。

查看解釋

開啟來源會影響 origin、資源請求、CORS 與部分 Web API；不先確認來源，後面的錯誤很容易判斷錯方向。

哪個狀態代表 01-02-topic 完成？

尚未作答。

查看解釋

舊畫面不一定是程式錯誤；先分清儲存與快取，才不會在正確程式碼上反覆修改。

哪個狀態代表 01-03-network-console-elements 完成？

尚未作答。

查看解釋

先看 Network 能排除檔案根本沒載入；再看 Console 找執行失敗；最後才在 Elements 核對 selector 與 DOM，可避免跳著猜。

驗收清單

官方來源

回到課程地圖選擇下一章