777-feat: Add debug configs for VS Code #778
Conversation
github-actions
bot
changed the title
ansivgit
changed the title
|
Lighthouse Report:
|
📝 WalkthroughWalkthroughThis pull request adds three related changes for improving the Next.js debugging experience. A new entry is added in the Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant VS as Visual Studio Code
participant NS as Next.js Server
participant CH as Chrome
Dev->>VS: Start Full Stack Debug Session
VS->>NS: Launch Next.js (using full stack config)
NS-->>VS: Confirm server ready (Local URL detected)
VS->>CH: Open Chrome at detected URL
CH->>NS: Send HTTP requests
NS-->>CH: Serve responses
VS-->>Dev: Display debug output and notifications
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
readme/debugging.md (3)
9-15: Review: Step 1 – Configuring the Debugger
Consider adding a comma after introductory phrases (e.g. "To do this, you need to rename...") for better readability. Also, markdownlint hints suggest using proper heading markers instead of emphasis for numbered steps.🧰 Tools
🪛 LanguageTool
[formatting] ~12-~12: Consider inserting a comma after ‘this’.
Context: ...ode to debug your Next.js application. To do this you need to rename the file `./vscode/l...(TO_VERB_COMMA)
[uncategorized] ~13-~13: Possible missing comma found.
Context: ...code/launch-win.jsondepending on your OS to./vscode/launch.json`. These config...(AI_HYDRA_LEO_MISSING_COMMA)
🪛 markdownlint-cli2 (0.17.2)
9-9: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
15-15: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
25-25: Review: OS Naming Convention
Please change "MacOs/Windows" to "macOS/Windows" for correct capitalization of Apple's OS.🧰 Tools
🪛 LanguageTool
[grammar] ~25-~25: The operating system from Apple is written “macOS”.
Context: ... to control the execution of your code (MacOs/Windows): - Continue (F5): Resume ex...(MAC_OS)
27-33: Review: Debug Toolbar Instructions Formatting
While the list items clearly describe the debugger actions, consider varying the sentence start words to avoid repetition and align with style guidelines.🧰 Tools
🪛 LanguageTool
[style] ~33-~33: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e function call on the current line. - Step Out (Shift+F11): Step out of the curr...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
.gitignore(1 hunks).vscode/launch-mac.json(1 hunks).vscode/launch-win.json(1 hunks)readme/debugging.md(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .gitignore
🧰 Additional context used
🪛 LanguageTool
readme/debugging.md
[formatting] ~12-~12: Consider inserting a comma after ‘this’.
Context: ...ode to debug your Next.js application. To do this you need to rename the file `./vscode/l...
(TO_VERB_COMMA)
[uncategorized] ~13-~13: Possible missing comma found.
Context: ...code/launch-win.jsondepending on your OS to./vscode/launch.json`. These config...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~25-~25: The operating system from Apple is written “macOS”.
Context: ... to control the execution of your code (MacOs/Windows): - Continue (F5): Resume ex...
(MAC_OS)
[style] ~33-~33: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e function call on the current line. - Step Out (Shift+F11): Step out of the curr...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🪛 markdownlint-cli2 (0.17.2)
readme/debugging.md
9-9: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
15-15: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
19-19: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
23-23: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
🔇 Additional comments (8)
.vscode/launch-win.json (3)
1-9: Review: Debug Server-Side Configuration
The configuration for "Next.js: debug server-side" correctly uses a node-terminal to run "npm run dev". No issues detected.
10-15: Review: Debug Client-Side Configuration
The client-side config using the Chrome debugger and the URL "http://localhost:3000" is clear and concise.
16-30: Review: Debug Full Stack Configuration
The full stack configuration is well structured with runtimeArgs and a serverReadyAction. Please verify that the program path ("${workspaceFolder}/node_modules/next/dist/bin/next") is correct for your Windows environment and consistent with the macOS configuration if intended..vscode/launch-mac.json (4)
1-9: Review: Debug Server-Side (macOS) Configuration
The server-side configuration is clear and mirrors the Windows version with a node-terminal setup.
10-15: Review: Debug Client-Side (Chrome) Configuration
This configuration is straightforward and correctly set for Chrome debugging.
16-28: Review: Debug Client-Side (Firefox) Configuration
The Firefox configuration with reAttach and pathMappings is a useful addition. Ensure that the specified path mapping meets your project’s structure.
29-42: Review: Debug Full Stack (macOS) Configuration
The full stack config uses "${workspaceFolder}/node_modules/.bin/next" as the program. This differs from the Windows config—please confirm that this distinction is intentional for platform specifics.readme/debugging.md (1)
1-7: Review: Introduction Section
The new "Debugging Next.js" section provides clear guidance. Minimal adjustments may improve clarity, but the content is overall effective.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
readme/debugging.md (5)
9-11: Improve punctuation in Step 1 description.
Consider adding commas around the phrase “in the.vscodefolder” to enhance readability.
Refactor suggestion:-At the root of your project in the `.vscode` folder need to set up a launch configuration in VS Code to debug your Next.js application. +At the root of your project, in the `.vscode` folder, you need to set up a launch configuration in VS Code to debug your Next.js application.🧰 Tools
🪛 LanguageTool
[uncategorized] ~11-~11: Possible missing comma found.
Context: ...e root of your project in the.vscodefolder need to set up a launch configuration i...(AI_HYDRA_LEO_MISSING_COMMA)
🪛 markdownlint-cli2 (0.17.2)
9-9: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
13-13: Enhance clarity in renaming instructions.
Adding commas to separate OS-specific file names improves clarity. Also, consider splitting the sentence for readability.
Refactor suggestion:-To do this, you need to rename the file `./vscode/launch-mac.json` or `./vscode/launch-win.json` depending on your OS to `./vscode/launch.json`. These configuration files are created for debugging in `Chrome`, for other browsers, please use the settings described in the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-with-vs-code). +To do this, rename the file `./vscode/launch-mac.json` or `./vscode/launch-win.json`, depending on your OS, to `./vscode/launch.json`. These configuration files are set up for debugging in Chrome. For other browsers, please refer to the [Next.js documentation](https://nextjs.org/docs/app/building-your-application/configuring/debugging#debugging-with-vs-code).🧰 Tools
🪛 LanguageTool
[style] ~13-~13: Consider a more expressive alternative.
Context: ... to debug your Next.js application. To do this, you need to rename the file `./vs...(DO_ACHIEVE)
[uncategorized] ~13-~13: Possible missing comma found.
Context: ...code/launch-win.jsondepending on your OS to./vscode/launch.json`. These config...(AI_HYDRA_LEO_MISSING_COMMA)
9-9: Use proper markdown headings for step titles.
Markdownlint recommends using heading syntax instead of emphasized text for section titles. Replacing lines 9, 15, 19, and 23 with proper header markers (e.g., using “###”) could improve accessibility and compliance with style guidelines.Also applies to: 15-15, 19-19, 23-23
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
9-9: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
25-25: Correct OS name casing.
Replace “macOs” with “macOS” to adhere to the proper naming convention.
Refactor suggestion:-Use the Debug toolbar to control the execution of your code (macOs/Windows): +Use the Debug toolbar to control the execution of your code (macOS/Windows):🧰 Tools
🪛 LanguageTool
[grammar] ~25-~25: The operating system from Apple is written “macOS”.
Context: ... to control the execution of your code (macOs/Windows): - Continue (F5): Resume ex...(MAC_OS)
29-33: Vary wording in repeated step instructions.
To avoid repetition, consider rephrasing similar bullet points. For example, change “Step Into” and “Step Out” to “Enter” and “Exit” respectively:
Refactor suggestion:- Step Into (`F11`): Step into the function call on the current line. - Step Out (`Shift+F11`): Step out of the current function. + Step Into (`F11`): Enter the function call on the current line. + Step Out (`Shift+F11`): Exit the current function.🧰 Tools
🪛 LanguageTool
[style] ~33-~33: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e function call on the current line. - Step Out (Shift+F11): Step out of the curr...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
readme/debugging.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
readme/debugging.md
[uncategorized] ~11-~11: Possible missing comma found.
Context: ...e root of your project in the .vscode folder need to set up a launch configuration i...
(AI_HYDRA_LEO_MISSING_COMMA)
[style] ~13-~13: Consider a more expressive alternative.
Context: ... to debug your Next.js application. To do this, you need to rename the file `./vs...
(DO_ACHIEVE)
[uncategorized] ~13-~13: Possible missing comma found.
Context: ...code/launch-win.jsondepending on your OS to./vscode/launch.json`. These config...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~25-~25: The operating system from Apple is written “macOS”.
Context: ... to control the execution of your code (macOs/Windows): - Continue (F5): Resume ex...
(MAC_OS)
[style] ~33-~33: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e function call on the current line. - Step Out (Shift+F11): Step out of the curr...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🪛 markdownlint-cli2 (0.17.2)
readme/debugging.md
9-9: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
15-15: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
19-19: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
23-23: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: CI
🔇 Additional comments (2)
readme/debugging.md (2)
1-8: Clear introduction and section headers.
The title and introductory paragraphs clearly outline the purpose of the document and provide context for debugging Next.js with VS Code.
34-41: Overall clarity and friendly tone.
The closing instructions and final message ("Happy debugging! 🚀") set a positive tone. No changes required here.
|
Lighthouse Report:
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
.vscode/launch.json (1)
4-9: Consider adding environment variables for server-side debugging.The server-side configuration is correct but could be enhanced.
Add environment variables to support different configurations:
{ "name": "Next.js: debug server-side", "type": "node-terminal", "request": "launch", - "command": "npm run dev" + "command": "npm run dev", + "env": { + "NODE_ENV": "development" + } }
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
.vscode/launch.json(1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build rs.school
- GitHub Check: CI
🔇 Additional comments (3)
.vscode/launch.json (3)
1-3: LGTM! Version and structure are correct.The configuration uses the latest stable version (0.2.0) of the VS Code debug configuration schema.
16-28: LGTM! Firefox configuration is well-structured.The Firefox configuration includes proper webpack path mappings for source maps.
29-43:❓ Verification inconclusive
Verify the serverReadyAction pattern.
The full-stack configuration looks good, but verify the pattern for detecting the local URL.
Run this script to check if the pattern matches Next.js server output:
🏁 Script executed:
#!/bin/bash # Test the pattern against typical Next.js server output echo "- Local: http://localhost:3000" | grep -E "- Local:.+(https?://.+)"Length of output: 188
Action Required: Confirm the serverReadyAction Regex
The full-stack configuration in
.vscode/launch.jsonlooks appropriate. However, the grep test provided for verifying the Next.js local URL pattern is failing because the pattern starts with a hyphen, which causes grep to misinterpret it as an option. To fix this, please update the grep command to use the--option before the pattern:#!/bin/bash echo "- Local: http://localhost:3000" | grep -E -- "- Local:.+(https?://.+)"After updating, please manually verify that the modified command correctly matches the Next.js server output.
|
Lighthouse Report:
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
readme/debugging.md (3)
9-21: Markdown Heading Best Practices.
Instead of using bold text for sub-section titles (lines 9, 13, 17, and 21), consider using proper Markdown heading syntax (e.g.,###) to comply with MD036 and improve document accessibility.🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
9-9: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
13-13: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
17-17: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
21-21: Emphasis used instead of a heading
null(MD036, no-emphasis-as-heading)
23-23: Typographical Correction for OS Names.
Change "macOs" to "macOS" to reflect the correct casing and branding.🧰 Tools
🪛 LanguageTool
[grammar] ~23-~23: The operating system from Apple is written “macOS”.
Context: ... to control the execution of your code (macOs/Windows): - Continue (F5): Resume ex...(MAC_OS)
25-35: Consistency in Debug Toolbar Descriptions.
The bullet points clearly outline the debugging actions. Although the repetitive use of "Step" is standard for debugging instructions, you might consider minor variations if desired. However, the current style is acceptable given the context.🧰 Tools
🪛 LanguageTool
[style] ~31-~31: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e function call on the current line. - Step Out (Shift+F11): Step out of the curr...(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
.vscode/launch.json(1 hunks)readme/debugging.md(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- .vscode/launch.json
🧰 Additional context used
🪛 LanguageTool
readme/debugging.md
[grammar] ~23-~23: The operating system from Apple is written “macOS”.
Context: ... to control the execution of your code (macOs/Windows): - Continue (F5): Resume ex...
(MAC_OS)
[style] ~31-~31: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ...e function call on the current line. - Step Out (Shift+F11): Step out of the curr...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
🪛 markdownlint-cli2 (0.17.2)
readme/debugging.md
9-9: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
13-13: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
17-17: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
21-21: Emphasis used instead of a heading
null
(MD036, no-emphasis-as-heading)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: Build rs.school
- GitHub Check: CI
🔇 Additional comments (3)
readme/debugging.md (3)
1-7: Overall Introduction Looks Clear.
The introductory section provides a concise overview of VS Code debugging for Next.js. Great job laying out the context!
37-38: Useful External References.
The links to the VS Code Debugging Documentation and Next.js Documentation add value. Just ensure these external resources remain current over time.
39-40: Friendly Closing Note.
The closing “Happy debugging! 🚀” message adds a nice, upbeat touch to the guide.
|
Lighthouse Report:
|
|
Lighthouse Report:
|
What type of PR is this? (select all that apply)
Description
Added configs for VS Code for debugging Next.js application. Also added documentation how to use it for debugging.
Related Tickets & Documents
Added/updated tests?
[optional] Are there any post deployment tasks we need to perform?
[optional] What gif best describes this PR or how it makes you feel?
Summary by CodeRabbit
New Features
Documentation
Chores