網頁設計人員必備技能：Chrome 開發人員工具 使用教學

Google覽器對開發人員很友善，提供了非常好用的工具，如果你會用，那對於工作上的能力是有顯著的提升的。
我在設計網頁時，常用到的幾項功能介紹給大家。



什麼是開發人員工具?

就是這個↓

要叫出這個介面，
1.可以直接按F12
2.選畫面上空白處按右鍵→選檢查
3.Ctrl + Shift + i
4.到右上角→更多工具→開發人員工具

總共有這幾項功能
Elements、Network、Sources 、Timeline、Profiles 、Audits、Resources、Security、Console



----------------------------------------------------------------------------------------------------

Elements：通常我應用在畫面美觀的調整Css，與除錯時確認節點的位置與附加屬性是否有添加上去。

應用1：點箭頭 ，選畫面上的按鈕，可以得知這是一個input標籤，他有什麼html屬性，並做修改Edit as Html  可以改成一張圖片  或是一個連結通通都可以，假設這是廣告可以選擇Delete Element ，你就會發現廣告不見了。

應用2：即時設定html屬性，與Css 樣式，達到快速修改版面的效果，只要修改好之後複製到程式裡面，就好了。不必一直重新編譯。

應用3：假裝成手機瀏覽網頁，可以選手機樣式，與直向橫向，頁面大小。

----------------------------------------------------------------------------------------------------

Network：通常在解析Request 與 Response ，尋找目前發出的請求，下載影片!!!

應用1：查看Http 請求，通常是想了解這個網站如何做資料的傳輸，或是除錯用的。

應用2：模擬網路速度，
例如
我想看看在3G 情況下，我的網頁要載入多久，就可以用這個測試，
、我今天下載一個檔案，我設定成4G 要下載多久，前提是你的網路速度有達到4G
或是直接關閉網路，玩Chrome的恐龍遊戲......。

應用3：下載影片.....Copy link address 你就有下載網址了，可以去下載了。

----------------------------------------------------------------------------------------------------

Sources ：可以看到網頁原始碼，下中斷點除錯。

在程式碼行號的地方按一下滑鼠的左鍵，就會有藍藍的，這樣程式跑到那一行就會停下來。
F10 ：單步追蹤(不進入涵式)
F11：單步追蹤(進入涵式)
F8：繼續執行到中斷點

----------------------------------------------------------------------------------------------------

Timeline：觀看網頁速度到底是誰花了最多的時間，做效能的改善。

----------------------------------------------------------------------------------------------------

Profiles ：可以錄製操作過程所經歷過得程式碼區塊，搭配Sources 除錯很方便，(尤其框架很複雜時，我只要某個區塊的資訊，我不要看所有程式碼時，非常方便)。

 按下Start 會開始錄製，再按下Stop 會產生出一個檔案在左邊
可以選 Tree 或是 Heavy 顯示模式
如果你知道要查的是哪一個Function 可以按下Ctrl +F
輸入你要的function ，找到之後按右邊的程式行號，即可在Source 裡面看到那段原始碼。進行除錯。

----------------------------------------------------------------------------------------------------

Audits：可以觀看網頁哪邊寫得不好，可加強的部分

----------------------------------------------------------------------------------------------------

Resources：可以觀看LocalStorage ,SessionStorage ,Cookie....等，確認一些資料不錯用。或是想要手動增加或修改資料直接點選欄位即可。

----------------------------------------------------------------------------------------------------

Security：觀看憑證，沒什麼機會用到。

----------------------------------------------------------------------------------------------------

Console：即時下指令查看資料，通常是在"除錯用"或是"執行某段指令"。