---
tags: Blue 的學習紀錄, VSCode, 工具, Heroku
---

# Heroku Remote Debug

在 Local 端使用 Visual Studio Code 對 Heroku 上的專案 Debug

## 情境

專案於 local 端運作正常，但是在 remote hosting 上卻會報錯

試著於各處插入 console.log 以及 catch error 都沒有進展後，想起曾看到過關於 remote development 的討論，於是開始研究怎麼做

這篇文的記錄範疇限於**Local 端如何對 Heroku 上正在運行的專案 Debug**

## 概念

<iframe width="560" height="315" src="https://www.youtube.com/embed/sakjpegUQsk" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

什麼是 remote development？
可以參考以上影片的示範

簡單來說，就是在本地端使用 vs code 即可編輯伺服端上的程式碼並且在伺服端上運行，**以確保不會出現本地和遠端的程式碼執行結果不一的問題**

與伺服端連線的方式大概分三種，WSL、Container 或 SSH

但是本篇文章的主要目的是要解決 Heroku 上的 bug，並沒有要研究如何進行 remote development

關於 remote development 可參考：
[Remote Development using SSH](https://code.visualstudio.com/docs/remote/ssh)

## Debug code on Heroku

1. 確保 Heroku 可以執行 `heroku ps:exec`
成功執行完即可 `exit`
2. Port forwarding：`heroku ps:forward 9229`
3. 修改 `Procfile` 的內容：`web: node --inspect app.js`
4. 修改 VSCode Debug 的 `launch.json`

   {
    "type": "node",
    "request": "attach",
    "name": "Heroku",
    "address": "localhost",
    "port": 9229,
    "protocol": "inspector",
    "localRoot": "${workspaceFolder}",
    "remoteRoot": "/app"
   },

遠端部屬完成後，即可在 VSCode 上設中斷點，執行 Debug

參考資料：

- [Heroku Exec (SSH Tunneling)](https://devcenter.heroku.com/articles/exec)
- [How to debug code in production (Heroku) that worked fine in local environment?](https://dev.to/petrussola/how-to-debug-code-in-production-heroku-that-used-to-work-fine-in-local-environment-1lpb)
- [How could I debug a node.js App deploy on Heroku?](https://stackoverflow.com/questions/38568917/how-could-i-debug-a-node-js-app-deploy-on-heroku)