IntelliJ IDEA TypeScript/Webpack調試只適用於JavaScript斷點

我正在玩弄Angular 2/Bootstrap 4/Webpack project，只是爲了看看新東西是如何排隊的，我試圖讓IntelliJ IDEA 15在Chrome中運行調試與JetBrains Chrome擴展。IntelliJ IDEA TypeScript/Webpack調試只適用於JavaScript斷點

問題是我在TypeScript文件中設置的任何斷點都被忽略。我正在使用內置的轉換器，並將JavaScript輸出文件保留爲與TypeScript文件相同的名稱/位置，以便my-app.ts與my-app.js和相關的my-app位於同一文件夾中.js.map映射文件。

奇怪的是，如果我在生成的JavaScript文件中設置斷點，那麼IDE將在TypeScript文件中的相應位置中斷（即使它在那裏沒有顯示斷點）。因爲映射似乎可行，所以我可以繼續正常工作。

問題似乎是在.ts文件中設置斷點不會在相應的.js文件中設置所需的斷點。

我做錯了什麼（我從來沒有使用過TypeScript調試過），或者這是IDEA中的錯誤？

P.S.無論是通過IDEA的內置Web服務器進行遠程JavaScript調試還是使用本地調試，我都可以得到相同的結果。

來源

2015-12-13 Michael Oryl

有沒有可以指定映射文件的地方？ –

@JuanMendes如果您在IDEA（或WebStorm）中查看TypeScript編譯器配置，您將看到一個用於啓用源映射的複選框。這是「生成源地圖」。如果您告訴IDEA改爲使用外部配置，您也可以在tsconfig.json文件中啓用它。你可以在compilerOptions對象中放入「sourceMap」：true。 –

訣竅是將對Webpack內部URL的引用添加到調試配置中。當應用程序運行時，用於該Webpack URL的路徑將來自調試器的腳本選項卡。你也可以看到它在Chrome瀏覽器的腳本標籤一樣容易，但我已經有來自的IntelliJ IDEA這裏的觀點：

你可以看到，在webpack://的.路徑對應於我的項目文件夾（如見證其中的src路徑）。這就是告訴我，我需要在調試配置中使用Webpack的.路徑。如果您的項目排列不同，則需要相應調整。

至於爲什麼它是webpack:///.（用三個斜線）而不是webpack://.，我無法回答。我看到使用了in a JetBrains post，這就是我增加額外正斜槓的解決方案。

現在，你需要創建你的JavaScript調試配置，並設置它像下面這樣：

調整你的localhost地址和端口，以及您的構建路徑（__build__在我的情況，也許build或dist）。

現在我已經有了上面的調試配置設置，它工作得很好。

來源

2016-01-08 17:47:25

我配置了一切，就像它在JetBrains中所描述的一樣，但是我的打字稿斷點不會被打到，只有那些打開的js文件中的斷點 – Ced

這不適用於webpack-dev-server。有沒有辦法讓IntelliJ調試器運行webpack-dev-server？ – Endel

昨天我試了幾個小時的所有方法，但都沒有工作。所以我最終使用了Chrome的內置調試工具... – KuN

我已經成功地解決了在基於此解決方案的Intellij/Webstorm中使用webpack進行調試的問題：How to debug angular 2 app using angular-cli webpack?。您必須將主要ui項目目錄和目錄與.ts源映射到遠程URL，與解決方案中的完全相同。

我的tsconfig。json：

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "noImplicitAny": false, 
    "outDir": "../resources/static/out-tsc", 
    "sourceMap": true, 
    "target": "es6", 
    "typeRoots": [ 
     "../../../node_modules/@types" 
    ] 
    } 
}

來源

2016-10-23 09:36:45 Milso

IntelliJ IDEA TypeScript/Webpack調試只適用於JavaScript斷點

回答

相關問題