标签: source-maps

我试图了解css源地图的工作原理.我创建了一个非常简单的scss文件.

#navbar {
    color: black;
}

当我编译上面的scss时,我得到以下映射文件.

{
"version": "3",
"mappings": "AAAA,OAAQ;EACP,KAAK,EAAE,KAAK",
"sources": ["test.scss"],
"file": "test.css"
}

当我解码"映射"时,我得到以下值.

0) [0,0,0,0], [7,0,0,8]
1) [2,0,1,-7], [5,0,0,5], [2,0,0,2], [5,0,0,5]

那些价值观是什么？

我有一个使用Babel从ES6转换到ES5的文件.我有源图.我假设我可以使用这些资源恢复原始文件(在ES6中编写时的样子).

怎么做？

是否有CLI工具来执行此操作？

我已经在我的爱好项目中添加了一些像Babel和闭包编译器这样的东西,但却发现Chrome没有在我的映射文件中点击断点.

这是一个重现问题的片段:

function test(){console.log("Break me")}test();
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInRlc3QuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQSxTQUFBLElBQUEsR0FBQTtBQUNBLFlBQUEsR0FBQSxDQUFBLFVBQUE7QUFDQTs7QUFFQSIsImZpbGUiOiJtYWluLm1pbi5qcyIsInNvdXJjZXNDb250ZW50IjpbImZ1bmN0aW9uIHRlc3QoKSB7XHJcbiAgICBjb25zb2xlLmxvZygnQnJlYWsgbWUnKTtcclxufVxyXG5cclxudGVzdCgpOyJdfQ==

Chrome会选择映射文件,但这里不会出现断点,
这会破坏添加源图的目的......

如何在地图上点击断点？

^{Chrome版本50.0.2661.94米,使用外部地图文件}

编辑:
当我通过Babel/closure管道代码时,我的源代码似乎有问题...
(所以请忽略该代码段​​,源代码图似乎已损坏)

gulpfile.js

.pipe(sourcemaps.init())
.pipe(concat("main.min.js"))
.pipe(babel({ presets: ["es2015"] }))
.pipe(closure({ compilation_level: "SIMPLE_OPTIMIZATIONS" }))
.pipe(sourcemaps.write("."))

使用gulp-sourcemaps,gulp-babel,gulp-closure-compiler-service

我的生产webpack配置是:

{
  output: {
    publicPath: "https://cdn.example.com/sub-directory/",
    filename: '[name]-[chunkhash].min.js'
  },

  devtool: 'source-map',

  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
}

现在我有两个文件app-12345.min.js和app-12345.min.js.map.

我也https://cdn.example.com/sub-directory/app-12345.min.js为主脚本自动生成了CDN URL .

但sourceMappingURL仍然是相对路径//# sourceMappingURL=app-12345.min.js.map,不能直接在浏览器中访问.

我的问题是我如何设置sourceMappingURL为绝对自动生成的路径？

我想在我的JavaScript应用程序中报告未捕获异常的堆栈跟踪,但问题是所包含的JavaScript是Browserify捆绑包.这意味着当我获得异常的堆栈时,它指的是bundle文件中的位置,即使JavaScript包包含源映射!

如何将堆栈中的文件位置转换为原始源文件？我猜它涉及一些源地图的使用？

下面是一个打印异常的堆栈跟踪的示例程序:

的index.html

<script src="/bundle.js"></script>

index.js

window.onerror = (message, url, line, column, error) => {
  console.log(`An exception was caught for URL ${url}, line ${line}:`, error.stack)
}

const thrower = () => {
  throw new Error(`Catch me if you can`)
}

const callingThrower = () => {
  thrower()
}

callingThrower()

生成捆绑包

# The --debug flag enables inline source maps
browserify --debug -o bundle.js index.js

节目输出

An exception was caught for URL http://localhost:8000/bundle.js, line 7: Error: Catch me if …

eval是webpack source-map 的类型之一.正如官方文件所说,

eval - 每个模块都用eval()和执行//@ sourceURL.这很快.主要的缺点是它没有正确显示行号,因为它被映射到转换代码而不是原始代码.

我不太明白,为什么它这么快？

我正在使用YEW框架在Rust中测试一个简单的待办事项应用程序.当我收到错误时,浏览器控制台(Devmode)显示JavaScript或汇编程序(我尝试过Chrome和Firefox).我怎样才能获得Rust代码？我是否必须在某处设置源地图？

语境

源代码

我在项目中将VueJS与webpack一起使用。

我没有使用vue-loader插件或.vue文件。

我的项目的结构类似于导入的标准Javascript Webpack项目vue。

我的webpack配置具有以下相关选项：

• dev-tool: "source-map"
• resolve.alias["vue$"] = "vue/dist/vue.js"

我的webpack Javascript捆绑文件的源映射正在生成。

问题

编程时，控制台中显示错误。不幸的是，堆栈跟踪将错误显示为vue.js文件中的错误，随后，Webpack生成了Javascript捆绑文件（main.js）。

看来webpack为我的Javascript捆绑包生成的源映射无法正常工作。

我发现了几个 相关 问题，但是这些问题似乎与vue-loader我不使用的webpack插件有关。

在Firefox中查看应用程序源，我可以确认源映射无法正常运行：

在Chrome中也会发生相同的行为。

是什么导致源地图无法正常工作？

注意：屏幕截图中显示的错误不是焦点，我能够弄清楚。问题的主要焦点是源映射无法正常工作。当问题确实出现时，使调试变得更加困难。

我正在使用Asset管道开发Rails应用程序.development.rb具有以下内容:

  config.assets.compress = false
  config.assets.compile = true
  config.assets.debug = true

在Dev环境中,资产没有捆绑在一起,每个资源都由Rails单独提供.此时,单独获得服务的资产数量超过50.因此,整页重新加载速度极慢.

我想在几个资产中将它们连接起来以便在开发环境中加快加载时间但是这样做,我放弃了在Chrome开发工具中单独调试/查看它们的能力.示例:http://d.pr/i/ZFge

在你知道后,有两种方法可以解决这个问题:

  config.assets.debug = false

并开始作为连锁资产提供服务.

1. Old Hacky Way:@sourceUrl技巧.
2. 新方式:sourceMaps.

是否有关于如何在rails应用程序上启用它们的指南？我不使用CoffeeScript,所以https://github.com/markbates/coffee-rails-source-maps没有帮助.大多数Google搜索都会导致这种情况.

我正在寻找原生JS的解决方案.

这是我正在谈论的内容的快速摘要:

https://medium.com/what-i-learned-building/b4daab987fb0

使用设置了工作区和源图的Chrome以及链接的本地/网络文件时,我可以使用Chrome网络检查器(在"元素 - >样式"窗格下)识别选择器在正确的SCSS文件中的位置.另外,我可以点击它,转到SCSS文件,进行更改,然后将其成功保存到文件系统.但是,我之前使用的是在elements-> styles面板中进行的更改以在SCSS文件中进行更新(即如果我在元素选项卡中进行更改并检查chrome中的SCSS文件,则应该更改它).

相反,它会对CSS文件进行更改.显然这不是很有用,因为:

• 一旦更改SCSS文件,它将被覆盖
• 这意味着即使重新加载,Chrome也会显示不在SCSS文件中的样式,因为它们会一直保存在CSS文件中

我已经在OSX和Windows上使用Sass 3.3.6尝试了这个.也可以确认这不是#9 https://code.google.com/p/chromium/issues/detail?id=273384中提到的"../"问题, 因为sass文件现在位于css文件中.样式表标签上也没有style.css？ver = x扩展名.