在visual code的debugger for chrome中調試webpack構建的項目

   一直使用chrome中內置的調試器， 感受世界那麼美好， 自從學了react以後，使用visual code做爲編輯器， 它提供了不少插件， 其中就包括debugger for chrome， 一款使用內置調試器來調試瀏覽器中網頁的插件。因而打算折騰一下試試。

踩了不少坑， 配置lanuch.json， 運行一直失敗， 緣由就是由於該項目是由webpack構建， 須要先啓動項目， 而後再啓動調試器

 

1. 啓動項目

npm start

只有項目啓動後， 配置的lanuch.json纔有效！！！

2. 配置lanuch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:3000", // 由於web-dev-derver默認打開的是此端口， 因此用url來指定調試該端口， 具體的端口和路徑由你項目決定 
            "webRoot": "${workspaceFolder}" // 默認
        }
    ]
}

3. F5啓動調試 - 完成