JavaScript CoffeeScript 支持 source maps 了,在浏览器中调试 CoffeeScript 已成为现实

darkbaby123 · 发布于 2013年03月16日 · 最后由 chanshunli 回复于 2015年03月16日 · 7735 次阅读
2575

CoffeeScript 1.6.1版本的新功能之一,就是支持source maps。

什么是source maps?简单的说,它可以通过一定的方式,从编译/压缩后的JavaScript代码,找到对应的未编译/压缩的源文件。

这个技术就是用来调试用的,目前可以用在两个地方:

  1. 从压缩后的JavaScript代码找到未压缩的版本,让你在生产环境下调试时,不至于面对天书一样的JavaScript无从下手。
  2. 从编译后的JavaScript代码找到编译之前的CoffeeScript代码,不用你身体内置编译器了。

我们可以建一个简单的项目试试,如果你不想动手的话,看看代码和图片也足够明白了。

一个小实验

需要环境:Node.js, npm, 已安装coffee-script包,Google Chrome最新版

先为项目建立一个文件夹叫aaa。里面包含两个文件,a.coffee和a.html,原谅我起的名字吧~

a.coffee

window.hello = ->
  console.log 'Hello World'

a.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="a.js"></script>
  </head>
  <body></body>
</html>

然后在aaa目录下,执行coffee命令编译a.coffee,带上参数 -m 用于生成source maps需要的文件。

Terminal

coffee -cm a.coffee

这会生成两个文件,a.js和a.map,来看看这个两个文件:

a.js

//@ sourceMappingURL=a.map
// Generated by CoffeeScript 1.6.1
(function() {

  window.hello = function() {
    return console.log('Hello World');
  };

}).call(this);

a.map

{
  "version": 3,
  "file": "a.js",
  "sourceRoot": "",
  "sources": [
    "a.coffee"
  ],
  "names": [],
  "mappings": ";;AAAA;CAAA;CAAA,CAAA,CAAe,EAAf,CAAM,GAAS;CACL,EAAR,IAAO,IAAP,EAAA;CADF,EAAe;CAAf"
}

a.js自然是编译后的JavaScript文件,跟以前不同的是开头有两行注释。其中第一行就是告诉浏览器去找一个map文件 -- a.map。 浏览器就会通过a.map,把编译前后代的代码一一对应起来。a.map中的mappings内容就是记录这段内容的,它会根据a.coffee的改变而改变。 有兴趣的可以自行修改a.coffee尝试下。

项目到这里就搞完了。现在用浏览器实验下。

现在我们用Google Chrome打开a.html。再打开Inspector工具。先点击右下角的齿轮图标打开Settings,勾选Enable source maps。

enable source maps

然后关闭Settings,点击上面的Sources标签查看源代码,你会看到浏览器列出了a.coffee文件!

a.coffee {% img /images/blog/sources_coffee.png %}

现在我们先打个断点,然后执行hello函数看看:

a.coffee debug

See ? It works !

小结

不难看出,要做到在浏览器中调试CoffeeScript代码,必须做到以下几点:

  1. 浏览器支持source maps,目前我只知道Google Chrome支持,其他浏览器的情况未知。
  2. JavaScript文件中提供关于map文件的信息。这需要CoffeeScript编译时加上 -m 参数。
  3. 浏览器可以通过url获取到coffee文件和map文件。

也许因为这些原因,目前Rails项目里面还不能使用source maps直接调试CoffeeScript文件。好消息是Sprocket现在正在添加对source maps功能的支持,应该不久就会有结果。到时候用Rails的我们就又high啦。

另外,source maps只是一个映射到源文件的技术,这就是说以后还可以利用这个技术在浏览器中看SASS和LESS,说不定还可以通过html看erb,slim和haml?前景可谓一片光明。

参考文档

这篇文章讲的很细,包括从压缩的JavaScript映射到未压缩的版本,从JavaScript映射到TypeScript(微软的预编译语言,更类似静态语言)等等。

共收到 17 条回复
3472

太强大了!!!

1924

很强大,一直用chrome调试

729

assets precompile能生成source map了吗?

2575

@ShiningRay 目前还不行,因为asset pipeline是由Sprocket这个gem负责的,目前还没有支持这个,不过这件事情正在做,还专门建立了一个source-maps的分支。issues讨论里相关的ticket是一年前就建立好的,就是一直在等CoffeeScript支持source maps特性,现在终于时机成熟了。

仔细想想,Rails要支持source maps要做的事情还挺多的:

  1. 编译coffee文件时除了要生成带特定注释的js文件,还要生成map文件;而且要让浏览器能直接访问coffee文件。
  2. source maps估计会以可配置参数的形式放进Sprocket,比如只在development环境下打开。不然你在跑在production环境下压缩好的js,别人一个enable source maps就可以把源码看光光……
1232

cool~

1904

够强大,期待能早些用上

2575

@ShiningRay 如果是在选中html元素时在右边列出scss,估计会有点呛

2031
  1. source maps估计会以可配置参数的形式放进Sprocket,比如只在development环境下打开。不然你在跑在production环境下压缩好的js,别人一个enable source maps就可以把源码看光光……

這個重要

1237

Awesome! CoffeeScript Rock!

61

这个事情我前几天正好在弄,有点头疼的是,新版本内核的webkit,不管是webkit nightly还是chome的,更改了对sourcemap的支持,这些会break目前rails对sourcemap的支持,貌似要等到下个版本的rails才会带出来,不知道现在解决了没有

2575

@pzgz 我当时写这个的时候把Chrome升级到最新版了,现在这个也是最新的吧。版本号25.0.1364.172。也没问题啊。不晓得你用的是不是更高版本的Chrominum。不过我是纯静态页面测试的。Rails 4出的时候能支持这个就没有遗憾了。

61

#12楼 @darkbaby123

Chrome没问题,我用的事Canary Build,和Safary的nighly build,Canary的版本是Version 27.0.1451.3 canary

558

Sprocket现在还不支持,有一个monkey patch可以用 有人封了个gem coffee-rails-source-maps

4257

阮一峰有篇文章介绍 source map 来着,挺浅显易懂。

2575

@camel 嗯,这个我没试过,可以用用。 @greatghoul 你说了我才知道,确实挺易懂,而且很详细。JavaScript Source Map 详解 我已经加到参考文档里面去了。

12224

这个 在 Chrome 40, 好像不太管用了 ???

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册