!

原文地址： introduction-source-maps 翻译的不好，见谅。另注：关于文中提到的，这里有一篇中文的介绍 译文： 我们常常使用一个提升站点性能的办法，就是把js文件和css文件打包压缩。但是压缩以后如果我们要调试或者修改呢？那简直是恶梦。不过，现在有一种可以部分解决这个问题的方式，叫做Source Map，我们翻译成源码图吧。 Source Map可以把压缩的文件转换成压缩前的样子。这就意味着，你可以尽管压缩你的代码，然后还可以方便的调试源码。现在chrome和firefox浏览器的开发工具已经支持SourceMap了。 本文介绍SourceMap的工作原理和生成方法，我们只介绍js的sourcemap。 备注：firefox默认支持SourceMap，Chrome浏览器需要手动开启支持。设置方法：在chrome浏览器的控制面板里（settings），里面的常规选项卡里有Enable js sourcemap 和Enable css source map 两个选项，勾选即可。 Source Map 工作方式 顾名思义,源图由一大堆信息组成,把压缩的代码转换成阅读的原始代码。您可以指定一个不同的源映射。做法就是把压缩的代码中加入一句注释： //# sourceMappingURL=/path/to/script.js.map 支持Source Map的js压缩工具会自动加入这句注释，浏览器只在开发工具打开的时候才会识这句注释并加载map文件（如果是chrome浏览器，则需要设置打开）。 map文件其实是一个json格式的文件，包含一些相关性的信息，示例如下： { version: 3, file: "script.js.map", sources: [ "app.js", "content.js", "widget.js" ], sourceRoot: "/", names: ["slideUp", "slideDown", "save"], mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..." } 每个节点的含义如下： version，版本号 file，文件名 sources,源码文件，支持多个 sourceRoot，源码目录 names，包含所有变量名、方法名等信息的列表，这是压缩时被替换掉的 mappings,一组base64编码的字符串 用UgilfyJS压缩工具生成map文件 UgilfyJS是一个优秀的压缩js的命令行工具，版本2以上的版本支持SourceMap，使用方式为： uglifyjs [input files] -o script.min.js --source-map script.js.map --source-map-root http://example.com/js -c -m --source-map – 输出的文件名.

Read more →

移动web开发，最让人心烦的估计就是各平台下运行结果不一致的问题了，明明在电脑上调试的好好的，在手机上却错误，而且错的莫名其妙。咋办？ 1、http://jsconsole.com/ 最初，大家期望都不高，能把console.log输出出来就好了，当然，高版本iphone在safari中内置这个功能了，但其他手机呢？ 这时候我们可以求助jsconsole.com，他其实提供了一个在线的服务，帮你来完成console.log的输出。你需要改什么？什么都不需要改。打开网页看看吧。 不多说，输入:listen,然后就可以得到一个脚本地址的标签，把该标签贴进你的网页里面即可。 原理其实就是把页面中控制台输出的内容显示打你当前的网页上了，不错吧。 2、weinre 有了输出结果，我们其实更不满足了，我还想想在pc上的浏览器那样，看dom的情况嘞，这个咋办？ 我们知道chrome等webkit浏览器底下有个开发工具，可以查看dom情况，脚本执行情况，比单纯的console.log输出强多了,得此工具，可以得天下乎。 weinre就是这样一个强大的工具，原理是：在安装一个weinre的服务，其实就是一个提供api的网站，然后跟jsconsole中一样，把生成的一段代码加入到你的网页中去（也可以不加入，用收藏夹方式调试也可以）。然后这段脚本就把页面中所有的信息（webkit的）发到你的服务器，然后展示给你。这个脚本依赖webkit，所以现在支持webkit的浏览器。不过现在主流的移动端浏览器都是webkit的，ie和firefox嘛，还只占很小比例。 weinre据说早期是java开发的，现在有nodejs版，使用可以参考以下文章： http://ju.outofmemory.cn/entry/1355 （经测试，在chrome浏览器上正常，而ios7的safari中与某些脚本有冲突，会报错，不知道是不是nodejs版的weinre还没正式完成？） 3、firebug-lite 前面说到，weinre只支持webkit浏览器，其他浏览器我们咋处理哪？ 做web开发的，一定想到firebug那近乎完美个的调试工具，想来做web开发这几年基本上没有离开过firebug，重装电脑第一个要装的浏览器是firefox，第一个要装的插件就是firebug啦。 不过之前一直没用过，把firebug-lite弄到手机浏览器上去。 其实很简单啦，跟前面的一个，把一段脚本嵌入到你的页面去就好了。 参考：https://getfirebug.com/firebuglite 不过firebug这么强大的东东，在小小的浏览器窗口中施展的着实不甚自在。要是集weinre和firebug的种种优点于一身，哈哈。