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