4

使用chrome sourcemap 在线编辑代码的开发体验非常畅快, 最简单的souorcemap是在线调试原始的css代码, 只需要将项目文件夹添加到chrome中,然后就可以直接在chrome中以所见即所得的方式编辑css了。简单的soucemap调试可以看下这篇文章Chrome 浏览器的 source-map 功能

但是随着前端开发环境的日趋复杂, 大部分开发环境不会这么纯粹,而是经过了很多工程工具的处理, 比如现在很流行的webpack,它里面集成了很多处理工具, 单一个样式文件就可能经过了好几个loader的处理,然后再打包编译,与原始代码相去甚远。 本文将讨论使用scss开发样式的时候如何使用chrome的sourcemap功能提升开发效率。

首先理想的状态应该是直接在chrome devtools里在线编辑样式, 就跟调试原始css一样。如果不使用webpack, 只是单纯用scss的话, 只需要下载sass然后在CLI里监听你的scss文件就可以了。如图在线编辑scss样式:
gif演示

如何监听scss文件得到如图效果可以看这篇博客:Sass Source Maps + Chrome = Magic

但是如果使用webpack的话,我暂时没有找到可以不刷新即时反应更改效果的方式(知道的同学还请留言科普)
目前我所用的方式是依靠wepack的自动刷新来即时预览调试效果。

chrome里的配置很简单,先将自己本地项目文件添加到chrome的workspace里就可以了(在source面板空白处右键Add Folder,同时设置里也要注意开启sourcemap功能)也是和普通的sourcemap一样, 只是使用webpack 的sourcemap时webpack会将源文件放在webpack://文件夹下, 在chrome devtools的source面板中就可以看到,如下图:
图片描述

使用webpack中的sourcemap调试scss有几个地方需要注意:

  • webpack的配置文件中css和scss的loader都要开启sourcemap, 而sass-loader的配置还需要加几个参数,以下是我的css-loader和scss-loader的配置参数:

,{
            test: /\.css$/,
            loader:   ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!autoprefixer-loader")

        },
            {
            test: /\.scss$/,
            loader: ExtractTextPlugin.extract("style-loader", "css-loader?sourceMap!sass-loader?&outputStyle=expanded&sourceMap=true&sourceMapContents=true!autoprefixer-loader")
        },

这些参数都是node-sass的配置选项, 可参考这两篇官方文档:sass-loadernode-sass
另外sass-loader的issue里也提到了如何配置webpack中的参数以使得在chrome devtools调试sass:
[Question] source-maps with css or sass?

该issue中如下图的回答:
图片描述

关于webpack中sourcemap配置模式的区别(也就是devtool里参数)可以看我之前写的博客:
打破砂锅问到底:详解Webpack中的sourcemap


囧囧
1.9k 声望132 粉丝

蚂蚁金服海外银行诚招前端: