Tweet
Tweet

Slide 1

Slide 1 text

Introduction of Tools for providing rich user experience in debugger Ruby Kaigi 2022 Naoto ONO

Slide 2

Slide 2 text

Naoto ONO ● Developer Productivity Group at CyberAgent, Inc. ● ruby/debug (debug.gem) contributor ○ Chrome Integration ○ Test framework ● GitHub: @ono-max

Slide 3

Slide 3 text

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 ○ …

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

??? Do you use debug.gem? YES NO

Slide 6

Slide 6 text

??? ??? ??? Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO

Slide 7

Slide 7 text

Session 2 Do you use debug.gem? Do you use VS Code when debugging a program? YES NO YES NO Session 1 Session 1

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

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!

Slide 10

Slide 10 text

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.

Slide 11

Slide 11 text

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 😁

Slide 12

Slide 12 text

About Chrome DevTools debugging

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Do you know how to debug JavaScript in Chrome DevTools? Pause the program at line 4!

Slide 16

Slide 16 text

Do you know how to debug JavaScript in Chrome DevTools?

Slide 17

Slide 17 text

Do you know how to debug JavaScript in Chrome DevTools?

Slide 18

Slide 18 text

Do you know how to debug JavaScript in Chrome DevTools?

Slide 19

Slide 19 text

You can debug Ruby program here!! Do you know how to debug JavaScript in Chrome DevTools?

Slide 20

Slide 20 text

The motivation of supporting Chrome DevTools

Slide 21

Slide 21 text

I’d like to debug Ruby program in rich UI such as VS Code, but…

Slide 22

Slide 22 text

I’d like to debug Ruby program in rich UI such as VS Code, but… ● I’m non-user of VS Code

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

We installed Google Chrome on your laptop, don’t we?

Slide 25

Slide 25 text

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!

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Demonstration: Using a debugger in Chrome DevTools

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

How do Chrome DevTools communicate with debug.gem?

Slide 31

Slide 31 text

Chrome DevTools Protocol (CDP) Client: Chrome DevTools Server: debug.gem

Slide 32

Slide 32 text

Chrome DevTools Protocol (CDP) Click “Step Into” Client: Chrome DevTools Server: debug.gem

Slide 33

Slide 33 text

Chrome DevTools Protocol (CDP) Click “Step Into” Client: Chrome DevTools Server: debug.gem Step Into

Slide 34

Slide 34 text

Chrome DevTools Protocol (CDP) Click “Step Into” Client: Chrome DevTools Server: debug.gem Step Into ACK

Slide 35

Slide 35 text

Chrome DevTools Protocol (CDP) Client: Chrome DevTools Server: debug.gem Click “Step Into” Step Into Paused at line 5 ACK

Slide 36

Slide 36 text

What we can’t do in Chrome DevTools debugging ● Code completion in Chrome Console ● Supporting thread interface ● Coloring code

Slide 37

Slide 37 text

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.

Slide 38

Slide 38 text

The topic about Chrome DevTools is finished!

Slide 39

Slide 39 text

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!

Slide 40

Slide 40 text

About tools for supporting debugging in VSCode

Slide 41

Slide 41 text

rdbg-inspector ● Tools for supporting debugging in VS Code ● rdbg-inspector is WIP project which means it’s not released yet

Slide 42

Slide 42 text

Features for rdbg-inspector ● ??? ● ???

Slide 43

Slide 43 text

Features for rdbg-inspector ● ??? ● ???

Slide 44

Slide 44 text

I know it’s quite sudden, but…

Slide 45

Slide 45 text

We want to go back to some points when debugging it, don’t we?

Slide 46

Slide 46 text

● 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?

Slide 47

Slide 47 text

● 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?

Slide 48

Slide 48 text

Demonstration: Going back to some points in debugger

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

● 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

Slide 52

Slide 52 text

Features for rdbg-inspector ● History Inspector ● ???

Slide 53

Slide 53 text

Features for rdbg-inspector ● History Inspector ● ???

Slide 54

Slide 54 text

Debugging rails app in VS Code

Slide 55

Slide 55 text

Debugging rails app in VS Code

Slide 56

Slide 56 text

Debugging rails app in VS Code

Slide 57

Slide 57 text

Using Debug Console in VS Code

Slide 58

Slide 58 text

Using Debug Console in VS Code

Slide 59

Slide 59 text

Evaluation of Active Record object Computer class is Active Record.

Slide 60

Slide 60 text

Evaluation of Active Record object

Slide 61

Slide 61 text

Tree View of Active Record object

Slide 62

Slide 62 text

Tree View of Active Record object This is useful, but…

Slide 63

Slide 63 text

It’s useful if we can see Active Record object as a table, isn’t it?

Slide 64

Slide 64 text

Tree View of Array object

Slide 65

Slide 65 text

Tree View of Array object This is also…

Slide 66

Slide 66 text

It’s useful if we can see Active Record object as a chart, isn’t it?

Slide 67

Slide 67 text

Demonstration: Visualization of objects

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Demonstration Video

Slide 70

Slide 70 text

Object Inspector ● Object Inspector converts objects to visualized something ● Users can define how objects are visualized

Slide 71

Slide 71 text

Summary for session 2 ● Features of rdbg inspector are as follows: ○ History Inspector ○ Object Inspector ● I’m looking forward to getting feedback from everyone!

Slide 72

Slide 72 text

Conclusion…

Slide 73

Slide 73 text

We want to use these tools, don’t we? ● Debugging in Chrome DevTools ● Tools for supporting debugging in VS Code

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

● 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

Slide 76

Slide 76 text

● Thank you for reviewing my presentation ○ Yusuke Endo (@mame) ○ Yuta Saito (@kateinoigakukun) ○ Daichi Furiya (@wasabeef) ○ Yoshiki Fujikane (@fujiwo) ○ Yuki Shigemasa (@gegeson) Acknowledgement2