Effective Debugging Apps in VS Code

My LT Slide

Event: https://ateam.connpass.com/event/104825/

1. Effective Debugging React Apps in VS Code
2. About me むらじゅん (@murajun1978) Skils: Node.js, React, Ruby, Rails, GraphQL Community: Shinosaka.rb, Rails Follow-up Osaka
3. Shinosaka.rb #32 https://shinosakarb.doorkeeper.jp/events/82341
4. No more Print debug
5. Debugging is one of the important skills for Programmer
6. Next.js debugging in VS Code
7. Build-in node.js debugger
8. Debugging of the Render process
9. "configurations": [ { "type": "chrome", "request": "launch", "name": "Debug Render", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "node", "request": "launch", "name": "Debug Server", "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/next", "runtimeArgs": [ "--inspect", ], "port": 9229, } ], "compounds": [ { "name": "Debug Next.js", "configurations": ["Launch Chrome", "Debug Server"] } ]
11. Debugging of Node process
12. "configurations": [ { "type": "chrome", "request": "launch", "name": "Debug Render", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "node", "request": "launch", "name": "Debug Server", "runtimeExecutable": "node", "runtimeArgs": [ "--inspect", "server.js" ], "port": 9229, } ], "compounds": [ { "name": "Debug Next.js", "configurations": ["Launch Chrome", "Debug Server"] } ]
14. Rails debugging in VS Code
17. Extension: Ruby
18. Gems ruby-debug-ide https://github.com/ruby-debug/ruby-debug-ide debase https://github.com/denofevil/debase
19. Not stopping on breakpoint
20. gem 'ruby-debug-ide', '0.7.0.beta6' gem 'debase', '0.2.3.beta2'
21. VS Code Recipes https://github.com/Microsoft/vscode-recipes
22. No more Print debug
23. Effective debugging with VS Code
24. Thank you