账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    如何利用sourcemap去定位压缩后的代码位置
    88
    0

    同事之前做的一些项目代码用gulp压缩后,用sourcemap生成的有.map文件。
    后来同事离职了,然后现在我的工作邮箱收到了服务器发的这么一段错误日志:

    js 错误Array
    (

    [msg] => Uncaught TypeError: Cannot read property 'status' of undefined
    [file] => https://image.qnitem.dzsofts.net/js/copy_goods.min.js?qntag=153087588220171124
    [url] => https://qnitem.dzsofts.net/html/copy_goods/index.html?tap1=1
    [line] => 1
    [col] => 58335
    [error] => TypeError: Cannot read property 'status' of undefined
    [trace] => TypeError: Cannot read property 'status' of undefined
    at https://image.qnitem.dzsofts.net/js/copy_goods.min.js?qntag=153087588220171124:1:58335
    at Object.error (https://image.qnitem.dzsofts.net/js/common.min.js?qntag=151756578120171124:1:3404)
    at j (https://image.qnitem.dzsofts.net/js/jquery-1.11.1.min.js?qntag=145821312120171124:2:27244)
    at Object.fireWith [as rejectWith] (https://image.qnitem.dzsofts.net/js/jquery-1.11.1.min.js?qntag=145821312120171124:2:28057)
    at x (https://image.qnitem.dzsofts.net/js/jquery-1.11.1.min.js?qntag=145821312120171124:4:21868)
    at XMLHttpRequest.b (https://image.qnitem.dzsofts.net/js/jquery-1.11.1.min.js?qntag=145821312120171124:4:25897)

    )

    之前看同事有利用Node命令弄了个什么配置文件后根据这个col找到了源代码里的准确位置,然而我这个萌新并没用过这个……有没有大佬指点一下这个是应该怎么弄的??

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 孤单身影有谁怜 普通会员 1楼

      Sourcemap是一种文件映射技术,它可以自动跟踪文件中的各种操作(如代码插入、修改和删除)。通过使用Sourcemap,你可以跟踪压缩后的代码位置,这对于代码分析和调试非常有用。

      以下是如何在Node.js中使用Sourcemap定位压缩后的代码位置:

      1. 首先,你需要安装webpackwebpack-sourcemap这两个依赖。如果你还没有安装,可以使用以下命令安装:

      npm install webpack webpack-sourcemap --save-dev

      1. 在你的webpack.config.js文件中,添加一个规则来使用Sourcemap:

      javascript module.exports = { // ... module: { rules: [ { test: /\.js$/, use: { loader: 'webpack-sourcemap-loader', options: { include: /node_modules/, exclude: /node_modules/ } }, } ], }, };

      1. 在你的webpack.js文件中,你可以使用sourcemap插件来生成Sourcemap文件。这通常在entry文件中完成:

      ```javascript // ... const path = require('path'); const MiniSourcemapPlugin = require('webpack-sourcemap-plugin');

      module.exports = { // ... entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist'), }, module: { rules: [ { test: /.js$/, use: { loader: 'webpack', options: { devtool: 'source-map', sourcemap: 'inline', }, }, }, MiniSourcemapPlugin, ], }, }; ```

      1. 在你的src目录中,你可以看到一个名为bundle.js的文件,这个文件就是你的Sourcemap文件。你可以使用浏览器的开发者工具(如Chrome的开发者工具)来查看这个文件。

      请注意,Sourcemap文件并不是以.map结尾的,而是以.js.map结尾。这是因为在Node.js中,我们使用require('webpack-sourcemap-loader')加载Sourcemap文件,而这个文件通常以.js.map结尾。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部