ローカルホストでVScode dubuggerの動作確認する

[r-sugi]

User description

209

---

PR Type

enhancement

---

Description

• VSCodeのデバッグ設定を更新し、Node.jsプロセスにアタッチする新しい設定を追加しました。これにより、ローカルホストのポート9230に接続できます。
• package.jsonのdebugスクリプトをnext devを使用するように変更しました。

---

Changes walkthrough 📝

Relevant files

Enhancement

launch.json Update VSCode launch configuration for Node.js debugging  .vscode/launch.json Removed the full stack debug configuration. Added a new configuration for attaching to a Node.js process. Configured to attach to port 9230 on localhost. +7/-9      package.json Update debug script in package.json                                            app/package.json - Modified the `debug` script to use `next dev`. +1/-1

---

💡 PR-Agent usage: Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextjs-tdd-template_storybook	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 16, 2024 6:17am

[github-actions[bot]]

PR Reviewer Guide 🔍

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Configuration Update 新しいデバッグ設定が追加されましたが、古い「Next.js: debug full stack」設定が削除されています。この変更が意図的かどうか確認し、必要に応じて古い設定を保持するか新しい設定に完全に移行するかを検討してください。 Script Command Update `debug`スクリプトが`next dev`を使用するように変更されました。この変更がプロジェクトの他の部分にどのような影響を与えるかを検討し、必要に応じてドキュメントやCI/CDパイプラインを更新してください。

[github-actions[bot]]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	debug スクリプトの NODE_OPTIONS にデバッグポートを明示的に指定する。 ___ **debug スクリプトの NODE_OPTIONS に '--inspect' を設定していますが、ポートを明示的に指定することを検討してください。デフォルトポートが他のプロセスによって使用されている場合、デバッグが開始できない問題が発生する可能性があります。** [app/package.json [10]](https://github.com/r-sugi/nextjs-tdd-template/pull/212/files#diff-012b982f97a0d326aeec58dd3b789484b05a944d609afe1b8ed5e299fc485f61R10-R10) ```diff -"debug": "NODE_OPTIONS='--inspect' next dev", +"debug": "NODE_OPTIONS='--inspect=0.0.0.0:9230' next dev", ``` Suggestion importance[1-10]: 8 Why: Explicitly specifying a debug port in the `NODE_OPTIONS` can prevent conflicts with other processes using the default port, which is a practical enhancement for ensuring reliable debugging.	8
Possible issue	localRoot と remoteRoot のパスを確認し、必要に応じて修正する。 ___ **localRoot と remoteRoot のパスを確認してください。Docker内のアプリのディレクトリが /app であることを確認し、ローカルのパスが ${workspaceFolder}/app であることを再確認してください。これらが正しく設定されていない場合、デバッグ時にファイルのマッピングに問題が発生する可能性があります。** [.vscode/launch.json [22-23]](https://github.com/r-sugi/nextjs-tdd-template/pull/212/files#diff-bd5430ee7c51dc892a67b3f2829d1f5b6d223f0fd48b82322cfd45baf9f5e945R22-R23) ```diff -"localRoot": "${workspaceFolder}/app", -"remoteRoot": "/app" // Docker内のアプリのディレクトリ +"localRoot": "${workspaceFolder}/app", // 確認後、必要に応じて修正 +"remoteRoot": "/app" // 確認後、必要に応じて修正 ``` Suggestion importance[1-10]: 7 Why: The suggestion to verify and potentially adjust the `localRoot` and `remoteRoot` paths is valid, as incorrect paths could lead to issues with file mapping during debugging. However, it is more of a precautionary check rather than a necessary change.	7

[github-actions[bot]]

Preview APP: 'https://nextjs-tdd-template-pxxnd0zmv-rsugis-projects.vercel.app'

[r-sugi]

Debugger listening on ws://127.0.0.1:9230/8aca2113-781f-4055-8b97-c3e18439d917 のようにport:9230に対してlaunch.jsonを設定する

$ npm run debug

> nextjs-tdd-template@0.1.0 debug
> NODE_OPTIONS='--inspect' next dev

Starting inspector on 127.0.0.1:9229 failed: address already in use
Debugger listening on ws://127.0.0.1:9230/8aca2113-781f-4055-8b97-c3e18439d917
For help, see: https://nodejs.org/en/docs/inspector
   the --inspect option was detected, the Next.js router server should be inspected at port 9230.
  ▲ Next.js 14.2.6
  - Local:        http://localhost:3000
  - Environments: .env.local
  - Experiments (use with caution):
    · instrumentationHook

 ✓ Starting...
 ✓ Ready in 1721ms
 ○ Compiling /articles/[id] ...
 ✓ Compiled /articles/[id] in 2.5s (1031 modules)

debuggerk箇所で止まる

vscodeのbreakpointでも止まる