Introduction of Tools for providing rich user experience in debugger

Transcript

1. Introduction of Tools for providing rich user experience in debugger Ruby Kaigi 2022 Naoto ONO
2. Naoto ONO • Developer Productivity Group at CyberAgent, Inc. • ruby/debug (debug.gem) contributor ◦ Chrome Integration ◦ Test framework • GitHub: @ono-max
3. debug.gem • Ruby standard library for debugger from 3.1 • High performance compared to existing debuggers. • You can debug Ruby program with the following tools: ◦ rdbg (CLI) ◦ VS Code ◦ Chrome DevTools ◦ Neovim ◦ …
4. Let’s know what part of this talk you should focus • This talk consists of two sessions • From now, you’ll answer some yes/no questions, then you’ll know which part to concentrate on the session 1, or session 2
5. ??? Do you use debug.gem? YES NO
6. ??? ??? ??? Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO
7. Session 2 Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO Session 1 Session 1
8. Session 2 Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO Session 1 Session 1 I’ll talk debugging Ruby program in Chrome DevTools for these people! I’ll talk debugging Ruby program in Chrome DevTools for these people!
9. Session 2 Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO Session 1 Session 1 I’ll talk tools for supporting VS Code debugging!
10. Agenda • Session 1: About Chrome DevTools debugging ◦ This session includes basic functions in a debugger, too. • Session 2: About tools for supporting debugging in VS Code ◦ This session is about tools related to debugging, not about the debugger itself.
11. Agenda • Session 1: About Chrome DevTools debugging ◦ This session includes basic functions in a debugger, too. • Session 2: About tools for supporting debugging in VS Code ◦ This session is about tools related to debugging, not about the debugger itself. Goal: Everyone wants to use tools in this talk! I’m very glad if I can get your feedbacks, too 😁
12. About Chrome DevTools debugging
13. What is Chrome DevTools? Pause the program at line 4! Set the breakpoint at line 4 View and Change the DOM Debug JavaScript View HTTP request and response
14. What is Chrome DevTools? Pause the program at line 4! Set the breakpoint at line 4 View and Change the DOM Debug JavaScript View HTTP request and response
15. Do you know how to debug JavaScript in Chrome DevTools? Pause the program at line 4!
16. Do you know how to debug JavaScript in Chrome DevTools?
17. Do you know how to debug JavaScript in Chrome DevTools?
18. Do you know how to debug JavaScript in Chrome DevTools?
19. You can debug Ruby program here!! Do you know how to debug JavaScript in Chrome DevTools?
20. The motivation of supporting Chrome DevTools
21. I’d like to debug Ruby program in rich UI such as VS Code, but…
22. I’d like to debug Ruby program in rich UI such as VS Code, but… • I’m non-user of VS Code
23. I’d like to debug Ruby program in rich UI such as VS Code, but… • I’m non-user of VS Code • it’s hard to install VS Code for any reason
24. We installed Google Chrome on your laptop, don’t we?
25. We installed Google Chrome on your laptop, don’t we? • By supporting Chrome DevTools debugging, we can provide rich user experience to non-users of VS Code!
26. We installed Google Chrome on your laptop, don’t we? • By supporting Chrome DevTools debugging, we can provide rich user experience to non-users of VS Code! • Project Goal: Implement functions in Chrome DevTools are comparable to those in VS Code
27. Demonstration: Using a debugger in Chrome DevTools
28. class SampleClass def initialize arg1, arg2 @arg1 = arg1 @arg2 = arg2 end end def sample_method a = 1 b = 2 c = 3 a + b + c end s = SampleClass.new 1, 2 sample_method() sample_method() sample_method() sample_method() sample_method() Sample Script to debug in the demonstration
30. How do Chrome DevTools communicate with debug.gem?
31. Chrome DevTools Protocol (CDP) Client: Chrome DevTools Server: debug.gem
32. Chrome DevTools Protocol (CDP) Click “Step Into” Client: Chrome DevTools Server: debug.gem
33. Chrome DevTools Protocol (CDP) Click “Step Into” Client: Chrome DevTools Server: debug.gem Step Into
34. Chrome DevTools Protocol (CDP) Click “Step Into” Client: Chrome DevTools Server: debug.gem Step Into ACK
35. Chrome DevTools Protocol (CDP) Client: Chrome DevTools Server: debug.gem Click “Step Into” Step Into Paused at line 5 ACK
36. What we can’t do in Chrome DevTools debugging • Code completion in Chrome Console • Supporting thread interface • Coloring code
37. Summary for session 1 • You can debug Ruby program in Chrome’s rich UI easily. ◦ You don’t have to install any tools except for Chrome. • Chrome DevTools Protocol (CDP) is used between debug.gem and Chrome DevTools.
38. The topic about Chrome DevTools is finished!
39. Session 2 Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO Session 1 Session 1 Thank you for waiting VS Code users!
40. About tools for supporting debugging in VSCode
41. rdbg-inspector • Tools for supporting debugging in VS Code • rdbg-inspector is WIP project which means it’s not released yet
42. Features for rdbg-inspector • ??? • ???
43. Features for rdbg-inspector • ??? • ???
44. I know it’s quite sudden, but…
45. We want to go back to some points when debugging it, don’t we?
46. • What was the value of variable “a” when program was paused at line 6…? We want to go back to some points when debugging it, don’t we?
47. • What was the value of variable “a” when program was paused at line 6…? • I’d like to see the procedure here again… We want to go back to some points when debugging it, don’t we?
48. Demonstration: Going back to some points in debugger
49. class SampleClass def initialize arg1, arg2 @arg1 = arg1 @arg2 = arg2 end end def sample_method a = 1 b = 2 c = 3 a + b + c end s = SampleClass.new 1, 2 sample_method() sample_method() sample_method() sample_method() sample_method() Sample Script to debug in the demonstration
51. • You can go back and forth between the program by clicking recorded execution logs • History Inspector is realized by Step Into and Step Back feature in debug.gem. History Inspector
52. Features for rdbg-inspector • History Inspector • ???
53. Features for rdbg-inspector • History Inspector • ???
54. Debugging rails app in VS Code
55. Debugging rails app in VS Code
56. Debugging rails app in VS Code
57. Using Debug Console in VS Code
58. Using Debug Console in VS Code
59. Evaluation of Active Record object Computer class is Active Record.
60. Evaluation of Active Record object
61. Tree View of Active Record object
62. Tree View of Active Record object This is useful, but…
63. It’s useful if we can see Active Record object as a table, isn’t it?
64. Tree View of Array object
65. Tree View of Array object This is also…
66. It’s useful if we can see Active Record object as a chart, isn’t it?
67. Demonstration: Visualization of objects
68. class ComputersController < ApplicationController before_action :set_computer, only: %i[ show edit update destroy ] # GET /computers or /computers.json def index binding.break @computers = Computer.limit(100) end # GET /computers/1 or /computers/1.json def show end ... Sample rails app to debug in the demonstration
69. Demonstration Video
70. Object Inspector • Object Inspector converts objects to visualized something • Users can define how objects are visualized
71. Summary for session 2 • Features of rdbg inspector are as follows: ◦ History Inspector ◦ Object Inspector • I’m looking forward to getting feedback from everyone!
72. Conclusion…
73. We want to use these tools, don’t we? • Debugging in Chrome DevTools • Tools for supporting debugging in VS Code
74. Next… • Create the issue and write a blog to give us feedback! • If you want to learn how these tools work, ◦ https://chromedevtools.github.io/devtools-protocol/ ◦ https://microsoft.github.io/debug-adapter-protocol/ ◦ https://github.com/ruby/debug
75. • Koichi Sasada (@ko1) ◦ He gave me the idea of Chrome Integration and rdbg inspector ◦ If it had not been for his help, I wouldn’t have been here! • Thank you for helping me to implement Chrome Integration ◦ Andrea Cardaci (@cyrus-and) ▪ Author of chrome remote-interface ◦ Geoffrey Litt (@geoffreylitt) ▪ Author of ladybug • Thanks to the following organization, I can continue developing debugging tools ◦ Ruby Association ◦ Google Summer of Code Acknowledgement
76. • Thank you for reviewing my presentation ◦ Yusuke Endo (@mame) ◦ Yuta Saito (@kateinoigakukun) ◦ Daichi Furiya (@wasabeef) ◦ Yoshiki Fujikane (@fujiwo) ◦ Yuki Shigemasa (@gegeson) Acknowledgement2