利用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+IF12)。
  • 使用開發者工具開始編輯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)

2 則留言:

  1. 真的很方便,可是有一點小問題

    就是如果 css 裡面有中文字 都會變亂碼 XDDD

    請問有解決方法嗎?

    回覆刪除
    回覆
    1. 我是沒有遇到這問題 也許是檔案編碼的問題?
      我都是存成utf8的

      刪除