1.Chrome DevTools problem
- I set up an ignore list (/node_modules/) so it doesn’t step into libraries.
- But when I add a breakpoint inside a useEffect in my component and step through the code, DevTools jumps into other components in my app that are re-rendered.
- What I want is to debug only one file (e.g. Sidebar.tsx) without stepping into other files from my own app code.
- Is there a way in Chrome DevTools to restrict stepping only to a single file?
2.VS Code problem
- I copied a launch.json config from Next.js docs and tried adding "skipFiles".
- I use dedug client-side chrome
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"skipFiles": [
"<node_internals>/**",
"${workspaceFolder}/node_modules/**"
]
},
{
"name": "Next.js: debug client-side",
"type": "chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug client-side (Firefox)",
"type": "firefox",
"request": "launch",
"url": "http://localhost:3000",
"reAttach": true,
"pathMappings": [
{
"url": "webpack://_N_E",
"path": "${workspaceFolder}"
}
]
},
{
"name": "Next.js: debug full stack",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/node_modules/next/dist/bin/next",
"runtimeArgs": ["--inspect"],
"skipFiles": [
"<node_internals>/**"
],
"serverReadyAction": {
"action": "debugWithEdge",
"killOnServerStop": true,
"pattern": "- Local:.+(https?://.+)",
"uriFormat": "%s",
"webRoot": "${workspaceFolder}"
}
}
]
}
- But VS Code still steps into node_modules when I debug.
- I also want to prevent stepping into other components in my project, and only debug a single file (similar to what I tried with DevTools).
What I tried:
In Chrome DevTools I added /node_modules/ to the ignore list. I also tried ignoring parts of my own src/ folder.
In VS Code I copied the launch.json config from the Next.js documentation and added "skipFiles": ["<node_internals>/", "${workspaceFolder}/node_modules/"].
I also tried adding breakpoints only in the file I want to debug.
What I expected:
When stepping through code inside my component (e.g. in a useEffect), I expected the debugger to stay only in that file.
In VS Code I expected skipFiles to fully ignore everything from node_modules.
What actually happened:
In Chrome DevTools it still steps into other React components in my project whenever they re-render, even though I just want to debug one file.
In VS Code it still sometimes steps into code inside node_modules, even though I added it to skipFiles.