2016-02-25 36 views
11

Tôi có điểm ngắt trong tệp .js nguồn (được tải qua bản đồ nguồn) khi tôi trỏ đến bằng công cụ chrome dev trong tab nguồn, nó không bị nhấn. Đôi khi tôi có thể khiến họ bị trúng nếu tôi nhấp vào nút định dạng {} nhưng nhấn và bỏ lỡ.Điểm ngắt trong tệp trong chrome không bị nhấn khi sử dụng webpack sourcemaps

Bất kỳ ý tưởng nào?

"devDependencies": { 
    "autoprefixer-loader": "^3.1.0", 
    "babel-core": "^6.1.20", 
    "babel-loader": "^6.1.0", 
    "babel-preset-es2015": "^6.1.18", 
    "babel-preset-stage-1": "^6.3.13", 
    "css-loader": "^0.23.1", 
    "material-ui": "^0.14.0", 
    "style-loader": "^0.13.0", 
    "stylus-loader": "^1.5.1", 
    "tape": "^4.2.2", 
    "webpack": "^1.12.12", 
    "webpack-dev-server": "^1.12.1" 
    }, 
    "dependencies": { 
    "babel-polyfill": "^6.1.19", 
    "moment": "^2.11.2", 
    "normalize.css": "^3.0.3" 
    } 

webapck:

module.exports = { 
    entry: [ 
    'babel-polyfill', 
    './app/app.js' 
    ], 
    output: { 
    publicPath: '/', 
    filename: 'dist/main.js' 
    }, 
    debug: true, 
    devtool: 'source-map', 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     include: path.join(__dirname, 'app'), 
     loader: 'babel', 
     query: { 
      presets: ['es2015'] 
     } 
     }, 
     { test: /\.styl$/, loader: 'style-loader!css-loader!stylus-loader' }, 
     { test: /\.css$/, loader: 'style-loader!css-loader' } 

    ] 
    }, 
    resolve: { 
    extensions: ["", ".webpack.js", ".web.js", ".js", ".css",".styl"] 
    } 
}; 
+0

thể được liên quan đến https://github.com/webpack/webpack/issues/2145 TLDR: cố gắng 'inline- source-map ' – Fiddles

Trả lời

-1

Comment devtool

//devtool: 'source-map', 

Thêm vào plugins

new webpack.SourceMapDevToolPlugin({ 
     filename: '[file].map', 
     include: ['app.js'], 
     exclude: ['vendor.js'], 
     columns: false 
    }) 
+6

Bạn có thể cung cấp bất kỳ chi tiết nào về điều này hoặc tại sao nó hoạt động không? –

+0

nếu tôi đã hiểu chính xác vấn đề là chrome không thể đặt điểm ngắt trong một số trường hợp, cột (mặc định là true) Khi ánh xạ cột sai trong SorceMaps bị bỏ qua và triển khai SourceMap nhanh hơn được sử dụng. Các cột – bORm

+1

có thể được đặt thành [false] (https://github.com/webpack/webpack/blob/5b5775f9e2fc73fea46629f2d6a3ed7a1f8424d3/lib/WebpackOptionsApply.js#L221) bằng cách sử dụng 'devtool: 'cheap-source-map'' – dan

2

Vì vậy, đây có vẻ là một issue with webpack and chrome in the past that was brought up.

Giải pháp tạm thời là đặt giải pháp đặt tùy chọn devtool thành source-map hoặc inline-source-map nhưng lưu ý, điều này sẽ làm cho thời gian biên dịch của bạn tăng lên.

Vì Webpack 3 vấn đề đã được cải thiện, nhưng vấn đề là trong sự tương tác giữa Chrome và Webpack với cơ sở mã thay đổi của chúng.

Với Webpack 3 Tôi đã thành công với các cấu hình sau:

devtool: 'cheap-module-source-map'

+0

tốt để biết thx – SuperUberDuper

Các vấn đề liên quan