價值的調試通天transpiled使用Chrome Devtools陣營

我有一個陣營正在使用以下.babelrc配置價值的調試通天transpiled使用Chrome Devtools陣營

{ 
    "presets": [ 
    "es2015", 
    "stage-1", 
    "react" 
    ], 
    "plugins": [ 
    "transform-decorators-legacy" 
    ] 
}

應用transpiles與巴貝爾transpiled和運行良好的應用程序時，「本」是不正確。但是，當我調試事件處理程序（故意寫爲箭頭函數）時，Chrome調試器將「this」的值顯示爲null。下面是一個簡單的事件處理程序

handleNext = (event) => { 
    event.preventDefault(); 
    this.gotoPage(this.state.page + 1); 
}

如果我設置的事件處理程序的第一行設置一個斷點，調試器顯示的「本」爲空，但會顯示「_this」的值作爲正確值，以「這」。正如我所說，代碼運行乾淨，但調試令人沮喪，因爲我不能簡單地懸停在代碼中的字段來查看它們的值。如果將「this」綁定到我的事件處理程序，我可以解決調試問題，但我不應該執行額外的步驟。所有這些在Babel5中運行良好，並且自從我們切換到Babel6以來一直是個問題。

我正在使用webpack捆綁代碼並創建源地圖。這裏是我的webpack.config.js爲sourcemaps配置

plugins: [ 
new webpack.SourceMapDevToolPlugin({ 
    filename: '[name].js.map', 
    include: ['app.js'], 
    columns: false 
}) 
],

來源

2016-04-15 Bob Cardenas

您是否嘗試過0級預設？ –

據我所知，這也是巴貝爾5的一個問題。 Chrome無法將'this'映射到'_this'。 – loganfsmyth

剛剛注意到，當您應該使用this.setState（{page：this.state.page + 1}）時，您正在改變頁面狀態。我使用stage-0預設，並能夠訪問正確的上下文。我在過去注意到預設的順序很重要，但最近還沒有證實。我使用「es2015」，「反應」，然後「階段0」。 –

摘錄可惜這是不爭的事實使用Babelified代碼調試器時。要使用ECMAScript規範行爲實現箭頭函數，關鍵字this需要轉換爲不同的名稱，目前無法告訴Chrome需要進行哪些調試。

一個選擇是嘗試使用箭頭函數轉換的spec選項，這應該使其在調試時表現得更好，但在所有情況下都可能不起作用。

"plugins": [ 
    ["transform-es2015-arrow-functions", {spec: true}] 
]

來源

2016-04-21 01:48:30 loganfsmyth

價值的調試通天transpiled使用Chrome Devtools陣營

回答

相關問題