如何解释源地图映射？

Question

假设我有这个样式表：

.d1
    width: 10px
    .d2
        width: 20px

它导致以下 css 代码（具有 nested 输出样式）：

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

源映射（v3）包含以下映射：

AAAA,AAAA,GAAG,CAAC;EACA,KAAK,EAAE,IAAK,GAES;EAHzB,AAEI,GAFD,CAEC,GAAG,CAAC;IACA,KAAK,EAAE,IAAK,GAAG

用this service解码后得到：

([0,0](#0)=>[0,0]) | ([0,0](#0)=>[0,0]) | ([0,3](#0)=>[0,3]) | ([0,4](#0)=>[0,4])
([1,4](#0)=>[1,2]) | ([1,9](#0)=>[1,7]) | ([1,11](#0)=>[1,9]) | ([1,16](#0)=>[1,13]) | ([3,25](#0)=>[1,16])
([0,0](#0)=>[2,2]) | ([2,4](#0)=>[2,2]) | ([0,3](#0)=>[2,5]) | ([2,4](#0)=>[2,6]) | ([2,7](#0)=>[2,9]) | ([2,8](#0)=>[2,10])
([3,8](#0)=>[3,4]) | ([3,13](#0)=>[3,9]) | ([3,15](#0)=>[3,11]) | ([3,20](#0)=>[3,15]) | ([3,23](#0)=>[3,18])

来源是在 similar fashion 中生成的 node-sass (libsass)。

我的理解是，这些是原始文件和结果文件中的点对。但是让我们以第二行的最后一对为例：([3,25](#0)=>[1,16])。第 3 行第 25 列？这有点出乎意料，你不觉得吗？

我做错了吗？或者源映射不正确？如果可以，您能否建议生成正确源映射的方法？

Answer 1

有个great tool, that you can use not only with libsass as explained here.

请注意，您需要一个以多行注释形式嵌入源映射并在其中包含 sourcesContent 字段的文件，例如：

.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwic291cmNlc0NvbnRlbnQiOlsiLmQxIHtcbiAgICB3aWR0aDogMTBweDtcbiAgICAuZDIge1xuICAgICAgICB3aWR0aDogMjBweDtcbiAgICB9XG59XG4iXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

您只需将其粘贴到“输出”字段中，单击“分析”，一切就绪。在此之前输入字段中的内容无关紧要。它被 source map 中的内容替换。使用箭头键在映射之间切换。

让我们看看您是如何使用 ruby 的 sass gem:

Gemfile:

source 'https://rubygems.org'
gem 'sass'

package.json:

{
  "dependencies": {
    "convert-source-map": "^1.3.0"
  }
}

1.scss:

.d1 {
    width: 10px;
    .d2 {
        width: 20px;
    }
}

1.js:

var convert = require('convert-source-map');
var fs = require('fs');
console.log(
    convert.fromJSON(
            fs.readFileSync('1.css.map')
    ).toComment()
    .replace(/^\/\//, '/*')
    .replace(/$/, ' */')
);

然后

$ bundle install && npm i
$ rm -f 1.css* && bundle exec sass --sourcemap=inline 1.scss 1.css
$ cat 1.css | head -n -1 && node 1.js
.d1 {
  width: 10px; }
  .d1 .d2 {
    width: 20px; }

/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IkFBQUEsR0FBSTtFQUNBLEtBQUssRUFBRSxJQUFJO0VBQ1gsT0FBSTtJQUNBLEtBQUssRUFBRSxJQUFJIiwic291cmNlcyI6WyIxLnNjc3MiXSwibmFtZXMiOltdLCJmaWxlIjoiMS5jc3MifQ== */

将其放入输出字段即可。

工作流程有点复杂。但这是检查源映射然后执行它的更轻松的方法 "by hand." 我是根据我自己的经验在这里谈论 :)

以防万一，您的源映射为 json，例如：

{ version: 3,
  sourceRoot: '/path/to/dir',
  sources: [ '1.css' ],
  sourcesContent: [ 'body {\n    background: #ddd;\n}\ndiv {\n    width: 100px;\n    height: 100px;\n    margin: auto;\n    background: #666;\n}\n' ],
  names: [],
  mappings: 'AAAA,AAAA,IAAI,AAAC,CACD,UAAU,CAAE,IAAI,CACnB,AACD,AAAA,GAAG,AAAC,CACA,KAAK,CAAE,KAAK,CACZ,MAAM,CAAE,KAAK,CACb,MAAM,CAAE,IAAI,CACZ,UAAU,CAAE,IAAI,CACnB' }

您可以将其转化为评论如下：

var convertSourceMap = require('convert-source-map')
console.log(convertSourceMap.fromJSON(mapAsAString).toComment({multiline: true}));

P.S。这里有some more tools. And introduction to source maps. Also, sourcemap-codec package可能会派上用场。

如何解释源地图映射？

How to interpret source map mappings?

css

sass

source-maps