May 19, 2019

認識 google chrome 開發者工具 dev tool | 不會程式也能看懂網站結構

前後端協作好工具 | 學習 RWD 的必備技能


文 / Siddharam 西打藍

前言


當初在學 chrome 開發者工具時,幾乎是做中學,在學前端時就碰了 elements、Local Storage、console,正式工作後,才碰到 Network,是為了查 API 的回傳值。下一節就要進入正題,會從常用的功能開始講起。

常用功能與操作


先打開 Chrome 開發者工具:

Mac: Cmmand+Option+I
Windows: F12 Control+Shift+I
通用:右鍵檢查

開發者工具,Elements 區塊

1. Elements - 點選:
打開開發者工具,點選中間箭頭後,就可以選取網頁上的任何元素,同時這也是該網站的組成。點選後,就會看到它的樣式,並能即時修改,如果你在點選的元素上按下 H 鍵,就會幫你隱藏該元素。幾個月前,google 新增一項功能,在頁面就能看見基本的樣式資訊,如上圖左側的白色框。

2. Elements - RWD:
在頁面上方,有個 Responsive,可以選擇機種尺寸進行調整,若要新增機種,可以從右側開發者工具中的 Settings - Devices 修改。此外,你也可以手動縮放畫面寬高。


開發者工具,Console 區塊

3. Console - 前端除錯工具:
如果網站的 js 檔,有 console.log('XX') 的話,其結果就會在這裡顯示。另外,也可以在上面打一些程式,如上圖示範印出 0 - 10。


開發者工具,Network 區塊

4. Network - 載入資源:
跳過了 Sources,是因為不常使用,它可以看到頁面的資源如 js、css。

而 Network 則能看見依序載入的資源,以及耗費的時間、檔案大小、類型(font、script、gif)、狀態(200、404),點選檔案的話,可以看見表頭訊息(Headers)、回傳訊息(Response)等,是前端確認效能及檢查 API 的好工具。


開發者工具,Application 區塊

5. Application - Cookies、Local Storage 網站儲存
有時候, 網站 會暫存使用者訊息,如常見的 Cookies,或是長久性儲存的 Local Storage,都能在這裡看見。


後記


補充一個常用快捷鍵,搜尋: ctrl + F

如果要尋找快捷鍵,可以到開發者工具中的 Shortuts 尋找。


閱讀量




技術文章與合作


寫這些技術分享文,筆者是沒有額外收入的,但每年還是要付域名費用,如果你喜歡我的文章,歡迎 自由贊助 唷!也期待收到你的 回饋

有網站設計(UI/UX)、平面設計、網站工程外包需求,皆可以來信詢問,在 關於下方 有參考作品。

想定期收到技術文章,或想一起探討前後端程式的朋友,建議加入 line 群組,或是官方帳號,大家可以互相交流,一起學程式,歡迎加入:

Email: aaa24295234@gmail.com

Line 群組:入群組表單邀請

群組為了防止假帳號,不開放用 QR Code 掃描入群,如有需要,可以填寫表單,註記 line ID 告訴我,謝謝。

Line 官方帳號:@184railx

Line 官方帳號 QR Code: