在chrome瀏覽器中修改css文件瞬场，本地文件中的映射的css文件同步修改
一涧郊、CSS調(diào)試技巧
調(diào)試CSS
- 添加工作目錄
- 建立文件映射
- 編輯CSS文件或者使用樣式面板修改樣式
- 保存CSS文件
具體步驟
-
把本地目錄文件拖到source面板中
調(diào)試CSS技巧-1.png - 拖動(dòng)之后瀏覽器頭部會(huì)出現(xiàn)是否允許訪問本地文件夾的權(quán)限贯被，點(diǎn)擊允許
-
授權(quán)瀏覽器可以訪問本地文件夾后，本地文件夾中的文件就顯示如圖所示
調(diào)試CSS技巧-2.png -
點(diǎn)擊index.css文件妆艘，準(zhǔn)備修改h1的樣式
調(diào)試CSS技巧-3.png -
修改index.css文件彤灶，準(zhǔn)備保存index.css文件
調(diào)試CSS技巧-4.png -
本地文件夾中的index.css文件內(nèi)容相應(yīng)的修改了
調(diào)試CSS技巧-5.png -
修改elements面板中的樣式双仍，點(diǎn)擊enter，也可以修改index.css文件中的內(nèi)容
調(diào)試CSS技巧-6.png
二茅诱、LESS調(diào)試技巧
less調(diào)試
- 使用npm安裝lessc和wr工具
- 使用lessc命令編譯less文件
- 調(diào)試器啟動(dòng)[重新加載生成的css]模式
- 使用wr命令跟蹤文件修改實(shí)時(shí)編譯
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文件
具體步驟
-
運(yùn)行如下命令監(jiān)控index.less文件的變化編譯成index.css文件
調(diào)試less-1.jpg -
生成source-map文件使index.less和index.css關(guān)聯(lián)起來
調(diào)試less-2.jpg -
在編譯生成的index.css中出現(xiàn)如圖即為成功
調(diào)試less-3.jpg -
在服務(wù)中打開page瑟俭，elements面板顯示已經(jīng)關(guān)聯(lián)上index.less文件[源文件中關(guān)聯(lián)Index.css]
調(diào)試less-4.jpg -
點(diǎn)擊進(jìn)去修改source面板中的index.less文件摆寄，磁盤文件修改成功
調(diào)試less-5.jpg -
bug
調(diào)試less-6.jpg -
備注：需要啟動(dòng)這個(gè)配置項(xiàng)才可以使index.less和index.css文件關(guān)聯(lián)成功
調(diào)試less-7.jpg
CSS vs LESS
CSS
- 原生支持微饥，無需安裝工具
- 可以直接用樣式面板修改源碼，實(shí)時(shí)保存
- 代碼繁瑣古戴，可維護(hù)性差
less - 代碼簡潔欠橘，可維護(hù)性好
- 需要工具支持
- 不可用樣式面板直接修改
