觀察 — 用 curl 與開發者工具閱讀真實的 HTTP
curl -v 的 > 是送出的請求，< 是收到的回應。-I 只看標頭，-L 追蹤重新導向。搭配開發者工具的 Network 分頁，把 3 點組合閱讀法套用到實物上。
從教材裡的 HTTP，到真實的 HTTP
到前一章為止的 5 章，往返書信的書寫格式・動詞・回覆的數字・附註・快取，閱讀的工具都到齊了。本章要把它們套用到實物上。工具有 2 個 — 命令列的 curl，以及瀏覽器的開發者工具。
這 2 個的角色略有不同。curl 是把 1 條請求原原本本送出、讓你看到原始文字的顯微鏡；開發者工具是把整個頁面幾十條請求一覽無遺的雷達。深入看 1 條用 curl，從整體找異常用 Network 分頁，如此區分使用。
curl -v — 往返書信原樣流過
執行 curl -v https://example.com/（-v 是 verbose，詳細顯示），連同連線的經過，第 1 章讀過的骨架會原樣流過畫面。讀法的關鍵是行首的記號。
GET / HTTP/1.1）與請求標頭HTTP/1.1 200 OK）與回應標頭也就是說，> 的那一塊是「請求了什麼」，< 的第 1 行是「結果如何」，接下來的 < 行是「條件與補充」— 3 點組合就這樣原樣排列著。
curl -v 輸出的註解圖。只要分得出 3 種記號（* / > / <），再長的輸出都能切成「準備」「請求的事」「回來的事」3 個區塊。
-I 與 -L — 只看標頭・追到轉送的盡頭
掌握調查中頻繁出現的 2 個選項。
curl -I（大寫的 I）是「只給我標頭」。因為用 HEAD 方法（第 2 章）發出請求，回來的只有狀態行與標頭。Content-Type・Content-Length・Cache-Control 這些附註，不下載本文就能確認。
$ curl -I https://example.com/
HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Content-Length: 1256
Cache-Control: max-age=86400
curl -L 是「請追到轉送的盡頭」。curl 預設不追蹤重新導向，會把 301/302 的回覆原樣呈現。這種誠實對調查很有用，「想轉送到哪裡」可以從 Location 標頭確認。想要最終內容時再加上 -L。瀏覽器總是自動做著相當於 -L 的動作，所以也可以說，用 curl 才第一次觀察得到「轉送本身」。
練習 6-1 — 閱讀 curl 的輸出
curl -v 的記號，以及 -I・-L 的使用區分。第 1 章的骨架會原樣出現。
Q1. curl -v https://example.com/ 的輸出中，行首的 > 與 < 的正確意義是哪一個？
箭頭是通訊的方向。> 是從自己往伺服器（送出 = 請求行與請求標頭），< 是從伺服器往自己（接收 = 狀態行與回應標頭）。第 1 章讀過的骨架，就原樣出現在這 2 種行裡。它們不是表示錯誤或正常、加密或明文的記號。
Q2. 想不下載本文就確認巨大檔案的 Content-Type 與 Content-Length 時，最合適的 curl 用法是哪一個？
-I 是送出 HEAD 請求的選項，回來的只有標頭（第 2 章 HEAD 的登場時機）。-L 是追蹤重新導向，-o 是把本文存成檔案（正是把它下載下來），--data 是 POST 送出，方向與目的相反。「只想看標頭」在調查中頻繁出現，-I 值得練到順手。
Q3. 執行 curl https://example.com/old-page 只回來 301 的回應，頁面的內容沒有顯示。能自動追到轉送目的地、取得內容的選項是哪一個？
curl 預設不追蹤重新導向，會把 301/302 的回應原樣呈現給你（在調查中這種誠實很好用）。加上 -L 就會自動向 Location 標頭的轉送目的地重新請求，直到取得最終的內容。-I 是只看標頭，-v 是詳細顯示，-s 是關閉進度顯示，都不會追蹤轉送。
開發者工具的 Network 分頁 — 懂了欄位的意義就不可怕
在瀏覽器打開開發者工具（多數環境是 F12），選擇 Network 分頁並重新載入頁面，該頁面發出的所有請求就會一行一條地排列。首先要讀的欄位有 4 個。
(disk cache) / (memory cache)，代表沒有向伺服器發出請求（第 5 章 fresh 的出口）。304 的行傳輸量應該只有數百位元組點擊某一行會打開 Headers 面板，可以確認請求行・狀態行・所有標頭 — 也就是本課程一路閱讀過來的那些文字本身。
還有一個要記住的核取方塊：Disable cache。它是只在開發者工具開著的期間停用快取、總是向伺服器取得的設定。在「修改沒有反映」時，它是切分「是快取的錯，還是真的沒有反映」的最短工具。
典型的觀察步驟 — 把 3 點組合套用到實物
被說「顯示怪怪的」「API 失敗了」時，整理一套符合本課程之型的步驟。
Step 4 之所以有效，是因為 curl 會送出乾乾淨淨的 1 條。在瀏覽器重現的問題若在 curl 不重現，該懷疑的是快取或 Cookie 等瀏覽器側的狀態 — 反過來若 curl 也重現，就能鎖定在伺服器側。
練習 6-2 — 閱讀 Network 分頁
在瀏覽器的開發者工具中閱讀同樣的 3 點組合。關鍵是快取的呈現方式。
Q4. 在開發者工具的 Network 分頁，某個 CSS 檔案那一行的 Size 欄顯示著 (disk cache)。正確的意義是哪一個？
Size 欄的 (disk cache) 或 (memory cache)，就是第 5 章「fresh — 連請求都不發出」的出口在現實中現身的場面。不是從伺服器，而是從瀏覽器自身的快取讀入的。也就是說「明明修好了伺服器卻沒變」時，只要有這個顯示，原因幾乎就確定了。這不是伺服器端磁碟或檔案損壞的話題。
Q5. 勾選 Network 分頁的「Disable cache」的正確目的是哪一個？
Disable cache 是「只在開發者工具開著的期間，不使用瀏覽器快取」的設定。可以在不被快取干擾的情況下，確認修改後的 CSS 或 JS 是否已反映。因為不用快取，顯示反而會變慢，而且不會碰到伺服器端或 CDN 的快取。它是開發中的定番設定，但也請記得關閉工具後就會恢復原狀。
Q6. 接到「頁面顯示怪怪的」的回報而打開 Network 分頁時，符合本課程之型的最合適觀察第一步是哪一個？
這是 3 點組合閱讀法的實踐形。先讀失敗行的「結果如何」（Status），用百位數分類是誰的問題，接著是「請求了什麼」（方法與 URL），最後前進到「條件與補充」（標頭）。從精讀全部內文或重新安裝開始，順序沒有效率；Time 欄是效能調查的工具 — 錯誤調查的第一步是狀態碼。
本章帶回家的重點
- curl -v 是 > = 送出的東西、< = 收到的東西、* = 連線的經過。3 點組合原樣排列
- -I 是只看標頭（HEAD），-L 是追到重新導向的盡頭。預設不追蹤轉送的誠實，對調查很有效
- Network 分頁依 Status → 方法與 URL → Headers 的順序讀。Size 欄的
(disk cache)是「請求沒有發出」的標記 - 瀏覽器能重現而 curl 不能重現，就是瀏覽器側的狀態；curl 也能重現，就是伺服器側 — 切分的定石
工具已全部到齊。最終章是綜合演練 — 把本課程的型套用到 8 個貼近實務的案例上解讀。