I use the default source mapping built into Brunch. I see the files in order, but I cannot hit the breakpoints in the source mapped files. Using Javascript to access the debugger using debugger; works, which makes me believe something is wrong with the Branch side.
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 tried to set the 'old' and 'absoluteUrl' and 'inline' configurations for the sourceMaps property (see the Brunch config documentation), but still I did not hit the breakpoints.
I run the brunch watch --server and I use Chrome. Same behavior in Chrome Canary. I hit breakpoints in Firefox, there is no problem.
It is interesting to note that the source map files have a base line of 64, which seems to define them, something like:
//
The mapping works, but why can't I hit breakpoints in Chrome devtools?
MVCE available. Follow these instructions:
- Clone this sample repository
npm installbrunch build (make sure it is installed globally with npm install brunch -g )- Open devtools in Chrome and set a breakpoint
- Restart the application in an attempt to hit a breakpoint
For more information, here is 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 the Github brunch.
UPDATE
Solved by setting my brunch configuration as indicated by @JohannesFilter's answer to this question .