Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Effective Debugging Apps in VS Code

murajun1978
November 15, 2018

Effective Debugging Apps in VS Code

murajun1978

November 15, 2018
Tweet

More Decks by murajun1978

Other Decks in Programming

Transcript

  1. Effective Debugging
    React Apps in VS Code

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. No more Print debug

    View full-size slide

  5. Debugging is one of the important
    skills for Programmer

    View full-size slide

  6. Next.js debugging in VS Code

    View full-size slide

  7. Build-in node.js debugger

    View full-size slide

  8. Debugging of the Render process

    View full-size slide

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

    View full-size slide

  10. Debugging of Node process

    View full-size slide

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

    View full-size slide

  12. Rails debugging in VS Code

    View full-size slide

  13. Extension: Ruby

    View full-size slide

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

    View full-size slide

  15. Not stopping on breakpoint

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. No more Print debug

    View full-size slide

  19. Effective debugging with VS Code

    View full-size slide