INTEGRATED LAB · Starter

開發環境與瀏覽器排錯|整合 Lab

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

最後整合任務

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

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

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

依序回看每個 topic

整合不是重新背一遍名詞;是把每個 topic 的責任放回同一份作品。

  1. 1. file:// 與 localhost 的資源來源差異
    files/starter/index.html|網址列與畫面顯示一致的 protocol、origin、href
    回到 topic 說明
  2. 2. 儲存→一般重新整理→強制重新整理
    files/starter/index.html|可見版本 before/after、navigation.type、transferSize 與 cacheCandidates
    回到 topic 說明
  3. 3. Network→Console→Elements 的排錯順序
    files/starter/index.html|missing resource URL/error、Console recorded=true、Elements marked=true
    回到 topic 說明

四個整合停點

每個停點都要留下檔案、畫面或瀏覽器證據。

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

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

    操作:逐項讀取 outcomes,執行一次現況操作。

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

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

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

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

  2. Step 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,只修該處。

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

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

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

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

    預期:3/3 module 通過。

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

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

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

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

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

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

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

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

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

完成本階段後,重新載入並保存整合證據。

回到自主學習入口