在浏览器中运行的 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. tf一些理解（根据资料）

    首先看了开源操作机器人系统-ros这本书(张建伟)第五章slam导航 5.1使用tf配置机器人 还有ros navigation 教程 http://wiki.ros.org/navigation/T ...

  2. Laravel 添加自定义辅助函数

    1. 在 app 目录下新建一个文件 helpers.php 2. 在 composer.json 文件的 autoload 字典中添加 "files":["app/he ...

  3. Laravel使用Eloquent ORM操作数据库

    1.定义模型 <?php namespace App; use Illuminate\Database\Eloquent\Model; class Flight extends Model{ p ...

  4. HDU 2586.How far away ？-在线LCA(ST)-代码很认真的写了注释(捞到变形)

    2018.9.10 0:40 重新敲一遍,然后很认真的写了注释,方便自己和队友看,刚过去的一天的下午打网络赛有一题用到了这个,但是没写注释,队友改板子有点伤,因为我没注释... 以后写博客,代码要写注 ...

  5. SOAP很2的问题

    小弟说实话不很懂这方面的东西,但上头要求比较一下这两种方式的优劣,欢迎大家赐教啊!“按照一定的网络传输协议,通过符合 FTP/TCP/IP等协议的数据报或者以SOAP的方式传送到接口服务器.”这是出处 ...

  6. [xsy2213]tower

    题意:给一个地图,地图上的每个位置是空地或一个炮或一些敌人,给定每个炮的方向(上/下/左/右),每个炮只能打一个位置且炮弹轨迹不能相交,问最多打到多少敌人 原题貌似是TC SRM 627的题,题解在这 ...

  7. Ubifs Support

    参考:http://processors.wiki.ti.com/index.php/UBIFS_Support#Creating_UBIFS_file_system UBIFS UBIFS may ...

  8. The Art of Mocking

    One of the challenges developers face when writing unit tests is how to handle external dependencies ...

  9. select 下拉框的选中项的change事件

    HTML文件 <span style="float: left;">类      型:   <select id="type" class=& ...

  10. 设计模式之装饰器模式(PHP实现)

    /** * 装饰器模式(Decorator Pattern)允许向一个现有的对象添加新的功能,同时又不改变其结构.这种类型的设计模式属于结构型模式,它是作为现有的类的一个包装. * 这种模式创建了一个 ...