Introduction of new features for VS Code debugging

Ruby Kaigi 2023

Transcript

1. Introduction of new features for VS Code debugging Naoto ONO
2. Naoto ONO • Developer Productivity Group at CyberAgent, Inc • ruby/debug (debug.gem), ruby/vscode-rdbg contributor • Chrome Integration • E2E Test Frameworks • GitHub: @ono-max
3. Question: have you ever read code with a debugger?
4. Code reading with a debugger is great!
5. Code reading with a debugger is great! However, ...
6. Reading complex code is still hard, isn’t it?
7. Demo: Read complex code with debug.gem.
9. Read code inside of Active Record object
11. 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 😖
12. What should we do? 

13. What should we do? => Let’s trace the program with Trace Inspector!!
14. Agenda • Main topic: Trace Inspector • Subtopic: VS Code Debug Visualizer
15. Trace Inspector
16. Demo: Trace the program with Trace Inspector
18. Trace “bar” method
20. (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 😖
 
 

21. (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!!
22. 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 🤗
23. 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.
24. We want to record local variables and backtraces, don’t we?
25. 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.
26. Demo: Trace local variables and backtraces with Trace Inspector
28. Trace “bar” method
30. 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 •
31. 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 ✅ ✅ ✅ ✅ ✅
32. 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
33. 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
34. 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!!
35. The way of displaying trace logs rdbg(CLI) Trace Inspector
36. The way of displaying trace logs rdbg(CLI) Trace Inspector You can see only what you want to see by clicking! A trace log
37. The way of displaying trace logs rdbg(CLI) Trace Inspector You can see only what you want to see by clicking!
38. Trace logs can be viewed on the editor The line is highlighted!
39. Trace logs can be viewed on the editor Parameters are displayed on the editor!
40. 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!
41. How does Trace Inspector work?
42. How does Trace Inspector work? VS Code debug.gem VS Code extension
43. How does Trace Inspector work? VS Code debug.gem VS Code extension
44. Debug Adapter Protocol (DAP) VS Code extension debug.gem JSON
45. Debug Adapter Protocol (DAP) VS Code extension debug.gem
46. Debug Adapter Protocol (DAP) VS Code extension debug.gem
47. Debug Adapter Protocol (DAP) VS Code extension debug.gem Click “Enable Trace”
48. Debug Adapter Protocol (DAP) VS Code extension debug.gem Click “Enable Trace” Enable Trace
49. Debug Adapter Protocol (DAP) VS Code extension debug.gem Click “Enable Trace” Enable Trace Success
50. Debug Adapter Protocol (DAP) VS Code extension debug.gem Change “Enable Trace” to “Disable Trace” Enable Trace Success
51. Conclusion of Trace Inspector • Trace Inspector is available in debug.gem version 1.8. • Trace Inspector helps you to read complex code.
52. VS Code Debug Visualizer
53. Demo: Visualize objects in VS Code Debug Visualizer
55. Visualize variable “foo"
57. VS Code Debug Visualizer • A VS Code extension that visualizes objects while debugging. • This extension is created by Henning Dieterichs (@hediet).
58. Supported Languages (Excerpt) • JavaScript • Python • Go • C++ • Java •
59. • JavaScript • Python • Go • C++ • Java • Ruby <- New!! Supported Languages (Excerpt)
60. How Ruby objects are visualized?
61. How Ruby object are visualized? VS Code Debug Visualizer debug.gem debugvisualizer.gem
62. How Ruby object are visualized? VS Code Debug Visualizer debug.gem debugvisualizer.gem What I developed this time!
63. How Ruby object are visualized? VS Code Debug Visualizer
64. How Ruby object are visualized? VS Code Debug Visualizer Enter “foo”
65. How Ruby object are visualized? VS Code Debug Visualizer debug.gem Evaluate “foo” Enter “foo”
66. How Ruby object are visualized? VS Code Debug Visualizer debug.gem Evaluate “foo” debugvisualizer.gem Result
67. How Ruby object are visualized? VS Code Debug Visualizer debug.gem debugvisualizer.gem Result VS Code Debug Visualizer Protocol Evaluate “foo”
68. How Ruby object are visualized? VS Code Debug Visualizer debug.gem debugvisualizer.gem Result Evaluate “foo” VS Code Debug Visualizer Protocol
69. 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.
70. Conclusion
71. New features for VS Code debugging • Trace Inspector • Please update your version of debug.gem to the latest version! • VS Code Debug Visualizer
72. 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
73. 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)
74. Thank you for your time!