利用Chrome Developer Tools提昇CSS編修效率

通常在編輯CSS時大略會有這些步驟：

1. 編輯CSS檔案
2. 瀏覽器上預覽
3. Firebug or Chrome DevTool調整
4. 把修改的部分寫回CSS檔案

但是當需要調整的東西一多的時候，很容易在3~4的步驟中遺忘有哪些需要修改的，或是在copy至CSS檔案的時候寫錯地方，白白浪費許多時間。

幸好，Chrome的開發者工具(Developer Tools)有一個叫做Live Editing功能。這Live Editing的功能很簡單，就是幫你把在網頁上的修改直接存到對應的檔案裡。

詳細步驟：

• 以Chrome開啟欲編輯的網頁檔案(必須要是本地端檔案)，並開啟開發者工具(Ctrl+Shift+I或F12)。
  
• 使用開發者工具開始編輯CSS，編輯的時候可以從上圖Elements tab的右邊來選擇相對應的CSS規則做編輯，也可以進入Sources tab選擇對應的CSS檔案編輯(如下圖)。要注意的是如果CSS檔案不只一個，要確保編輯的檔案是正確的。
  
• 編輯完成之後，在Sources tab下選擇要存檔的CSS，Ctrl+S或是滑鼠右鍵叫出選單存檔。此時系統會問檔案要存在哪，你可以 A.直接選擇覆蓋原始的CSS檔案 B.另存一個檔案另作他用。要注意的是如果你把CSS存在另一個檔案，假設layout.css存成layout-compare.css，重新載入頁面之後網頁還是會讀取原本的layout.css。
• 存檔之後會有修改記錄，滑鼠右鍵 > Local Modification...會叫出視窗：

有了這樣的工具在修改CSS的時候的確方便很多，但也不是沒有缺點的：

• Chrome only: firefox的firebug並沒有這功能，不過有個叫做CSSUpdater的plugin可以做到，缺點是要錢
• 無法相容LESS之類的CSS precompiler
• 僅針對本地端檔案。Firefox有個plugin叫做FireFile可同步伺服器端的檔案(但該伺服器需安裝PHP)