# VSCode 調試功能問題解決方式

### 問題

使用VSCode的調試功能(Debugger)時，出現以下的錯誤訊息


而且 launch.json 與 tasks.json 貌似沒有甚麼問題

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "Egret",
            "request": "launch",
            "name": "Egret WebpackDevServer Debugger",
            "url": "http://localhost:3333",            
            "webRoot": "${workspaceFolder}",
            "preLaunchTask": "egret: build"
        }
    ]
}

tasks.json

{
    "tasks": [
        {
            "type": "egret",
            "isBackground": true,
            "problemMatcher": "$egret",
            "label": "egret: build"
        }
    ],
    "version": "0.2.0"
}

### 目前的解決方式

在 Google 搜尋關鍵字
> `cannot connect to runtime process timeout after 10000 ms`

可以找到一些相關的發問文章，但是大多的討論串都沒有已解決後續討論
目前參考下列網站，發現問題大概是出在 <font color=red>**指定Port**</font> 上面

[Visual Studioコード - 10000ミリ秒後にランタイムプロセスのタイムアウトに接続できません](https://www.366service.com/jp/qa/3f7e8613a5f03064fd5233cb3b745302)
[Visual Studio code - cannot connect to runtime process timeout after 10000 ms](https://stackoverflow.com/questions/50083113/visual-studio-code-cannot-connect-to-runtime-process-timeout-after-10000-ms)

於是將 launch.json 的改成以下內容

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "Egret",
            "request": "launch",
            "name": "Egret WebpackDevServer Debugger",
            "port": 3333,                      // 新增的內容
            "url": "http://localhost:3333",
            "webRoot": "${workspaceFolder}",
            "runtimeArgs": ["--inspect=3333"], // 新增的內容
            "preLaunchTask": "egret: build"
        }
    ]
}

--inspect 相關指令說明
[Debugging Guide](https://nodejs.org/en/docs/guides/debugging-getting-started/#command-line-options)

`--inspect=[host:port]` 可以讓 Node.js 在程序中接聽指定埠上的偵錯工具用戶端

若有發生一樣的問題，可以使用這個方式解決看看
雖然 `--inspect=[host:port]` 的相關說明表示，在能讓多數電腦連結的主機上下這個參數會很危險，但是若只在本機調試使用，問題應該不大。

###### tags: `教學`