最後整合任務
交付:能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
將同一組責任轉用到另一個商家情境,仍達成:能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
限制:不新增框架。;保留 module id 與驗收證據。
INTEGRATED LAB · Starter
在同一份章節作品中整合 3 個 module,排除單項通過但組合失敗的問題。
交付:能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
將同一組責任轉用到另一個商家情境,仍達成:能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
限制:不新增框架。;保留 module id 與驗收證據。
整合不是重新背一遍名詞;是把每個 topic 的責任放回同一份作品。
files/starter/index.html|網址列與畫面顯示一致的 protocol、origin、hreffiles/starter/index.html|可見版本 before/after、navigation.type、transferSize 與 cacheCandidatesfiles/starter/index.html|missing resource URL/error、Console recorded=true、Elements marked=true每個停點都要留下檔案、畫面或瀏覽器證據。
檔案:files/starter/index.html 定位:#observe
操作:逐項讀取 outcomes,執行一次現況操作。
// OBSERVE:不修改程式,先記錄第一個失敗 moduleId。預期:能指出第一個未通過 module。
證據:第一個 moduleId 與缺少的 evidence。
卡住先查:確認開啟的是 files/starter/index.html。
檔案: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,只修該處。
檔案:files/solution/index.html 定位:#verify
操作:重新整理並依 outcomes 順序重跑所有證據。
// VERIFY:逐項記錄 pass/fail,不以看到畫面代替 evidence。預期:3/3 module 通過。
證據:每個 moduleId 都有實際結果與重設後重現紀錄。
卡住先查:若失敗,回到第一個失敗 module,不同時修多項。
檔案:files/starter/index.html 定位:#challenge
操作:替另一個商家情境重做,仍達成:能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
// CHALLENGE:只替換內容與資料,不新增框架或跳過 self-check。預期:能用固定證據鏈判斷頁面開啟方式、更新是否生效與第一個錯誤位置。
證據:轉用後的作品與全數 module self-check。
卡住先查:先確認共同基底與 module id 未被改壞。
完成本階段後,重新載入並保存整合證據。
回到自主學習入口