使用 Source Map 可以在 FF 的调试器. Chrome 的 Sources 和 VSCode 中给压缩前的文件下断点,也可以方便定位错误发生的位置(定位到压缩前的文件). 何为 Source Map Source Map 可以将编译.语法转换或压缩后的代码与源码进行对应,从而方便调试. JavaScript Source Map 详解 - 阮一峰的网络日志 Source Map Revision 3 Proposal - Google 文档 Grunt 中使用 配置 sourceMa

为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用css框架合并压缩css文件:    使用js合并插件,减少网络请求次数:    压缩js文件,降低网络占用: 这三种方式都可以有效的解决实际问题,但同时在运行调试过程中也带来麻烦,由于css和js都是经过了压缩转换,当报错时我们很难定位到源代码具体位置.为了解决这个问题,Source map由此诞

线上产品代码一般是编译过的,前端的编译处理过程包括不限于 转译器/Transpilers (Babel, Traceur) 编译器/Compilers (Closure Compiler, TypeScript, CoffeeScript, Dart) 压缩/Minifiers (UglifyJS) 这里提及的都是可生成source map 的操作. 经过这一系列骚气的操作后,发布到线上的代码已经面目全非,对带宽友好了,但对开发者调试并不友好.于是就有了 source map.顾名思义,他是源码

前端访问接口时火狐浏览器控制台出现了这个问题, source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主文件放在同一个目录下. 比如压缩前原变量是map,压缩后通过变量替换规则可能会被替换成a,这时source map文件会记录下这个mapping的信息,这样的好处就是说,在调试的时候,如果有一些JS报错,那么浏览器会通过解析这个map文件来重新解压   压缩后的js,使开发者可以用未压缩前的代码来调试,便于我们去调试.

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大意义. 从源码转换讲起 JavaScript脚本正变得越来越复杂.大部分源码(尤其是各种函数库和框架)都要经过转换,才能投入生产环境. 常见的源码转换,主要是以下三种情况: 压缩,减小体积. 多个文件合并,减少HTTP请求数. 其他语言编译成JavaScript.最常见的例子就是CoffeeScrip

追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确告诉你 在这里只使用inline-source-map选项(source map有很多选项,其他的请详细阅读webpack指南) webpack.config.js module.exports = { .... + devtool: 'inline-source-map', ... }; prin

如何利用Grunt生成对应的Source Map文件,线上代码压缩使用chrome浏览器便于调式 首先我们来说说为何要生成sourceMap文件呢?简单的说,sourceMap是为了压缩后的代码调式提供方便,比如线上的JS文件已经压缩了,但是线上比如说有bug,但是代码已经是压缩后的,对于开发并不好调式,所以想生存一个对应的Map文件,然后使用chrome浏览器在源文件未压缩的JS文件下调式. 那么Map文件到底是什么呢?简单的来讲它就是记录信息,记录一些为压缩之前的js文件的位置,及压缩后的文

在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代码位置信息(转换后的代码的每一个位置,所对应的转换前的位置),这样你调试时看到的就是原文件代码. PS:如果原文件在最后一行有sourceMappingURL的设置: /*# sourceMappingURL=addgroup.css.map */ 那么这个文件就支持source map调试. sa

先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html页面 需要引入weui.min.css 不然没法渲染样式, 将下面的代码放在需要上传文件的地方就行了,如果不需要图片旋转功能, 可以直接删掉那个div, 改不改js无影响 addPhoto.html <!--图片缩略图--> <div class="weui-cells weui-

