Webfunny前端监控功能分享：如何解析源码？

原创

于 2021-12-05 12:44:37 发布 · 557 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #webpack

本文介绍了如何使用Webfunny进行前端源码的解析，特别是针对webpack4.0+打包的代码。内容包括区分线上打包和源码的sourceMap文件，解析线上错误代码在源码中的位置，以及通过SourceMap B解析出错误代码附近的源代码。此外，还提到了解决上传sourceMap文件过大问题的方法，并简单介绍了Webfunny作为前端监控工具的功能和服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家好，期待已久的sourceMap功能终于上线了，功能还需要进一步优化，但是也可以提前和大家见面了。
目前支持：webpack4.0 + 打包的代码，如果有webpack2.0+版本的用户，可以联系webfunny技术同学单独处理~
好了，话不多说，让我们来看看如何使用webfunny来定位源码吧。

一、区分线上打包和源码的sourceMap文件

1）正常情况下，我们打包发布的文件中，一般会生成两个文件，xxx.min.js、xxx.min.js.map；一个是我们打包的压缩js文件，一个是我们sourceMap（以下称：SourceMap A）文件。webpack配置如下：

optimization: {
   
    minimize: true // 开启压缩
},
devtool: "source-map" // 生成sourceMap文件

用户需要将这一步生成的js和map文件，都要上传到生产地址中。（PS：有人会担心，map文件上传的生产环境，不安全，请不要担心，这一步生成map文件是无法解析出源码的，这个ma

最低0.47元/天解锁文章