閒聊
在進行了兩天CSV文件學習後，今天我們先脫離VScode，一起來打開瀏覽器。
看到標題應該有猜到要做什麼了吧，不知道大家有沒有在使用電腦的時候不小心按到過呢？
準備好了就開始囉！

檢查

• Chrom開發工具（Devtools）
  這裡會使用chrom是因為比較簡潔、快速，也因為我習慣用chrom當作主要的瀏覽器。
  想要打開開發工具，可以使用 F12、 Ctrl + Shift + I 或是按下右鍵。
  

打開來應該要長這樣

如果你打開是這樣，表示你按成「檢查網頁原始碼」。

• 套件（紅色框起來的）
  

介紹

1. Elements：用來檢視、修改和調整DOM物件、Styles CSS屬性及HTML。
2. Console：顯示目前網頁的訊息，可以進行Debug和命令互動JavaScript。
3. Sources：用來設定斷點。
4. Network：展示所有網路請求詳細訊息的紀錄，包括狀態、資源類型、大小、所需時間、Request和Response。
5. Performance：取得效能表，檢測網頁的網路流量，紀錄網頁生命週期中發生的事件，用來調整網頁的性能。
6. Memory：查看記憶體使用情況。
7. Application：檢查、修改和調試 Web 應用清單、服務工作進程和服務工作進程緩存。（檢查載入資源）
8. Security：檢測當前內存使用情況。
9. Lighthouse：用來優化搜尋引擎。（Search Engine Optimization，簡稱SEO）

更詳細的介紹：[學習筆記] Chrome Dev Tools 開發者工具實用功能整理

爬蟲常用
在爬蟲中最常用到的套件是「Elements」和「Network」。

元素面板 Elements

用途：定位元素的 class 、 id 或者 Xpath，了解哪些元素要被爬取。
（紅色框起來的位置是原始碼）

那這樣要怎麼找原始碼呢？可以利用卡開檢查後，反白想要的區域，就可以看到。

網路面板 Network

用途：分析當前頁面伺服器請求的資訊(狀態、種類、時間、 Requests、Response...)。
打開會看到

按下 F5重新整理過後，會看到很多請求。

在這裡我們可以看到伺服器請求資訊，有以下幾個：

1. Headers：HTTP Request的Header(請求所夾帶的資訊)。
2. Preview：求類型(JSON、image、text)的預覽。
3. Response：HTTP Request的Response。
4. Cookies：HTTP Request和Response過程中的Cookies資訊。
5. Timing：請求在生命週期中各部分的時間。

點開其中一個請求後，會看到更多詳細資訊（紅色框）。

點擊像漏斗形狀的icon，就會出現Filters的ui。

• UI介紹

1. All：所有需要的請求。
2. Fetch/XHR：Fetch API以及XMLHttpRequest的請求，多用於Ajax網頁
3. JS：JavaScript資源。
4. CSS：CSS資源。
5. Img：圖片資源，ex.png、jpg、svg
6. Media：影音資源，ex.mp4
7. Font：字體資源。
8. Doc：HTML內容。
9. WS
10. Wasm：WebAssembly資源。
11. Manifest

結語
今天看了跟平常不一樣的chrom，覺得其實程式碼離我們很近的（笑）。
過去沒有機會好好了解過這些事情，其實網頁中的元素面板還滿有趣的（我幾天後還會那麼覺得嗎 XD）。
也介紹了比較常用在爬蟲中的元素！
明天沒意外就會進行第一次爬蟲，加油吧！

明天！
【Day 9】第一個爬蟲函式庫-Requests

參考資料
Chrome DevTools
開發必備，摸索不完的 Chrome DevTools 小技巧
Chrome Devtools 開發者工具功能介紹-source篇
Chrome DevTools Performance 與畫面處理