使用ajax上传图片,支持图片即时浏览,支持js图片压缩后上传给服务器 ajax上传主要使用了 var reader = new FileReader() 此方法 js图片压缩主要是利用canvas进行的 源码: /** * js使用form上传图片,支持本地预览选中的图片,支持携带自定义参数 * @param {string} params.previewImgId 预览图片控件id,可以预览上传图片 * @param {string} params.url 提交上传的url * @param

前言 这段时间一直在看Bootstrap,V3官方直接提供了Less版本的源码,就先将Less学完了,很简单的语法,学习写Demo都是在Webstorm里写的,配置了Watcher自动编译(详见<在WebStorm里配置watcher实现编辑less文件时自动生成.map和压缩后的.css文件>). 随着学习的加深,开始接触Sass了,Bootstrap V3也提供了Sass的源码,而且V4官方就只提供Sass的源码,从侧面证明Sass的流行趋势,毕竟Sass功能更全面,因此笔者决定以后就使用

在调试程序时我们经常通过打断点的方式来跟踪代码的执行流程,所以可能会在很多时候打很多断点,当我们知道了程序大概的执行流程之后,这时候断点就不太需要了.但是我们又不想马上把所有的断点清除掉,因为我们打的这些断点很可能是程序执行时的关键步骤,下次或许还会用到这些断点,这时我们可以通过工具的“跳过所有断点”这个功能来实现我们的需求.下面先讲chrome如何跳过所有的断点,再介绍一下Eclipse怎么跳过所有断点. 版权声明:本文为博主原创文章,未经博主允许不得转载. 原文地址: https://www

一.什么是源映射 为了提高性能,很多站点都会先压缩 JavaScript 代码然后上线, 但如果代码运行时出现错误,浏览器只会显示在已压缩的代码中的位置,很难确定真正的源码错误位置. 这时源映射就登场了. 源映射(Source Map)是一种数据格式,它存储了源代码和生成代码之间的位置映射关系. 源映射一般使用 .map 扩展名,源映射本质是一个 JSON 文本文档,其 MIME 类型也一般设为 application/json. 二.如何使用源映射 在 JavaScript 代码中添加注释:

源码地址: http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html 上周,jQuery 1.9发布. 这是2.0版之前的最后一个新版本,有很多新功能,其中一个就是支持Source Map. 访问 http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js,打开压缩后的版本,滚动到底部,你可以看到最后一行是这样的: //@ sourceMappingURL

Chrome 更新后出现了 jquery.min.map 404  (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuery 1.9.0 版本后在原始代码里会有 @ sourceMappingURL=jquery.min.map 什么是Source map 简单说,Source map就是一个信息文件,里面存储着位置信息.也就是说,转换后的代码的每一个位置,所对应的转换前的位置. 有了它,出错的时候,除错工具将直接显示

部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真实的出错位置了. 为啥变换代码? 前端代码越来越复杂的情况下,开发者通常会使用webpack.UglifyJS2等工具对代码进行打包变换,这样可以减少代码大小,有效提高访问速度.关于变换代码的原因,这里不妨引用一下大神阮一峰的JavaScript Source Map 详解: 压缩,减小体积.比如j

在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点调试是一件辛苦和不优雅的事情, 调试工具可以通过 Source Map 映射代码,让你在源代码上断点调试. 方案一:Webpack 支持生成 Source Map,只需在启动时带上 --devtool source-map 参数. 加上参数重启 DevServer 后刷新页面,再打开 Chrome

Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换.比如开发环境下用scss写样式, 想在浏览器中在线编辑css那样编辑scss就不是那么容易了.从我自己看过的资料中, sourcemap的概念最早出现在12年, jquer1.9是较早支持sourcemap的库.这篇博客比较有代表性:Introduction to JavaScript Sourc

先来一个webpack小例子,项目结构如下: // greeter.js module.exports = function() { var greet = document.createElement('div'); greet.textContent = "Hi there and greetings!"; return greet; }; // main.js const greeter = require('./Greeter.js'); document.querySelec

摘要: 自动还原真实出错位置,快速修复BUG. Source Map功能 微信小程序的Source Map功能目前只在 iOS 6.7.2 及以上版本支持. 微信小程序在打包时,会将所有 js 代码打包成一个文件,从而减少体积,加快访问速度. 然而,压缩代码的错误是很难Debug的,因为错误位置是这样的: 文件:app-service.js 行号:13782 列号:7974 这时,错误的位置信息(文件,行号和列号)失去了价值,因为开发者很难知道它所对应的源代码位置. Fundebug的微信小程序