日期: 2013 年 8 月 14 日

如上圖，會跳出一個Developer Tools開發者工具。這時候我們就可以來好好利用這個工具囉！

另外，也可以讓他固定在瀏覽器的下方，不獨立出一個視窗。只要點開發者工具視窗的左下角，第一個按鈕，就可以了。

然後就可以固定住了。

當我們要開始使用之前，當然要先選到要修改的地方，不需要再一直從開發者工具去打開層疊樹找指定區塊。

所以，我們先把滑鼠移到某區塊上面，並點選「檢查元素」：

這樣一來開發者工具就會自動固定到該區塊，然後看到下圖的右邊，出現了可以修改的樣式！

這個功能是我最常用的一項功能，因為用他來開發 CSS 樣式真的非常快。

承上一節，我們看到右方的樣式部分：

從上圖可以看到，怎麼會出現兩個font-size？因為我在開發的時候不小心前面打過了後面又再打一次，所以，前面的15px會自動被後面的16px覆蓋掉，而15px會被劃刪除線，意思就是這句已經被覆蓋掉不會生效。

在開發過程中常常會修改顏色，到最好看的地方。承上圖，我們可以看到在background: 右邊有一個正方形的顏色塊，我們可以點一下。

點一下之後我們就可以選其他顏色，而且這個調色盤的功能相當完整，是用漸層來讓你選顏色，而且還有透明度的調整。

另外你還可以發現點了之後，在網頁中的該區塊顏色會立即被更改成你選擇的顏色，方便立即查看效果。

（當然，這邊的修改在重新整理之後就會恢復原本的樣子）

很簡單，在每一個樣式上按一下就會自動變成編輯狀態，然後就可以修改成你要的樣子。

如下圖，我將留白改為左右各60px。

小技巧：將數值反白後，可利用鍵盤的↑↓鍵來調整數值，一次單位為1。

此外開發者工具也很貼心的有自動完成的功能，只要輸入字頭，就會自動跳出自動完成的字了，這時候只要按下TAB鍵就可以自動完成拼字了。

當然，也可以把不需要用到的樣式，或不要用的樣式讓他不生效，很簡單，在屬性的左邊有一個打勾勾的地方，把他勾掉就不會套用該行樣式。

新增樣式的方法也很簡單，只要在旁邊的空白處按一下左鍵，就會出現新增屬性的框框了。

把自動完成發揮到極致，如下圖，選擇border，按下Enter，再按下TAB輸入值即可。

然後就可以整個把他輸入完囉，最後再按一下Enter就可以完成編輯。

Google當然也有想到這一點，所以在開發者工具裡面也可以把元素做一些調整，如刪除、新增和修改。

而要做這一些步驟，只要在開發者工具左方的元素上按下右鍵即可。

這邊可以做很多項調整，像是可以刪除該元素，如上圖。

如果你想要改class屬性的值，就在那上面快點兩下，就會變成編輯的狀態，就能修改。

當然，開發者工具一定要有偵錯功能才稱的上是開發者工具嘛，要看目前的網頁有沒有錯誤，就點一下Console標籤即可。

這時候就可以知道哪邊有問題、想辦法要如何解決了。像是第二行的錯誤很明顯就是找不到檔案，這時候就可以去想是不是檔案名稱打錯了之類的解決方式。

請注意，在這個開發者工具內做的所有動作都是暫時的，所以當你使用開發者工具修改了某元素之後，請務必也將原始檔案做更改的動作，才會生效。否則重新整理之後還是會恢復原來的樣子。

使用開發者工具的好處就是可以馬上添加某樣式下去看效果，修改樣式。Yuxin都是使用這個將覺得不好看的樣式先用開發者工具做修改，然後再將修改後的樣式程式碼複製，再貼回原始檔。

就這樣，真的能讓網頁設計開發的速度變得更快，時間是很寶貴的，能省時間，當然就要盡量去省。如果你也是Chrome的愛好者並且常常開發網頁，您不妨也用用看這個開發者工具的功能吧！