轉載 http://fundesigner.net/chrome-dev-tool/
每次當要寫網頁時，不外乎就是時常打開瀏覽器來看顯示是否正常，看看是不是哪邊語法錯誤等等。而如果發現錯誤，我第一個不是回去看程式碼有沒有問題，而是使用Google Chrome開發者工具(Developer Tools)，這個工具相當方便，不但在開發時能夠讓CSS快速完成，並且能夠即刻查看效果，沒錯，我平常都是這樣用的。
什麼是「Google Chrome Developer Tools 開發者工具」?
有些讀者可能沒使用過這個工具，其實這個工具在Google Chrome中就已經內建了，只要用Chrome開啟任一網頁按下「Ctrl+Shift+I」就會開始這個開發者工具。
另法：直接用滑鼠，按右鍵點「檢查元素」。
如上圖，會跳出一個Developer Tools開發者工具。這時候我們就可以來好好利用這個工具囉！
另外，也可以讓他固定在瀏覽器的下方，不獨立出一個視窗。只要點開發者工具視窗的左下角，第一個按鈕，就可以了。
然後就可以固定住了。
選取某區塊、段落
當我們要開始使用之前，當然要先選到要修改的地方，不需要再一直從開發者工具去打開層疊樹找指定區塊。
所以，我們先把滑鼠移到某區塊上面，並點選「檢查元素」：
這樣一來開發者工具就會自動固定到該區塊，然後看到下圖的右邊，出現了可以修改的樣式！
CSS 調較樣式、新增樣式功能
這個功能是我最常用的一項功能，因為用他來開發 CSS 樣式真的非常快。
承上一節，我們看到右方的樣式部分：
從上圖可以看到，怎麼會出現兩個font-size？因為我在開發的時候不小心前面打過了後面又再打一次，所以，前面的15px會自動被後面的16px覆蓋掉，而15px會被劃刪除線，意思就是這句已經被覆蓋掉不會生效。
修改顏色
在開發過程中常常會修改顏色，到最好看的地方。承上圖，我們可以看到在background: 右邊有一個正方形的顏色塊，我們可以點一下。
點一下之後我們就可以選其他顏色，而且這個調色盤的功能相當完整，是用漸層來讓你選顏色，而且還有透明度的調整。
另外你還可以發現點了之後，在網頁中的該區塊顏色會立即被更改成你選擇的顏色，方便立即查看效果。
（當然，這邊的修改在重新整理之後就會恢復原本的樣子）
修改值
很簡單，在每一個樣式上按一下就會自動變成編輯狀態，然後就可以修改成你要的樣子。
如下圖，我將留白改為左右各60px。
小技巧：將數值反白後，可利用鍵盤的↑↓鍵來調整數值，一次單位為1。
自動完成功能
此外開發者工具也很貼心的有自動完成的功能，只要輸入字頭，就會自動跳出自動完成的字了，這時候只要按下TAB鍵就可以自動完成拼字了。
取消樣式
當然，也可以把不需要用到的樣式，或不要用的樣式讓他不生效，很簡單，在屬性的左邊有一個打勾勾的地方，把他勾掉就不會套用該行樣式。
新增樣式
新增樣式的方法也很簡單，只要在旁邊的空白處按一下左鍵，就會出現新增屬性的框框了。
把自動完成發揮到極致，如下圖，選擇border，按下Enter，再按下TAB輸入值即可。
然後就可以整個把他輸入完囉，最後再按一下Enter就可以完成編輯。
HTML 新增、刪除、更名元素
Google當然也有想到這一點，所以在開發者工具裡面也可以把元素做一些調整，如刪除、新增和修改。
而要做這一些步驟，只要在開發者工具左方的元素上按下右鍵即可。
這邊可以做很多項調整，像是可以刪除該元素，如上圖。
如果你想要改class屬性的值，就在那上面快點兩下，就會變成編輯的狀態，就能修改。
偵錯功能
當然，開發者工具一定要有偵錯功能才稱的上是開發者工具嘛，要看目前的網頁有沒有錯誤，就點一下Console標籤即可。
這時候就可以知道哪邊有問題、想辦法要如何解決了。像是第二行的錯誤很明顯就是找不到檔案，這時候就可以去想是不是檔案名稱打錯了之類的解決方式。
務必記得
請注意，在這個開發者工具內做的所有動作都是暫時的，所以當你使用開發者工具修改了某元素之後，請務必也將原始檔案做更改的動作，才會生效。否則重新整理之後還是會恢復原來的樣子。
使用開發者工具的好處就是可以馬上添加某樣式下去看效果，修改樣式。Yuxin都是使用這個將覺得不好看的樣式先用開發者工具做修改，然後再將修改後的樣式程式碼複製，再貼回原始檔。
就這樣，真的能讓網頁設計開發的速度變得更快，時間是很寶貴的，能省時間，當然就要盡量去省。如果你也是Chrome的愛好者並且常常開發網頁，您不妨也用用看這個開發者工具的功能吧！