标签: source-maps

如何在IE11中使用GWT SuperDevMode源映射？它有用吗？我试图右键单击IE调试器视图中的文件选项卡和"选择源映射"选项.但是,文件对话框只接受*.map文件,看起来它不了解sourcemap json文件.

Chrome中的一切都很棒,不幸的是我正在研究的问题只是IE :-(

我有一个带有 Typescript 和 Electon 的项目。我希望控制台错误引用到 Typescript 文件，而不是 javascript 缩小文件。我读到它可以用源映射来完成。

我看到这样一些参考这个，但我还没有达到我的目标。

你能帮助我理解为什么Ionic 2不会生成scss源地图.在"离子服务"后我导航到www/build文件夹,有main.css.map,但它包含null而不是生成的源图,如何解决？有谁遇到过这个问题？

我已将 webpack 配置为转译 scss -> css，但 webpack 生成的 sourcemap 无法解析 scss @import。

webpack.config.js：

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const outputPath = path.join(__dirname, 'dist');

module.exports = {
    devtool: 'source-map',
    entry: ['./src/main.scss'],
    target: 'web',
    output: {
        filename: 'js/[name].bundle.js',
        path: outputPath
    },
    module: {
        rules: [
            { // sass / scss loader for webpack
                test: /\.(sass|scss)$/,
                loader: ExtractTextPlugin.extract([
                    {
                        loader: 'css-loader',
                        options: {
                            url: false,
                            import: true,
                            minimize: true,
                            sourceMap: true,
                        }
                    },
                    'sass-loader'
                ])
            },
        ]
    },
    plugins: …

我正在对我的React.js应用程序中的问题进行故障排除,我想查看在Babel编译并由Webpack捆绑后在浏览器中执行的实际javascript.这样做的好方法是什么？

该应用程序使用create-react-app,因此它具有Babel,webpack等的默认CRA配置.源映射正常工作(很好!)但是如果我想查看源映射后面找到正在执行的真实代码怎么办？

我知道我可以/static/js/bundle.js在Chrome Dev Tools的网络窗格中找到,然后使用Cmd + F在该巨大的文件中查找一段代码.我也知道Chrome Dev Tools有一个关闭源映射的选项,但更改持久设置(即使我可以在不重新启动调试的情况下执行此操作,我不确定我可以)似乎没有比Cmd更容易+ F接近上面,特别是因为我必须记得改回来(并重新开始调试？).

相反,我只是在寻找一种在实际生成(转换和捆绑)代码和我的(源映射)代码之间来回切换的方法,而不会中断我的调试工作流程.

这可以在Chrome中使用吗？

我有一个MyLib正在加载的库MyApp。两者都编译的WebPack 4和MyApp用途source-map-loader加载源地图MyLib。从 webpack 4 开始，源映射指向一个缩小的文件而不是原始源代码。

调试到MyLib现在只是跳到以下源代码而不是实际代码：

(function webpackUniversalModuleDefinition(root, factory) { ... }

这曾经适用于 webpack 2。发生了什么变化——或者更确切地说，我需要改变什么才能让它再次工作？

MyLib Webpack 配置

{
    output: {
        path: helpers.root('dist'),
        filename: 'my-library.js',
        library: 'my-library',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'this'
    },
    resolve: {
        extensions: [ '.ts', '.js' ]
    },  
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: { configFileName: helpers.root('tsconfig.json') }
                    },
                ],
            }
        ]
    },
    optimization: { …

我有一个 JavaScript 项目，它使用带有源映射的 Webpack 4：

mode: 'development',
entry: { app: './src/app.js' },
output: {
    filename: 'app.[contenthash].js',
    path: outputPath,
},
devtool: 'sourcemap',
externals,
.... 

它产生我的2个JS文件dist夹： app.[contenthash].js并app.[contenthash].js.map连接到它。

我安装了source-map-explorer：https : //www.npmjs.com/package/source-map-explorer

但是当我在这些文件上运行它时，我收到错误：

您的源映射指的是第 17 行生成的第 8 列，但源在该行仅包含 0 列。检查您是否使用了正确的源映射。

我该如何解决？

编辑：

当我将 Webpack 的模式更改为production它不会抛出该错误。为什么？现在使用production模式，当我运行它时它会挂起......它需要多长时间？

使用 Chrome 或 Firefox 开发人员工具时，我无法查看某些 reducer 变量的值。例如，newItem在下面的 Chrome 调试器屏幕截图中：

铬合金：

火狐：

代码运行良好。日志语句输出正确，但通过调试器检查只显示undefined. 但是，如果我查看 Scope 视图，我可以看到一个名为的变量_newItem，它具有所有正确的属性和值（由于它们可能敏感而被隐藏）。

似乎导致此问题的原因是当我对状态进行浅层克隆时：（let newState = {...state};使用扩展语法或Object.assign({}, state).

每个后续变量基于newState显示undefined但_variableName[0-9]*在开发工具范围视图上都有一个对应的变量。

这不会发生在我们的 React 组件或其他非 Reducer 代码中。

似乎 Redux、源映射和开发人员工具可能存在一些问题，但我无法在 Redux 文档或问题跟踪器或 Chrome 错误跟踪器中找到任何搜索结果。

Redux：4.0.5
操作系统：Windows 10 x64

测试： Chrome: 81.0.4044.122, Canary: 84.0.4125.0
Firefox: 75.0, Dev. 版：76.0b4 (64-bit)

注：这是不一样的这个问题，与刚刚Chrome的闭包变量的优化交易。

我对 coursera.org（不是我自己的网站）上视频播放器的可用性并不完全满意，并希望使用本地覆盖来更改某些内容以方便我自己。

我成功找到了要更改的 JS 文件并启用了本地覆盖。但是在我保存更改后，网站仍然使用从服务器获取的文件，而不是包含我的更改的本地副本。

这是什么问题以及如何解决这个问题？

我想调试 React 开发过程中发生的一些错误。如您所见，我看不到源文件。我正在使用 create-react-app 创建我的项目。我没有改变任何其他东西。这是由 webpack 引起的吗？它发生在 react-scripts start 命令中。谢谢你。