更多內容關注公眾號：SAP Technical 

在chrome瀏覽器中修改css檔案，本地檔案中的對映的css檔案同步修改

一、CSS除錯技巧

除錯CSS

1. 新增工作目錄
2. 建立檔案對映
3. 編輯CSS檔案或者使用樣式皮膚修改樣式
4. 儲存CSS檔案

具體步驟

1. 把本地目錄檔案拖到source皮膚中

    

   

   除錯CSS技巧-1.png

2. 拖動之後瀏覽器頭部會出現是否允許訪問本地資料夾的許可權，點選允許

3. 授權瀏覽器可以訪問本地資料夾後，本地資料夾中的檔案就顯示如圖所示

1. 

   除錯CSS技巧-2.png

2. 點選index.css檔案，準備修改h1的樣式

    

   

   除錯CSS技巧-3.png

3. 修改index.css檔案，準備儲存index.css檔案

    

   

   除錯CSS技巧-4.png

4. 本地資料夾中的index.css檔案內容相應的修改了

    

   

   除錯CSS技巧-5.png

5. 修改elements皮膚中的樣式，點選enter，也可以修改index.css檔案中的內容

    

   

   除錯CSS技巧-6.png

二、LESS除錯技巧

less除錯

1. 使用npm安裝lessc和wr工具
2. 使用lessc命令編譯less檔案
3. 偵錯程式啟動[重新載入生成的css]模式
4. 使用wr命令跟蹤檔案修改實時編譯

cnpm i -g less
cnpm i -g wr
wr "lessc duang.less duang.css" duang.less
lessc --source-map duang.less duang.css

注：index.html檔案中包含的是index.css檔案不是index.less檔案

具體步驟

1. 執行如下命令監控index.less檔案的變化編譯成index.css檔案

    

   

   除錯less-1.jpg

2. 生成source-map檔案使index.less和index.css關聯起來

    

   

   除錯less-2.jpg

3. 在編譯生成的index.css中出現如圖即為成功

    

   

   除錯less-3.jpg

4. 在服務中開啟page，elements皮膚顯示已經關聯上index.less檔案[原始檔中關聯Index.css]

    

   

   除錯less-4.jpg

5. 點選進去修改source皮膚中的index.less檔案，磁碟檔案修改成功

    

   

   除錯less-5.jpg

6. bug

    

   

   除錯less-6.jpg

7. 備註：需要啟動這個配置項才可以使index.less和index.css檔案關聯成功

    

   

   除錯less-7.jpg

CSS vs LESS

CSS

• 原生支援，無需安裝工具
• 可以直接用樣式皮膚修改原始碼，實時儲存
• 程式碼繁瑣，可維護性差
  less
• 程式碼簡潔，可維護性好
• 需要工具支援
• 不可用樣式皮膚直接修改