早午餐源映射：不在Chrome devtools中击中断点 [英] Brunch source mapping: not hitting breakpoints in Chrome devtools

问题描述

我正在使用Brunch内置的默认源映射。我看到文件很好，但我无法在源映射文件中点击断点。使用Javascript访问调试器通过调试器; 工作，这让我相信早午餐方面有问题。

I'm using the default source mapping built into Brunch. I see the files fine, but I cannot hit breakpoints within the source mapped files. Using the Javascript access to the debugger via debugger; works, which leads me to believe it's something wrong with the Brunch side of things.

这是我的brunch-config.js：

Here is my brunch-config.js:

module.exports = {

  files: {
    javascripts: {
      joinTo: {
        'js/vendor.js': /^(?!source\/)/,
        'js/app.js': /^source\//
      },
      entryPoints: {
        'source/scripts/app.jsx': 'js/app.js'
      },
      order: {
        before: /^(?!source)/
      }
    },
    stylesheets: {joinTo: 'css/core.css'},
  },

  paths: {
    watched: ['source']
  },

  modules: {
    autoRequire: {
      'js/app.js': ['source/scripts/app']
    }
  },

  plugins: {
    babel: {presets: ['latest', 'react']},
    assetsmanager: {
      copyTo: {
        'assets': ['source/resources/*']
      }
    },
    static: {
      processors: [
        require('html-brunch-static')({
          processors: [
            require('pug-brunch-static')({
              fileMatch: 'source/views/home.pug',
              fileTransform: (filename) => {
                filename = filename.replace(/\.pug$/, '.html');
                filename = filename.replace('views/', '');
                return filename;
              }
            })
          ]
        })
      ]
    }
  },

  server: {
    run: true,
    port: 9005
  }

};

我试过设置 sourceMaps 属性配置为'旧'和'absoluteUrl'和'内联'（请参阅早午餐配置文档），但我仍然没有遇到断点。

I have tried setting the sourceMaps property of config to 'old' and 'absoluteUrl' and 'inline' (see Brunch config documentation) but still I do not hit breakpoints.

我运行命令 brunch watch --server 我正在使用Chrome。 Chrome Canary中的行为相同。我在Firefox中遇到了断点，没有问题。

I run the command brunch watch --server and I am using Chrome. Same behavior in Chrome Canary. I hit the breakpoints in Firefox, no problem there.

有趣的是，源地图文件看起来有一个基本的64字符串，如下所示：

It's interesting to note that the sourced map files have a base 64 string seemingly for their definition, something like:

//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpb...

映射似乎有效，但为什么我不能在Chrome devtools中点击断点？

MVCE可用。请按照以下说明操作：

MVCE available. Follow these instructions:

1. 克隆此示例存储库


2. npm install


3. brunch build （确保全局安装 npm install brunch -g ）


4. 在Chrome devtools中打开并设置断点


5. 重新加载应用以尝试点击断点

1. Clone this example repository
2. npm install
3. brunch build (make sure it is installed globally with npm install brunch -g)
4. Open in Chrome devtools and set a breakpoint
5. Reload the app in attempt to hit the breakpoint

有关其他信息，请参阅我的package.json：

For additional information, here's my package.json:

{
  "version": "0.0.1",
  "devDependencies": {
    "assetsmanager-brunch": "^1.8.1",
    "babel-brunch": "^6.1.1",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-rewire": "^1.0.0-rc-5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.10.3",
    "babel-plugin-transform-object-rest-spread": "^6.8.0",
    "babel-preset-react": "^6.3.13",
    "babel-register": "^6.11.6",
    "browser-sync-brunch": "^0.0.9",
    "brunch": "^2.10.9",
    "brunch-static": "^1.2.1",
    "chai": "^3.5.0",
    "es6-promise": "^3.2.1",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.20.2",
    "html-brunch-static": "^1.3.2",
    "jquery": "~2.1.4",
    "jquery-mousewheel": "^3.1.13",
    "mocha": "^3.0.0",
    "nib": "^1.1.0",
    "nock": "^8.0.0",
    "oboe": "~2.1.2",
    "paper": "0.9.25",
    "path": "^0.12.7",
    "pug": "^2.0.0-beta10",
    "pug-brunch-static": "^2.0.1",
    "react": "^15.2.1",
    "react-dom": "^15.2.1",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-mock-store": "^1.1.2",
    "redux-promise": "^0.5.3",
    "redux-thunk": "^2.1.0",
    "reselect": "^2.5.3",
    "spectrum-colorpicker": "~1.8.0",
    "stylus-brunch": "^2.10.0",
    "uglify-js-brunch": "^2.10.0",
    "unibabel": "~2.1.0",
    "when": "~3.4.5"
  },
  "dependencies": {
    "jwt-decode": "^2.1.0",
    "lodash": "^4.17.4",
    "postal": "^2.0.5",
    "rc-tree": "^1.3.9"
  },
  "scripts": {
    "test": "mocha --compilers js:babel-register"
  }
}

问题。

UPDATE

通过修复我的早午餐配置解决，如@ JohannesFilter对这个问题。

Solved by fixing my brunch config as specified in the @JohannesFilter's answer to this question.

推荐答案

这是一个有效但有冲突的早午餐配置的副产品。请参阅@JohannesFilter的问题的答案。

This was a byproduct of a valid but conflicting Brunch configuration. See the answer to this question from @JohannesFilter.

本质上，似乎 files.joinTo 和 files.entryPoints 是互斥的，因为 files.entryPoints 会覆盖 files.joinTo 的输出，如果它们重叠的话。解决方案是选择一个或另一个，或确保它们不与他们正在处理的文件重叠。例如，这两个都是工作配置：

In essence, it seems that files.joinTo and files.entryPoints are mutually exclusive in that files.entryPoints will override the output of files.joinTo if they overlap. The solution is to choose one or the other, or make sure that they do not overlap on the files they are dealing with. For example, both of these are working configurations:

entryPoints: {
  'source/scripts/app.jsx': {
    'js/vendor.js': /^(?!source\/)/,
    'js/app.js': /^source\//
  },
}

或

joinTo: {
  'js/lib.js': /^(?!source\/)/
},
entryPoints: {
  'source/scripts/app.jsx': {
    'js/app.js': /^source\//
  },
}    

这篇关于早午餐源映射：不在Chrome devtools中击中断点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！