Solution 要做什麼
對照完整答案、責任邊界與原因。
本主題檔案：files/index.html
定位：先看網址列是 file: 還是 http:，再對照畫面 protocol。
Solution · devtools-inspect
file:// 與 localhost 的資源來源差異
對照完整答案、責任邊界與原因。
本階段驗收
頁面不會替你修改檔案；請在實作檔完成後重新整理確認。
目前要處理
畫面尚未讀取任何 location 值。
預期看到
畫面同時列出真實 protocol、origin 與 href，並能說明 file: 與 http: 的差異。
在 Console 執行 `({ protocol: location.protocol, origin: location.origin, href: location.href })`。檔案清單
只在本階段資料夾內操作，避免改到其他章節。
index.html
入口檔案：從這份 HTML 開始觀察本堂主題結果。css/style.css
呈現層：只放本堂實作需要觀察的 CSS 規則。js/main.js
行為層：處理本堂操作、狀態與 Console 驗收訊息。
證據：網址列與畫面顯示一致的 protocol、origin、href
回到主題說明