火狐浏览器下启用sourcemap

2,503 阅读1分钟

环境

程序说明:

使用webpack打包的react组件

使用工具说明:

webpack版本 4.41.1

chrome版本 77.0.3865.90(正式版本) (64 位)

火狐版本:68.0.2 (64 位)

背景

由于测试人员提出了一个bug,在chrome下正常,在火狐下不正常(即在火狐下的兼容性问题),需要在火狐浏览器下调试webpack打包后的代码;

从所周知,打包后的代码可读性很差,所以肯定要启用sourcemap选项,方便调试代码;

但是尴尬的一幕来了;

在chrome下,正常可以看到源码并调试,参考下图:

chrome下的调试情况

但是,火狐浏览器下,缺看不到,源码,参考下图:

Firefox下的调试情况

真的很尴尬。。。, 埋头读压缩代码?

阅读压缩代码ing。。。10%。。。。20%。。。。已疯。。。

找资料了解,寻找解决办法。。

解决办法

原因:

火狐浏览在高版本下,默认关闭了,sourcemap的显示功能,需要单独开启;

PS,亲测在火狐40.xx的版本下是可用使用sourcemap功能的,不要问我是怎么知道的

刺激不刺激

开启步骤:

  • 第一步:在Firefox的地址栏中输入,about:config,进入浏览器的配置项;
  • 第二步:在其中寻找关键词,sourcemap 或 source-map 或者source,有可以直接搜索配置项devtools.source-map.client-service.enabled(为啥输入这么多,因为有些词是搜索不到配置项的 /(ㄒoㄒ)/~~)
  • 第三步:修改配置项 devtools.source-map.client-service.enabled 的值 为true;
  • 第四步:重启浏览器,即可;