Effective Debugging React Apps in VS Code 

About me むらじゅん (@murajun1978) Skils: Node.js, React, Ruby, Rails, GraphQL Community: Shinosaka.rb, Rails Follow-up Osaka 

Shinosaka.rb #32 https://shinosakarb.doorkeeper.jp/events/82341 

No more Print debug 

Debugging is one of the important skills for Programmer 

Next.js debugging in VS Code 

Build-in node.js debugger 

Debugging of the Render process 

"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"] } ] 

No content

Debugging of Node process 

"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"] } ] 

No content

Rails debugging in VS Code 

No content

No content

Extension: Ruby 

Gems ruby-debug-ide https://github.com/ruby-debug/ruby-debug-ide debase https://github.com/denofevil/debase 

Not stopping on breakpoint 

gem 'ruby-debug-ide', '0.7.0.beta6' gem 'debase', '0.2.3.beta2' 

VS Code Recipes https://github.com/Microsoft/vscode-recipes 

No more Print debug 

Effective debugging with VS Code 

Thank you