在浏览器中运行的 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…

链接 : https://www.cnblogs.com/chris-oil/p/8856020.html…

source maps Webpack打包生成的.map后缀文件,使得我们的开发调试更加方便,它能帮助我们链接到断点对应的源代码的位置进行调试(//# souceURL),而devtool就是用来指定source-maps的配置方式的.以下是官方文档的说明:   source maps 开发工具(Devtool) 此选项控制是否生成,以及如何生成 Source Map.以下是官方文档的配置选项:   devtool配置选项 其中一些值适用于开发环境(从表格中各种方式的构建速度来看,可以看出eva…

先来一个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…

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

好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中存储着压缩混淆后的代码所对应的转换前的位置. 有了它,出错的时候,除错工具将直接显示原始代码,而不是转换后的代码, 能够极大的方便后期的调试. 2.为什么需要Source Map? Source Map好东西,一般如果在源文件中语法出现了错误,打错字母了, 源文件和打包后文件中代码对应的行数是不一致…

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

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

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…

precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package.json #自动生成package.json文件 npm init 2.新建webpack.config.js module.exports = { entry: "./main.js", output: { path: __dirname, // __dirname是node.js中的…

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

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

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

这里以环境分类为分析方向 1.对开发环境 eval - 每个模块都使用 eval() 执行,并且都有 //@ sourceURL.此选项会非常快地构建.主要缺点是,由于会映射到转换后的代码,而不是映射到原始代码(没有从 loader 中获取 source map),所以不能正确的显示行数. eval-source-map - 每个模块使用 eval() 执行,并且 source map 转换为 DataUrl 后添加到 eval() 中.初始化 source map 时比较慢,但是会在重新构建时…

一.什么是源映射 为了提高性能,很多站点都会先压缩 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…

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

一.source map 概述 我们在打包中,将开发环境中源代码经过压缩,去空格,babel编译转化,最终可以得到适用于生产环境的项目代码,这样处理后的项目代码和源代码之间差异性很大,会造成无法debug的问题.举例来说,如果压缩等处理过的生产环境中的代码出现bug,调试的时候只能定位到压缩处理后的代码的位置,无法定位到开发环境中的源代码. sourcemap就是为了解决上述代码定位的问题,简单理解,就是构建了处理前的代码和处理后的代码之间的桥梁.主要是方便开发人员的错误定位.这里的处理操作包括…

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

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

plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins 属性传入一个 new 实例,接下来我们介绍几个常用的插件 BannerPlugin 将横幅添加到每个生成的块的顶部.一般用于添加版权声明 const webpack = require('webpack'); // 访…

项目初始化:采用TypeScript 我们的版本是: $ node --version v8.5.0 $ npm --version 5.5.1 npm版本升级了,因为npm最近带来了新特性,本地会生成package-lock.json,能 提高一些性能,想知道更多的,可以google一下. 创建目录初始结构: $ mkdir pickle $ cd pickle $ touch index.html $ touch index.ts $ touch webpack.config.js 初始化p…

// 开发模式下 module.exports = { mode: 'development', devtool: 'cheap-module-eval-source-map' } // 线上模式下 module.exports = { mode: 'production', devtool: 'cheap-module-source-map' } 权威介绍请查看官方文档:https://webpack.js.org/configuration/devtool/ ----------------…

使用快捷键注释,单行注释,多行注释,#if 0注释 将文件 mycomment.em点此下载放到sourceinsight的Base工程的路径下(一般是在C:\Documents and Settings\Administrator\My Documents\Source Insight\Projects\Base),当然推荐存放到该目录下,一般em文件是sourceinsight的宏语言文件,宏语言是 sourceinsight定义的一种语言,语法与C语言类似,sourceinsight提供了…

要引入jquery插件 全局引入jquery plugins : [new webpack.ProvidePlugin({ $: 'jquery', jQuery:'jquery' "window.jquery":'jquery' })] 依赖:(package.json) 'jquery':'^2.2.2' 'imports-loader': '^0.6.5' npm install imports-loader -save-dev 插件引入方法 在全局入口文件即webpack的en…

malihu-custom-scrollbar-plugin是一个依赖jquery的自定义网页滚动条样式插件 网站:http://manos.malihu.gr/jquery-custom-content-scroller/ github:https://github.com/malihu/malihu-custom-scrollbar-plugin jquery.mCustomScrollbar在npm上写了在webpack里使用的方法 但是其只说啦引用js,还需要配合mCustomScrol…

Friendly-errors-webpack-plugin 介绍 Friendly-errors-webpack-plugin识别某些类别的webpack错误,并清理,聚合和优先级,以提供更好的开发人员体验. 我们运行nodejs 可以看到错误信息如下: 安装入门 npm install friendly-errors-webpack-plugin --save-dev 基本用法 只需将FriendlyErrorsWebpackPlugin添加到Webpack配置中的插件部分即可. var F…

webpack-dev-server插件 webpack-dev-server是webpack官方提供的一个小型Express服务器.使用它可以为webpack打包生成的资源文件提供web服务. webpack-dev-server 主要提供两个功能: 为静态文件提供服务 自动刷新和热替换(HMR) HotModuleReplacementPlugin插件 HotModuleReplacementPlugin主要用于代码热替换(具体用途还不清楚,因为没有研究通透吧) 一.webpack-dev-…