Learning Objectives
- 用快捷鍵或選單開啟 Chrome 開發者工具，說出主要面板的用途
- 在 Console 面板直接執行 JavaScript，並用 console.log、warn、error 等方法輸出訊息
- 從主控台的錯誤訊息找出錯誤的種類與位置
- 用 Network 面板查看網頁發出的請求、狀態碼與回應內容
為什麼要學開發者工具
寫 JavaScript 時，程式出錯並不會在網頁上跳出提示，畫面只是「沒反應」。錯誤訊息、程式印出的內容、網頁向伺服器要了哪些資料， 都在瀏覽器內建的開發者工具（Chrome DevTools）裡。學會看開發者工具，是寫網頁程式的第一步。
開發者工具可以做到：
- 直接檢視與修改網頁的 HTML（DOM）和 CSS，立刻在畫面上看到結果
- 在主控台看錯誤訊息、程式輸出，也可以直接輸入 JavaScript 執行
- 查看網頁載入了哪些檔案、每個請求花了多少時間
- 模擬手機、平板的螢幕尺寸，檢查網頁在不同裝置上的樣子
這一課以 Chrome 為例；Edge 使用相同的核心，開發者工具幾乎一樣，Firefox 也有功能類似的開發者工具。
開啟開發者工具，認識各個面板
打開一個你常用的網站，跟著下面的步驟在自己的 Chrome 上操作一次（投影片 Lab01）。每完成一步就按「下一步」。
-
1
開啟開發者工具
三種方法任選一種：
- 快捷鍵：Windows／Linux 按 F12 或 Ctrl＋Shift＋I；macOS 按 Command＋Option＋I
- 在網頁上按右鍵，選「檢查」：會直接選取你按的那個元素
- Chrome 右上角的選單 →「更多工具」→「開發人員工具」
開發者工具通常出現在視窗右側或下方，可以用它右上角的「⋮」選單切換停靠位置。
-
2
切換到手機畫面（裝置模式）
點開發者工具左上角的手機與平板圖示（Toggle device toolbar），或按 Ctrl＋Shift＋M（macOS：Command＋Shift＋M）。 網頁會縮成手機的寬度，上方可以選擇不同的裝置型號、調整寬度，用來檢查網頁的自適應（RWD）版面。
裝置模式只是模擬螢幕尺寸與觸控，無法完全取代在真正的手機上測試。
-
3
認識各個面板
開發者工具上方是一排分頁，每一個叫做一個面板（panel）。中文介面的名稱寫在括號裡：
面板 用途 Elements（元素） 檢視、修改 HTML 與 CSS；在 HTML 上連按兩下就能直接編輯 Console（主控台） 看錯誤訊息與程式輸出，直接輸入 JavaScript 執行 Sources（來源） 看網頁載入的程式碼，設定中斷點（breakpoint）讓程式停下來一行一行檢查 Network（網路） 網頁發出的每一個請求：檔案名稱、狀態碼、大小與時間 Performance（效能） 錄下一段時間內網頁做了哪些事、各花多少時間 Memory（記憶體） 查看網頁使用的記憶體，找出記憶體洩漏 Application（應用程式） 檢查 cookie、localStorage 等網頁儲存的資料 Privacy and security 檢查網站的憑證與 HTTPS 狀態（Chrome 134 之前叫 Security） 面板太多放不下時，會收在右邊的「»」裡。
-
4
用 Elements 面板改網頁
按 Ctrl＋Shift＋C（macOS：Command＋Shift＋C）進入選取模式，把滑鼠移到網頁上的標題並點一下，Elements 面板會跳到對應的 HTML。
在標題的文字上連按兩下，改成別的字，按 Enter：畫面立刻跟著改變。右側的 Styles 窗格可以修改 CSS，例如把
color改成red。這些修改只存在你的瀏覽器裡，重新整理網頁就會恢復原狀，所以可以放心嘗試。
-
5
開啟 Console 面板
按 Ctrl＋Shift＋J（macOS：Command＋Option＋J）會直接開啟 Console 面板。
在
>提示符號後面輸入1 + 2按 Enter，下一行會顯示3；輸入document.title會顯示網頁的標題。 主控台可以直接執行任何 JavaScript，而且是在目前這個網頁上執行，例如輸入document.body.style.background = 'gold'，網頁背景就變成金色。按 Shift＋Enter 可以換行輸入多行程式；按向上鍵可以叫出剛剛輸入過的指令。
-
6
開啟 Network 面板，重新整理網頁
切換到 Network 面板，按 F5 重新整理網頁。開發者工具開著時才會記錄，所以要先開面板再重新整理。
下方會列出網頁載入的每一個檔案：HTML 文件、JavaScript、CSS、圖片、字型等。點其中一個檔名（例如副檔名是
.js的檔案）， 右邊的 Headers 分頁顯示請求的網址與狀態碼，Preview、Response 分頁顯示伺服器回傳的內容。
Console 面板與 console 方法
程式裡可以用 console 物件的方法，把訊息印到主控台。這是最常用的除錯方法：在可疑的地方印出變數的值，看看和你想的一不一樣。
| 方法 | 用途 |
|---|---|
console.log(值1, 值2, …) |
一般輸出，多個值之間自動加空白 |
console.info(…) |
資訊（Chrome 裡的樣子和 log 相同） |
console.warn(…) |
警告，黃色底 |
console.error(…) |
錯誤，紅色底，並附上呼叫的位置 |
console.table(陣列或物件) |
用表格顯示陣列或物件 |
console.assert(條件, 訊息) |
條件是 false 時才印出錯誤訊息，條件成立時什麼都不印 |
console.count(標籤) |
計算這一行被執行了幾次 |
console.time(標籤)、console.timeEnd(標籤) |
計算兩行之間經過的時間 |
console.clear() |
清空主控台 |
主控台上方的篩選器可以只顯示錯誤、警告或一般訊息；相同的訊息連續出現時會堆疊成一行，前面顯示次數。 在主控台按右鍵選「Save as…」可以把內容存成記錄檔（投影片 Lab02）。
看懂錯誤訊息：程式出錯時，主控台會出現紅色的一行，例如
Uncaught ReferenceError: score is not defined
at app.js:12
ReferenceError 是錯誤的種類（用了沒有宣告的名字），後面是說明，app.js:12 是出錯的檔案與行號，點它會跳到 Sources 面板的那一行。
Uncaught 表示這個錯誤沒有被程式接住，程式就停在這裡，後面的程式不會執行。
想一想：開發者工具與主控台
在 Windows 的 Chrome 上，想直接開啟 Console 面板，要按哪一組快捷鍵？
想在網頁上直接修改一個標題的文字和 CSS 顏色，試試看效果，應該用哪個面板？
主控台出現 Uncaught ReferenceError: total is not defined at app.js:8，最可能的原因是什麼？
console.assert(1 > 2, '1 沒有大於 2') 會在主控台顯示什麼？
Network 面板
Network 面板記錄網頁發出的每一個請求（request）。每一列是一個檔案或一筆資料，主要欄位：
| 欄位 | 意思 |
|---|---|
| Name | 請求的檔案名稱或網址 |
| Status | HTTP 狀態碼：200 成功、304 沒有變更（用瀏覽器快取）、404 找不到、500 伺服器錯誤 |
| Type | 資源的類型：document、script（JavaScript）、stylesheet、png、fetch、xhr… |
| Initiator | 是誰發出這個請求：HTML 裡的標籤，或某支 JavaScript 的哪一行 |
| Size | 傳輸的大小 |
| Time | 從送出請求到下載完成的時間；右邊的 Waterfall 把時間畫成長條圖 |
上方的工具列：
- 紅色圓點：開始、停止記錄
- 清除（圓圈加斜線）：清空目前的紀錄
- 篩選：輸入文字找檔名，或用 All、Fetch/XHR、JS、CSS、Img 等按鈕只看某一類；寫 AJAX 程式時最常用 Fetch/XHR
- Preserve log：勾選後，換頁或重新整理時不會清掉紀錄
點一個請求可以看細節：Headers（網址、方法、狀態碼、標頭）、Preview（整理過的預覽，JSON 會變成可以展開的樹）、Response（原始內容）、Timing（各階段花的時間）。
下面的沙箱沒有真的伺服器，網路請求會由這一課準備好的假資料回應；主控台裡 → GET 開頭的那一行，就相當於 Network 面板裡的一筆紀錄。
想一想：Network 面板
Network 面板裡一個請求的 Status 是 404，代表什麼？
想知道某個請求是哪一支 JavaScript 的哪一行發出的，要看哪一個欄位？
網頁載入了幾十個檔案，你只想看 JavaScript 用 fetch 送出的資料請求，應該怎麼做？
重點精華回顧
- 開啟開發者工具：F12、Ctrl＋Shift＋I（macOS：Command＋Option＋I），或在網頁上按右鍵選「檢查」。
- Elements 改 HTML 與 CSS、Console 看輸出與錯誤、Sources 設中斷點、Network 看請求；裝置模式（Ctrl＋Shift＋M）模擬手機畫面。
- Console 面板可以直接執行 JavaScript；程式裡用
console.log、warn、error、table、assert等方法輸出訊息。 - 錯誤訊息包含錯誤種類、說明與檔案行號，
Uncaught表示程式在那裡停止了。 - Network 面板列出每個請求的名稱、狀態碼、類型、發起者、大小與時間；用 Fetch/XHR 篩選程式送出的資料請求。