在浏览器中运行的 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. JAVA反映练手

    import java.util.List; import java.util.ArrayList; import java.lang.reflect.Method; import java.lang ...

  2. 如何将django部署从顶级目录迁移到子目录下(NGINX UWSGI DJANGO)

    因为公司网站合并,要将我们的DJANGO项目从IP的顶级目录迁移到域名的二级目录. 以前硬编码的URL可惨了. 还涉及到upload目录,静态目录,websocket目录. 全用{% url %}问题 ...

  3. iis日志详解

    c-客户端操作.cs-客户端到服务器的操作.sc-服务器到客户端的操作. s-sitename s-computername s-ip cs-method cs-uri-stem cs-uri-que ...

  4. Python的并发并行[4] -> 并发[1] -> concurrent.future 模块

    concurrent.future 模块 1 thread模块 / thread Module 1.1 常量 / Constants Pass 1.2 函数 / Function Pass 1.3 类 ...

  5. Spfa【P1813】拯救小tim_NOI导刊2011提高（02）

    Description 小tim在游乐场,有一天终于逃了出来!但是不小心又被游乐场的工作人员发现了„„所以你的任务是安全地把小tim护送回家.但是,A市复杂的交通状况给你出了一大难题. A市一共有n个 ...

  6. 后门构建工具Backdoor Factory

    后门构建工具Backdoor Factory   在渗透测试中,后门程序帮助渗透测试人员在目标机器上执行各种预期的操作.例如,它可以建立从目标主机到攻击机的网络连接,方便渗透测试人员控制目标主机.Ka ...

  7. 前端html第三方登录

    首先推荐一下,这个博客主的文章:https://www.cnblogs.com/v-weiwang/p/5732423.html 很不错,基本靠他的博客. 我这里记一点自己调试过程中的报错等: 1,微 ...

  8. Delphi ParamStr 使用方法

    ParamStr(0) 代表程序的路径, ParamStr(1) 代表程序的设置的参数

  9. andriod绘制图形

    使用view画图,有两个重要的组件需要介绍: (1)Paint 可以理解为画刷或者画笔,去主要用来设置绘图使用的颜色.填充方式.透明度.字体以及字体样式等. (2)Canvas 画布,在view上显示 ...

  10. Java 使用IE浏览器下载文件，文件名乱码问题

    使用Servlet实现文件下载功能时,使用IE下载出现文件名乱码; 网上常见的解决办法是通过"user-agen"来判断浏览器: if (req.getHeader("u ...