在浏览器中运行的 JavaScript 代码都是编译器输出的代码，这些代码的可读性很差。如果在开发过程中遇到一个不知道原因的 Bug，则你可能需要通过断点调试去找出问题。 在编译器输出的代码上进行断点调试是一件辛苦和不优雅的事情， 调试工具可以通过 Source Map 映射代码，让你在源代码上断点调试。

方案一：Webpack 支持生成 Source Map，只需在启动时带上 --devtool source-map 参数。 加上参数重启 DevServer 后刷新页面，再打开 Chrome 浏览器的开发者工具，就可在 Sources 栏中看到可调试的源代码了。

方案二：直接在Webpack.config.js 中加入属性  devtool: 'source-map' 即可

让 webpack 加载 Source Map的更多相关文章

  1. webpack加载多级依赖时css、html文件不能正确resolve的问题

    在使用webpack+avalon以及avalon的mmRouter做SPA的时候,碰到一个困扰数周的问题:webpack加载多级依赖时出现了css文件和模板(html)文件不能正确resolve.原 ...

  2. webpack进阶构建项目(一)：1.理解webpack加载器

    1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. We ...

  3. webpack加载器（Loaders）

    加载器(Loaders) loader 是对应用程序中资源文件进行转换.它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件. 示例 例如,你可以使用 loa ...

  4. webpack加载css文件及其配置

    webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...

  5. webpack加载postcss，以及autoprefixer的loader

    webpack2.0加载postcssloader以及autoprefixer实现自动根据兼容性的需求给css加私有前缀的功能,给开发带来便利, 下面是我的配置信息,亲测有效: 1.webpack.c ...

  6. 【转】webpack中关于source map的配置

    Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...

  7. Vue-cli / webpack 加载静态js文件的方法

    一.html-webpack-plugin 编译 1.只需要在入口处定义一个chunks,如我们定义一个fuck模块 entry: { app: './src/main.js', fuck: ['./ ...

  8. webpack前端模块加载工具

    最近在看许多React的资料,发现了大部分的项目都是用webpack行模块化管理的工具.这次也是借着写了一个React-Todos的小应用,对webPack最基本实用的功能体验了一番,顺带做个小记录. ...

  9. webpack分片chunk加载原理

    首先,使用create-react-app快速创建一个demo npx create-react-app react-demo # npx命令需要npm5.2+ cd react-demo npm s ...

随机推荐

  1. mysql打开文件数太多的解决办法

    http://www.orczhou.com/index.php/2010/10/mysql-open-file-limit/ http://www.cnblogs.com/end/archive/2 ...

  2. 第二步：开发工具Eclipse安装并汉化

    打开下载官网:www.eclipse.org.点击下载(download英文)然后就是安装步骤了,还是一样一直的点击下一步,默认安装到C盘.如下图: 汉化步骤: 1.打开www.eclipse.org ...

  3. 修改SVN路径

    由于服务器IP更换,所以SVN的路径也就更换了. 更换SVN路径的做法是: 选中SVN checkout的文件夹,右键选择TortoiseSVN的relocate.注意要选择checkout的根目录, ...

  4. 计蒜客 18487.Divisions-大数的所有因子个数-Miller_Rabin+Pollard_rho-超快的(大数质因解+因子个数求解公式) (German Collegiate Programming Contest 2015 ACM-ICPC Asia Training League 暑假第一阶段第三场 F)

    这一场两个和大数有关的题目,都用到了米勒拉宾算法,有点东西,备忘一下. 题目传送门 F. Divisions 传送门 这个题是求一个数的所有因子个数,但是数据比较大,1e18,所以是大数的题目,正常的 ...

  5. itoa()函数和sprintf()函数

    itoa()函数 itoa 为c语言的一个函数.itoa 函数是一个广泛应用的,从非标准扩展到标准的C语言.它不能被移植,因为它不是标准定义下的C语言,但是,编译器通常在一个不遵循程式标准的模式下允许 ...

  6. 【bzoj2957】【楼房重建】另类的线段树（浅尝ACM-H）

    [pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=62609346 向大(hei)佬(e)势力学(di ...

  7. [BZOJ4398]福慧双修/[BZOJ2407]探险

    题目大意: 给定一个$n(n\leq40000)$个点$m(m\leq100000)$条边的有向图,求从$1$出发回到$1$的不经过重复结点的最短路. 思路: 首先Dijkstra求出从1出发到每个结 ...

  8. iOS开发 Swift开发数独游戏（二）数独题目的生成

    一.Plist文件结构设计 由于要预先生成数独题目的文件,我自然而然想到用plist存取. 我用Xcode建了几个plist文件来熟悉这种文件使用的结构后设计了如下结构: 为区分难度(后来了解到挖空数 ...

  9. 关于spring.net的面向切面编程 (Aspect Oriented Programming with Spring.NET)-使用工厂创建代理（Using the ProxyFactoryObject to create AOP proxies）

    本文翻译自Spring.NET官方文档Version 1.3.2. 受限于个人知识水平,有些地方翻译可能不准确,但是我还是希望我的这些微薄的努力能为他人提供帮助. 侵删. 如果你正在为你的业务模型使用 ...

  10. 监控目前所有连接SQL SERVER的用户信息

    原文:监控目前所有连接SQL SERVER的用户信息 if object_id('p_getlinkinfo','P')is not null drop proc p_getlinkinfo go c ...