各位午安,我們接續昨天的話題,如果你想要看你在點擊一個網站時所發生的事情,可以點開右上角的三個點然後查看更多工具中可以打開開發者選項
!
我們來看一下右邊的各個欄位

1. 元素 (Elements)
   這個面板讓你能夠檢視和即時編輯網頁的 HTML 結構和 CSS 樣式。

主要功能：

DOM 樹 (DOM Tree)： 左半邊顯示的是網頁的 HTML 結構，也就是「文件物件模型 (Document Object Model)」。你可以展開、摺疊、修改甚至刪除任何一個 HTML 標籤（元素）。

樣式窗格 (Styles Pane)： 右半邊顯示當前選取的 HTML 元素所套用的所有 CSS 樣式規則。你可以在這裡即時修改 CSS 屬性（例如顏色、大小、位置），並立刻在網頁上看到變更效果。這對於調整版面和設計非常有用。

其他子分頁： 還包含 Computed (計算後的最終樣式)、Layout (版面佈局資訊)、Event Listeners (事件監聽器) 等進階資訊。

常見用途：

「為什麼這個按鈕是藍色的？」 -> 在這裡檢查 CSS 規則。

「我想試試把標題文字變大一點。」 -> 直接在 Styles 窗格修改 font-size。

「這個區塊的邊界 (margin) 或內距 (padding) 是多少？」 -> 檢查 Computed 或 Layout 分頁。

2. 主控台 (Console)
   主控台就像是瀏覽器內建的命令列和訊息中心。

主要功能：

顯示日誌與錯誤： 開發者常使用 console.log() 來印出變數或訊息，方便追蹤程式執行狀況。當 JavaScript 程式碼出錯時，詳細的錯誤訊息也會顯示在這裡。

執行 JavaScript： 你可以直接在主控台輸入並執行任何 JavaScript 程式碼，與當前頁面互動。例如，你可以執行 document.title="新標題" 來直接更改網頁標題。

互動式除錯： 它是除錯（debug）過程中最常被使用的工具之一。

常見用途：

「為什麼點擊按鈕沒有反應？」 -> 檢查主控台是否有報錯。

「想知道某個變數目前的值是多少。」 -> 在程式碼中加入 console.log() 或直接在主控台輸入變數名稱。

3. 原始碼 (Sources)
   這個面板是一個 JavaScript 除錯器 (debugger)，讓你能夠檢視網站載入的所有原始檔案，並逐行追蹤程式碼的執行。

主要功能：

檔案瀏覽器： 左側可以瀏覽網站用到的所有檔案，包括 JavaScript、CSS、圖片等。

程式碼編輯器： 中間會顯示你所選檔案的內容。

除錯工具： 你可以在程式碼的特定行數設定「中斷點 (breakpoint)」。當程式執行到這一行時會暫停，此時你可以：

檢查變數： 查看當下所有變數的值。

逐行執行： 控制程式一步一步往下走，觀察執行流程。

監看運算式 (Watch)： 持續追蹤特定變數或運算式的變化。

呼叫堆疊 (Call Stack)： 查看是哪個函式呼叫了哪個函式，才執行到現在這一步。

常見用途：

「想知道點擊按鈕後，程式碼的詳細執行順序。」 -> 在對應的程式碼處設定中斷點。

「某個複雜的計算結果不對，我想看看是哪一步出錯了。」 -> 使用中斷點和逐行執行功能。

4. 網路 (Network)
   （這就是你截圖中正在使用的面板）
   網路面板會記錄瀏覽器為了載入和呈現網頁，所發出的所有網路請求 (request)。

主要功能：

請求列表： 顯示所有載入的資源，包括 HTML 文件、CSS 樣式表、JavaScript 腳本、圖片、字體，以及與後端伺服器溝通的 API 請求 (XHR/Fetch)。

請求詳情： 點擊任何一個請求，都可以看到詳細資訊，例如請求標頭 (Headers)、回傳的內容 (Response)、Cookies 等。

載入時間分析 (Waterfall)： 透過時間瀑布流圖，可以清楚看到每個資源的下載順序和花費時間，幫助你找出造成網頁載入緩慢的元兇。

狀態碼 (Status Code)： 查看請求是否成功 (例如 200 OK) 或失敗 (例如 404 Not Found, 500 Internal Server Error)。

常見用途：

「為什麼我的網站開很慢？」 -> 檢查是否有檔案太大或請求太花時間。

「為什麼圖片沒顯示出來？」 -> 檢查圖片請求是否為 404 失敗狀態。

「確認送出的表單資料是否正確，以及伺服器回傳了什麼。」 -> 檢查對應的 API 請求。

5. 效能 (Performance)
   這是一個進階的分析工具，用來記錄和分析網頁在運行期間的效能表現。

主要功能：

錄製執行過程： 你可以點擊錄製按鈕，然後在網頁上進行操作（例如捲動、點擊），DevTools 會記錄下這段時間內瀏覽器做的所有事情。

火焰圖 (Flame Chart)： 錄製結束後，會產生詳細的火焰圖，視覺化地呈現 JavaScript 的執行、頁面渲染 (Rendering)、繪製 (Painting) 等各項工作的時間佔用情況。

效能瓶頸分析： 幫助你找出導致頁面卡頓、掉幀或反應遲鈍的程式碼或渲染瓶頸。

常見用途：

「為什麼頁面捲動起來會卡卡的？」 -> 錄製一段捲動過程，分析是否有耗時過長的 JavaScript 或渲染任務。

「為什麼動畫不流暢？」 -> 分析動畫過程中每一幀的渲染時間。

6. 應用程式 (Application)
   這個面板讓你能夠檢查和管理網頁儲存在瀏覽器中的各種資料。

主要功能：

儲存空間管理：

本機儲存 (Local Storage) & 會話儲存 (Session Storage)： 查看、新增、修改、刪除網站儲存的鍵值對資料。

IndexedDB & Web SQL： 檢查更複雜的客戶端資料庫。

Cookies： 查看和管理網站儲存的 Cookie。

快取儲存 (Cache Storage)： 查看 Service Worker 快取的資源。

Service Workers： 除錯和管理用於離線應用 (PWA) 的 Service Worker。

常見用途：

「我想看看這個網站把我的登入狀態存在哪裡。」 -> 檢查 Cookies 或 Local Storage。

「我想清除這個網站的所有本地資料，模擬第一次訪問的狀態。」 -> 使用 "Clear storage" 功能。

「檢查 PWA 應用程式的離線功能是否正常運作。」

再來我們點進ITHome的主頁之後,我們可以看到有一個一般跟一個回應標頭,我們先看到一般的那個欄位,可以看到裡面有一個GET的方法,這個會隨著我們使用者的行為而有所不同,然後是回應的標頭,你可以在這個欄位當中看到網站回傳給你的資訊,而我們在做網站檢測的時候標頭也是我們檢查的一個點,假設說這個網站的回應標頭沒有HSTS,那就代表這個網站不強制使用HTTPS,存在些許的風險程度

而上一篇所談到的SESSION ,Cookie等資訊也可以在開發者工具看到,不過cookie是一個很敏感的資訊,所以讀者在玩的時候要記得不能流出cookie的資訊

明天我們就開始討論一下關於網頁的各種組成元素,我們明天見