Brunch source mapping: not hitting breakpoints in Chrome devtools

问题

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.

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
  }

};

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.

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.

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...

The mapping appears to be working, but why can't I hit breakpoints in Chrome devtools?

MVCE available. Follow these instructions:

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

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"
  }
}

Issue created on brunch's Github.

UPDATE

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

回答1:

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

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\//
  },
}

来源：https://stackoverflow.com/questions/43725754/brunch-source-mapping-not-hitting-breakpoints-in-chrome-devtools

标签

javascript

debugging

google-chrome-devtools

Brunch