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

Introduction of new features for VS Code debugging

Naoto Ono
May 12, 2023
1.9k

Introduction of new features for VS Code debugging

Ruby Kaigi 2023

Naoto Ono

May 12, 2023
Tweet

Transcript

  1. Naoto ONO • Developer Productivity Group at CyberAgent, Inc •

    ruby/debug (debug.gem), ruby/vscode-rdbg contributor • Chrome Integration • E2E Test Frameworks • GitHub: @ono-max
  2. Dif fi culty of Reading complex code • We sometimes

    forget which method was called when we stopped before 😭 • We sometimes forget to take note of the return value of the methods 😖
  3. (Repeat) Dif fi culties in reading complex codes. • We

    sometimes forget which method was called when we stopped before 😭 • We sometimes forget to take note of the return value of the methods 😖
 
 

  4. (Repeat) Dif fi culties in reading complex code. • We

    sometimes forget which method was called when we stopped before 😭 • We sometimes forget to take note of the return value of the methods 😖
 
 
 => We can solve the above problems in Trace Inspector!!
  5. Trace Inspector • We can check which method was called

    anytime 😁 • We can copy parameters and return value by clicking the target log 😃 • All organized tracing logs help you to understand the procedure 🤗
  6. Summary of Demo • How to start Trace Inspector
 1.

    Click “Enable Trace”
 2. Execute the program • If you click a log, the target fi le is opened, and the line is highlighted. • Parameters and return values are displayed in the editor.
  7. Record And Replay • We can record local variables and

    backtraces by enabling “Record And Replay” mode. • “Record And Replay” mode is disabled in the default since it’s slow.
  8. Summary of Demo • How to record local variables and

    backtraces
 1. Click “•••” (more icon), then put a checkmark of “Record And Replay (Slow)”
 2. Click “Enable Trace”
 3. Execute the program •
  9. Options for tracing Location Method name & Params Return Value

    Backtrace Local variables Trace Line (Default) ✅ N/A N/A Trace Call/Return 
 (Default) ✅ ✅ ✅ Record And Replay ✅ ✅ ✅ ✅ ✅
  10. Performance Comparison for each option Execution Time (sec) Without tracing

    (Normal mode) 0.007 Trace Line 0.063 Trace Call/Return 0.437 Record And Replay 10.640 x 9.0 x 62.4 x 1520.0 ruby 3.2.1 (2023-02-08 revision 31819e82c8) [arm64-darwin21] MacBook Pro (16-inch, 2021) Chip: Apple M1 Max Memory 32 GB
  11. Comparison with existing tracing tools Overview Frontend Trace Inspector A

    tool that improves the UI of rdbg (CLI) VS Code rdbg (CLI) A tool that traces debugging programs Terminal ruby/tracer A tool that traces executing programs Terminal
  12. Comparison with existing tracing tools Overview Frontend Trace Inspector A

    tool that improves the UI of rdbg (CLI) VS Code rdbg (CLI) A tool that traces debugging programs Terminal ruby/tracer A tool that traces executing programs Terminal Trace Inspector can provide rich user experiences by making use of VS Code!!
  13. The way of displaying trace logs rdbg(CLI) Trace Inspector You

    can see only what you want to see by clicking! A trace log
  14. The way of displaying trace logs rdbg(CLI) Trace Inspector You

    can see only what you want to see by clicking!
  15. The history to develop Trace Inspector Start developing the tracing

    tool that improves the UI of rdbg (CLI). History Inspector is introduced in RubyKaigi 2022. Trace Inspector which improves History Inspector, is introduced now!
  16. Debug Adapter Protocol (DAP) VS Code extension debug.gem Change “Enable

    Trace” to “Disable Trace” Enable Trace Success
  17. Conclusion of Trace Inspector • Trace Inspector is available in

    debug.gem version 1.8. • Trace Inspector helps you to read complex code.
  18. VS Code Debug Visualizer • A VS Code extension that

    visualizes objects while debugging. • This extension is created by Henning Dieterichs (@hediet).
  19. • JavaScript • Python • Go • C++ • Java

    • Ruby <- New!! Supported Languages (Excerpt)
  20. How Ruby object are visualized? VS Code Debug Visualizer debug.gem

    debugvisualizer.gem What I developed this time!
  21. How Ruby object are visualized? VS Code Debug Visualizer debug.gem

    Evaluate “foo” debugvisualizer.gem Result
  22. How Ruby object are visualized? VS Code Debug Visualizer debug.gem

    debugvisualizer.gem Result VS Code Debug Visualizer Protocol Evaluate “foo”
  23. How Ruby object are visualized? VS Code Debug Visualizer debug.gem

    debugvisualizer.gem Result Evaluate “foo” VS Code Debug Visualizer Protocol
  24. Inside story of using VS Code Debug Visualizer • Although

    we planned to create the front end by ourselves at fi rst, we had the following problems: • Maintenance cost • Risk of using third-party libraries • We decided to use VS Code Debug Visualizer to solve the above issues.
  25. New features for VS Code debugging • Trace Inspector •

    Please update your version of debug.gem to the latest version! • VS Code Debug Visualizer
  26. Helpful references to review my talk • Trace Inspector •

    https://github.com/ruby/debug/pull/959 • VS Code Debug Visualizer • https://github.com/hediet/vscode-debug-visualizer • https://github.com/ono-max/debugvisualizer • (Japanese) https://zenn.dev/ono_max/articles/cb5cf14caef2d8
  27. Acknowledgement • Koichi Sasada san (@ko1) • He helped me

    to design Trace Inspector. • If it had not been for his help, I wouldn’t have been here! • Thank you for giving me much feedback about Trace Inspector! • Yusuke Endoh san (@mame) • Mari Imaizumi san (@ima1zumi) • Yuki Torii san (@yotii23)