通过两个实例来理解 devtool: 'source-map' 是什么意思

r囧r小猫 2022-05-19 00:55 125阅读 0赞

**小编推荐：[Fundebug][]专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。**

正如标题所说，有时候，你在看别人的 `webpack.config.js` 文件的配置的时候，你会发现他们可能加了这么一行：

devtool: 'source-map'

从字面上来想象，`devtool` 好像跟开发有关，`source-map` 好像跟 `源码` 或 `地图` 有关，与其去猜，我们不如通过实例来感受下它真正的意思。

我们这节只是入门教程的其中一篇，不从太深入地角度来理解 `source-map` 的含义，因为它太复杂了，引用一位大牛的话是这么说的，看下面的图片：

![303a9cea24c6bcde5002a39300f65d34.png][]

下面我们开始来感受下 `source-map` 的魔力。

## 1. 先不使用 `source-map` 的情况 ##

我们先在 js 里随便写一些错误的代码，也就是说你可以乱写一些不存在的方法。

比如下面这样：

**src/app.js**

import css from './app.scss';
    
    ...
    
    // 这个 sss 方法不存在，是我随便写的
    sss
    
    import $ from 'jquery';
    import './jquery.changeStyle';
    
    ...

**写错代码很正常啊，关键是要懂得如何调试，就是要先找到哪出错，把它改过来就好。**

我们来找一下哪里出错了。

打开浏览器的开发者工具，如下：

![07b211e7996c98dc7367c4553b7683a4.png][]

接着打开上图中的那个链接，然后：

![2c7cbb0eac16842d831c0238643ce1e4.png][]

这样会一脸懵懂的，因为仅仅定位到编译后的 `app.bundle.js` 文件是没用的，因为还是找不到源文件，那也就无法改正错误的代码。

## 2. 使用 devtool: 'source-map' ##

那怎么办呢？很简单。

在 **webpack.config.js** 文件中添加 `devtool: 'source-map'`，如下所示：

module.exports = {
      entry: {
        ...
      },
      devtool: 'source-map'
    }

这样再来试一下刚才的调试操作。

![4ac075cc584509a7eecfe82805db09ef.png][]

接着看下面的图片：

![94aab7811a89dba9302d679da95748f5.png][]

我们已经解决了问题，这样就能够查看哪里报错并找到报错的源文件。

刚才我们处理的是 javascript 文件，那 css 文件呢？

我们来看下。

## 3. 处理 css 文件 ##

首先，我们还是先来写一些错的 css 代码。

**src/app.scss**

body {
      background: pink;
      p {
        /* xxxx 是故意写错的。 */
        color: xxxx;
      }
    }

我的 `html` 页面是有 `p` 标签的，我们用开发者工具定位到 `p` 标签的样式中，如下图所示：

![33a8e3520d6c69fc10a004964a803459.png][]

**从图中可以看出，我们无法调试 css 代码，即使用了 `devtool: 'source-map'` 也没用。**

那怎么办呢？

之前我们是使用下面一些 `loader` 来处理 css 的。（不懂的，可以查看以前的章节）

var cssDev = ['style-loader', 'css-loader', 'sass-loader'];

这几个 `loader` 刚好都有个选项叫 `sourceMap`。（这个可以分别查看他们的官网得知）

我们把它设为 true 即可。

我们把上面的代码改成下面这样：

var cssDev = ['style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap'];

我们再来试试效果。

![bfd57fb46a9ff89dfdc2b96755ce15f4.png][]

接着，我们点进去之后，得到类似下图所示的情况。

![2355a09b777e3dc2a39004822ffa9266.png][]

那这样，我们就可以方便地调试 javascript 和 css 代码了。

至于 devtool 更深层次的内容请参考它的官方文档[Devtool][]

以下是一些参考链接：

*  [webpack sourcemap 选项多种模式的一些解释][webpack sourcemap]
 *  [\[webpack\] devtool里的7种SourceMap模式是什么鬼？][webpack_ devtool_7_SourceMap]

先说这么多。

原文链接：[http://webpackbook.rails365.net/477842][http_webpackbook.rails365.net_477842]

[Fundebug][]提供JavaScript监控，支持所有主流前端框架，微信小程序监控，微信小游戏监控，后端Node.js监控。

![1386816-20180502112633892-1858746955.png][]

您可能感兴趣的

1.  [详解1000+项目数据分析出来的10大JavaScript错误][1000_10_JavaScript]
2.  [10个用Console来Debug的高级技巧][10_Console_Debug]
3.  [Fundebug支持区分Source Map版本][Fundebug_Source Map]
4.  [Debug前端HTML/CSS][Debug_HTML_CSS]
5.  [Fundebug：小程序的运维中心][Fundebug 1]

[Fundebug]: https://www.fundebug.com/
[303a9cea24c6bcde5002a39300f65d34.png]: /images/20220519/7a47cdbe9ce740e99f7fe38b5ec45693.png
[07b211e7996c98dc7367c4553b7683a4.png]: /images/20220519/638b0f26e2094837999720b6c5390cfb.png
[2c7cbb0eac16842d831c0238643ce1e4.png]: /images/20220519/12efb9a6281a4b75b2caed66c98bb637.png
[4ac075cc584509a7eecfe82805db09ef.png]: /images/20220519/301f00514bb7434b9d85b7a9c41a793a.png
[94aab7811a89dba9302d679da95748f5.png]: /images/20220519/9ec6bf00aa574d7b96b892ef09257c9c.png
[33a8e3520d6c69fc10a004964a803459.png]: /images/20220519/54514c10198a4fc095ef4e5b0dd434ec.png
[bfd57fb46a9ff89dfdc2b96755ce15f4.png]: /images/20220519/31c53a13438b4a40aa10c154b9c283b0.png
[2355a09b777e3dc2a39004822ffa9266.png]: /images/20220519/75e619b194454003a9e6be0b2a0c59a5.png
[Devtool]: https://webpack.js.org/configuration/devtool/
[webpack sourcemap]: https://segmentfault.com/a/1190000004280859
[webpack_ devtool_7_SourceMap]: https://juejin.im/post/58293502a0bb9f005767ba2f
[http_webpackbook.rails365.net_477842]: http://webpackbook.rails365.net/477842
[1386816-20180502112633892-1858746955.png]: /images/20220519/d61a8a168bf940768f7356528e391ebf.png
[1000_10_JavaScript]: https://blog.fundebug.com/2018/03/12/top-10-javascript-errors-from-1000-projects/
[10_Console_Debug]: https://blog.fundebug.com/2018/03/19/10-tips-for-debugging-with-console/
[Fundebug_Source Map]: https://blog.fundebug.com/2017/12/26/fundebug-can-distinguish-sourcemap-version/
[Debug_HTML_CSS]: https://blog.fundebug.com/2018/01/02/how-to-debug-frontend-html-css/
[Fundebug 1]: https://blog.csdn.net/qq_40126542/article/details/80112657