DevTools，前端不可或缺的小夥伴！）

開發人員工具DevTools，前端不可或缺的小夥伴！

昨天帶大家做了一遍emmet，
今天我們要來學習使用開發人員工具，
我自己是用mac配上google chrome的開發人員工具。
這篇教學不會附圖，
因為昨天截了一堆圖，然後用PS框出位置，花了不少時間，結果居然不能上傳。

首先，打開你的safari，
看看上方有沒有「開發」可以選，
如果沒有請到「Safari」->「偏好設定」->「進階->將「在選單列中顯示「開發」選單」勾選
此時就可以用command+alt+i打開safari開發人員工具了，
但是我在摸索safari的開發人員工具都找不到地方是顯示CSS的地方，
因此轉戰google chrome的開發人員工具。

google chrome的開發人員工具一樣是用command+alt+i打開，
此時會在右邊出現上下兩欄，上面那欄顯示elements，顯示網頁的html，
此時可以嘗試點其中一行，
可以發現在網頁上會表示出該段是在描述網頁的相對位置。
如果沒有標示出可能是因為該段不在螢幕裡面。

但是我們在瀏覽其他人的網頁，總會想看別人是怎麼寫的。
其實只要在想看的地方按右鍵，然後選擇檢查，elements就會顯示該段html了。

而下方的style則是之後寫CSS會顯示選取區塊有使用的CSS，
也可以在此改變數值，可以直接看到網頁變化。
此時再回去VS Code上更改數值，會方便許多。

此時再把目光回到elements，右邊有一個行動裝置的圖案，
這是可以讓開發人員來檢視不同解析度下，網頁呈現的效果。
因為近年行動裝置大行其道，不同大小的手機百花爭鳴。
所以在設計網頁，把手機小螢幕為優先考量，再拓展到大螢幕，
是一種比較好的方法。

接著，在elements標籤，旁邊有一個console，
可以檢查網頁上的問題，
有一次經驗是再本地端看，網頁都完美呈現，
可是上傳到github page（一個可以免費存放自己寫的網頁的地方）
有一些檔名加了下底線的CSS檔就無法讀取到了，
出問題的時候可以到這邊看看。