1. 首先你得用vscode，並且安裝debugger for chrome外掛
2. 安裝完成後按F5或者左側debug圖示，詳細見動態演示圖吧。

3. 配置詳細步驟：

• 點選增加配置項，右側彈出視窗選擇Chrome，
• 增加配置項內容，選擇launch chrome,配置內容的url即為專案開啟的地址，webroot可以不變
• 儲存後，點選綠色三角形啟動，會彈出新的Chrome視窗
• 由於使用的是roadhog（webpack）打包，我們需要使用sourceMap進行程式碼debug，在vscode自帶的控制檯內找到debug console，輸入.scripts，檢視打包後和打包前的對應關係：

 webpack-internal:///995
    - webpack:///./node_modules/
 
[email protected]@react-router-redux/lib/middleware.js?1965 (f:\work\takeout\index.js\node_modules\[email protected]@react-router-redux\lib\middleware.js)

上面的995序號標識下面檔案打包前的檔案，vscode左側選單內loadeds cripts選單下的 webpack-internal對應的序號即為該檔案。

4. 配置完成後點選執行，在行號前面單機出現紅點即為斷點，滑鼠移入變數即可檢視當前值。