ब्रंच स्रोत मैपिंग: क्रोम devtools

Question

में ब्रेकपॉइंट्स को मारना नहीं है मैं ब्रंच में निर्मित डिफ़ॉल्ट स्रोत मैपिंग का उपयोग कर रहा हूं। मैं फ़ाइलों को ठीक देखता हूं, लेकिन मैं स्रोत मैप की गई फ़ाइलों के भीतर ब्रेकपॉइंट्स को हिट नहीं कर सकता। debugger; कार्यों के माध्यम से डीबगर पर जावास्क्रिप्ट पहुंच का उपयोग करना, जो मुझे विश्वास दिलाता है कि यह चीजों के ब्रंच पक्ष के साथ कुछ गलत है।

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 
    } 

}; 

मैं 'old' और 'absoluteUrl' और 'inline' को config की sourceMaps संपत्ति की स्थापना की कोशिश की है (Brunch config दस्तावेज़ देखें), लेकिन अभी भी मैं breakpoints मारा नहीं है:

यहाँ मेरी ब्रंच-config.js है।

मैं brunch watch --server आदेश चलाता हूं और मैं क्रोम का उपयोग कर रहा हूं। क्रोम कैनरी में वही व्यवहार। मैंने फ़ायरफ़ॉक्स में ब्रेकपॉइंट्स को मारा, कोई समस्या नहीं थी।

यह ध्यान रखें कि sourced नक्शा फ़ाइलें एक आधार 64 स्ट्रिंग प्रतीत होता है उनकी परिभाषा के लिए, की तरह कुछ है दिलचस्प है:

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

मानचित्रण काम कर रहा है, लेकिन क्यों मैं में breakpoints हिट नहीं कर सकते हैं क्रोम devtools?

एमवीसीई उपलब्ध। इन निर्देशों का पालन:

1. क्लोन इस example repository
2. npm install
3. brunch build Chrome DevTools में (सुनिश्चित करें कि यह npm install brunch -g साथ विश्व स्तर पर स्थापित किया गया है)
4. ओपन और एक ब्रेकपाइंट
5. पुनः लोड करने की कोशिश में एप्लिकेशन सेट ब्रेकपॉइंट

एडिटी के लिए

{ 
    "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 ब्रंच के Github पर निर्मित: onal जानकारी, यहाँ मेरी package.json है।

अद्यतन

this question लिए @ JohannesFilter के जवाब में निर्दिष्ट के रूप में मेरे ब्रंच config फिक्सिंग द्वारा हल।

Answer 1

यह वैध लेकिन विवादित ब्रंच कॉन्फ़िगरेशन का उपज था। @JohannesFilter से इस question का उत्तर देखें।

संक्षेप में, ऐसा लगता है कि files.joinTo और files.entryPoints परस्पर अनन्य हैं कि files.entryPoints अगर वे ओवरलैप files.joinTo के उत्पादन को पार कर जाएगी। समाधान एक या दूसरे को चुनना है, या यह सुनिश्चित करना है कि वे जिन फ़ाइलों से निपट रहे हैं उन पर ओवरलैप न करें।उदाहरण के लिए, इन दोनों के विन्यास काम कर रहे हैं:

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