星空网 > 软件开发 > 网页设计

chrome 调试 SASS

第一步: 执行sass预编译命令

先来我的项目文件夹结构:

chrome 调试 SASS

->进入sass /css文件下->打开cmd命令 ->输入sass --watch --scss  test.scss:test.css     如下图:->

 chrome 调试 SASS

进入sass项目发现文件多了test.css.map和test.css两个文件夹,如下图:

chrome 调试 SASS

这里生成的test.css.map是chrome调试的关键 ->

打开chrome F12开发者工具 ->输入项目地址,来配置一下chrome,使它支持map调试:

 chrome 调试 SASS

->下一步 勾选Enable CSS source maps

chrome 调试 SASS

->如下图(查看图中的注意事项):

在source里面打开css/test.scss文件

chrome 调试 SASS

但是我们在chrome上面更改了test.scss内容却无法保存,左上角总是出现黄色叹号提示,如下图:

chrome 调试 SASS

那么来看一下怎么把它加入工作区,也就是它原本在项目中存在的位置

 chrome 调试 SASS

-> 然后chrome会请求获取这个文件的操作权限,点击容许就可以了 ->发现source下方多了css文件夹,这样test.scss就和你本地的项目中的test.scss关联上了

chrome 调试 SASS

同时需要注意是你编辑器里面的代码也跟着变了,如下图:

chrome 调试 SASS

也就是说,你更改chrome里面的test.scss,本地test.scss也会跟着变.

差不多就把调试步骤说完了,当然chome浏览器一直在更新对SASS的支持,可能后面的设置就不会那么麻烦了,所以上面的步骤仅供参考.




原标题:chrome 调试 SASS

关键词:chrome

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流