---
title: F12 開發者工具
tags: 網頁組
---

## Chrome 開發工具 (DevTools)

- 元素面板 Elements : 可以看到當前網頁的 DOM 物件、HTML、CSS 並能修改。
- 控制面板 Console : 目前網頁訊息，可以與 JavaScript 進行命令互動。
- 來源面板 Sources : 可設定目前 JavaScript 的斷點，並測試運行。若網頁是架在本機，能直接存檔。
- 網路面板 Network : 檢測目前網頁由外向內、由內向外的網路流量，可以看到詳細這些流量的內容(requests header、post data ...)
- 性能面板 Performance : 紀錄網頁生命週期中發生的事件，用來調整網頁的性能。
- 內存面板 Memory : 用於檢測當前內存的使用狀態。
- 應用面板 Application : 檢測載入資源。 e.g. 資料庫 、 cookies 、 Cache
- Lighthouse : 用來 SEO 的。

# 如何開啟

在瀏覽器的畫面中，按下 F12、或是按下快捷鍵 CTRL + SHIFT + I，也可以使用滑鼠右鍵選單中的檢察開啟。

## Elements

開啟開發者工具後，切換到 Element 的介面，我們就會看到這個網頁的結構。
[【歌枠】第７６回！わためぇ Night Fever!!【角巻わため/ホロライブ４期生】
](https://www.youtube.com/watch?v=yQxX2SLbhOU)

我們也可以透過開發者工具中左上角的工具，來點擊網頁中的元素，就可以看到它是怎麼寫的。
[わため悪くないよね](https://www.youtube.com/watch?v=yQxX2SLbhOU)

### Device mode

Device mode 是Chrome開發者工具中一個可以要來模擬手機或平板電腦的工具，幫助你的網站能夠更切合手機或平板電腦需要。


#### 基本功能

1. 可以透過拖動欄位的方法調整

2. 可以透過更改數值作調整，前面為闊，後面為高

3. 可以透過點擊responsive，點選想模擬的特定設備

4. 可以點選上邊欄位，以模擬不同裝置大小

:::info
詳細操作方式可以查看 [Chrome 開發者工具 (Google devtool) 基礎教學](https://thewayeasy.com/chrome%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7google-devtool%E5%9F%BA%E7%A4%8E%E6%95%99%E5%AD%B8/)
:::

## Console

[Holodex](https://holodex.net)

Console 可以查看 JavaScript 對象的及其屬性，通過 JavaScript 訪問當前頁面的所有元素及進行 JavaScript 的任何操作，並且能夠立即執行 JavaScript 語句

查看控制台日誌：當網頁的 JavaScript 代碼中使用了 `console.log()` 函數時，該函數輸出的日誌信息會在控制台中顯示。日誌信息一般在開發調試時啓用，而當正式上線後，一般會將該函數去掉

## Source

[【Karaoke】 Ina Ina Inaaaaa!! New Year's Karaoke Relay!!!!](https://www.youtube.com/watch?v=WN-Bw81o-xo)

- 查看文件：在源代碼（Source）頁面可以查看到當前網頁的所有源文件。
- 添加斷點：在源代碼左邊有行號，點擊對應行的行號，就好給改行添加上一個斷點（再次點擊可刪除斷點）。右鍵點擊斷點，在彈出的菜單中選擇 Edit breakpoint 可以給該斷點添加中斷條件。
- 中斷調試：添加斷點後，當JS代碼運行到斷點時會中斷（對於添加了中斷條件的斷點在符合條件時中斷）

## Network

用來分析當前頁面伺服器請求的資訊還有 filter 能使用。

[【歌枠】良いお知らせ✨週1歌枠🎤【風真いろは/ホロライブ】](https://www.youtube.com/watch?v=v-bCLl7zR00)

隨便點開看其中一個伺服器請求資訊，可以看到 Headers、Preview、Response、Cookies、Timing。
- Headers : 該 HTTP Request 的 Header (請求所夾帶的資訊)。
- Preview : 該請求類型(JSON、image、text)的預覽。
- Response : 該 HTTP Request 的 Response。
- Cookies : 該 HTTP Request 和 Response 過程中的 Cookies 資訊
- Timing : 該請求在生命週期中各部分的時間

:::info
想更了解 Request Method 能看這篇 https://blog.v123582.tw/2019/12/17/利用-Chrome-開發者工具觀察-HTTP-Headers/
:::

各類型的內容：
- All : 頁面所需的所有請求。
- Fetch/XHR : Fetch API 以及 XMLHttpRequest 的請求，出現於使用 Ajax 的網頁。
- JS : JavaScript 的資源。
- CSS : CSS 的資源。
- Img : 圖片的資源。 e.g. png、jpg、svg
- Media : 影音的資源。e.g. mp4、avi
- Font : 字體的資源 。e.g. woff、woff2
- Doc : HTML 內容。

## 其餘內容

本篇文章指介紹到比較基礎的功能，假如大家對其他功能有興趣或需要用到的話請自行查詢如何使用。

## 參考資料
:::info
[Chrome開發者工具(Google devtool)基礎教學](https://thewayeasy.com/chrome%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7google-devtool%E5%9F%BA%E7%A4%8E%E6%95%99%E5%AD%B8/)

[好用的chrome開發者工具 — 不是工程師的你也該來認識一下](https://chen0625tung.medium.com/%E5%A5%BD%E7%94%A8%E7%9A%84chrome%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7-%E4%B8%8D%E6%98%AF%E5%B7%A5%E7%A8%8B%E5%B8%AB%E7%9A%84%E4%BD%A0%E4%B9%9F%E8%A9%B2%E4%BE%86%E8%AA%8D%E8%AD%98%E4%B8%80%E4%B8%8B-3efa702d0907)

[Chrome瀏覽器F12網頁開發工具教學](https://web4theme.com/article/chrome%E7%80%8F%E8%A6%BD%E5%99%A8f12%E7%B6%B2%E9%A0%81%E9%96%8B%E7%99%BC%E5%B7%A5%E5%85%B7%E6%95%99%E5%AD%B8.html)

[【Day 06】- 聽說 F12 可以拿來駭入小恐龍? (網頁開發工具分析流量)](https://ithelp.ithome.com.tw/articles/10268765)
:::