Ruby : add content for debugging ruby using vscode rdbg extension #30267
Conversation
…code rdbg debugger extension
…de using the vscode rdbg extension
XAJX179
changed the title
wise-king-sullyman
requested review from
a team and
KevinMulhern
and removed request for
a team
JoshDevHub
left a comment
JoshDevHub
left a comment
There was a problem hiding this comment.
This is a big change--nearly 200 lines. Not necessarily a "bad" thing, it just makes me think that maybe we should go ahead and pull all stuff related to VSCode debugging into a new lesson. Can call it something like debugging_with_vscode. This was already the plan with #24994 anyway.
How does that sound? @XAJX179
Also going to suggest some other edits, mostly related to just nitpicky English things. I'll probably have more to add later as I need to sit with the lesson and run it through the lesson preview tool, but this will give you some work to do for now.
Co-authored-by: Josh Smith <[email protected]>
Sounds good! moved the content into it's own lesson. One thing left to do is updating image links after PR for images gets merged. Also since this is my first time adding a new lesson, i will have a look at the contributing guide tommorrow. |
JoshDevHub
left a comment
JoshDevHub
left a comment
There was a problem hiding this comment.
Sorry it's taking me a while to look at this. Part of me being slow is wanting to find the time where I can review the full thing, but that's proved difficult.
So instead, I'm going to review pieces of it and move more incrementally. So I've reviewed the first couple of steps here and that'll give you some stuff to work on. I'll try to review another chunk within the next 1-2 weeks.
Let me know if you have any questions.
| 1. Now that everything is installed, configured, let's create a new file which you can call `script.rb`. Next copy and paste the very first example in the [Debugging with pry-byebug](#debugging-with-pry-byebug) Section. Get rid of the `require pry-byebug` line and change `binding.pry` to `debugger`. Save the file. | ||
| 1. Click the `Run and Debug` button, open up the folder your script is located in, set a VSCode breakpoint somewhere within the function, and Run the debugger! This should all look very familiar to you, when you hit the VSCode breakpoint it should look similar to the breakpoints you used in the [JavaScript Developer Tools lesson](https://www.theodinproject.com/lessons/foundations-javascript-developer-tools). But *whoa*, once we hit the `debugger` breakpoint we got an interactive REPL to play around with! The best of both worlds! Play around with this, and feel free to reference [Debugging with VScode documentation](https://code.visualstudio.com/docs/editor/debugging) if you get stuck. | ||
| 1. Although VSCode's debugger is a helpful tool that can make debugging simpler, many companies won't be using it - and will want you to be familiar with debugging using the concepts this lesson focused on: the stack trace, `puts`,`debug`, `pry-byebug`. Let's practice them by completing the debugging exercises from the [ruby-exercises repo](https://github.com/TheOdinProject/ruby-exercises/tree/main/ruby_basics#readme) that you previously cloned. | ||
| 1. Although VSCode's debugger(introduced in next lesson) is a helpful tool that can make debugging simpler, many companies won't be using it - and will want you to be familiar with debugging using the concepts this lesson focused on: the stack trace, `puts`, `pry-byebug`. Let's practice them by completing the debugging exercises from the [ruby-exercises repo](https://github.com/TheOdinProject/ruby-exercises/tree/main/ruby_basics#readme) that you previously cloned. |
There was a problem hiding this comment.
| 1. Although VSCode's debugger(introduced in next lesson) is a helpful tool that can make debugging simpler, many companies won't be using it - and will want you to be familiar with debugging using the concepts this lesson focused on: the stack trace, `puts`, `pry-byebug`. Let's practice them by completing the debugging exercises from the [ruby-exercises repo](https://github.com/TheOdinProject/ruby-exercises/tree/main/ruby_basics#readme) that you previously cloned. | |
| 1. Although VSCode's debugger (introduced in next lesson) is a helpful tool that can make debugging simpler, many companies won't be using it - and will want you to be familiar with debugging using the concepts this lesson focused on: the stack trace, `puts`, `pry-byebug`. Let's practice them by completing the debugging exercises from the [ruby-exercises repo](https://github.com/TheOdinProject/ruby-exercises/tree/main/ruby_basics#readme) that you previously cloned. |
|
|
||
| #### Step 1: Installation | ||
|
|
||
| 1. Go to your [VSCode Extensions](https://code.visualstudio.com/docs/editor/extension-marketplace) and install the [Ruby LSP](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp) extension. This is an LSP (Language Server Protocol) which gives you autocompletion as you type ruby code in your editor along with some other useful features. |
There was a problem hiding this comment.
I would get rid of the list items in this section. We generally don't heavily use them unless it's part of the assignment or the items are very short in length. I just think it reads a bit better too personally. I'm not going to go throw and suggest them all out because I'm lazy 😆
I'll leave that to you, but I'll make other suggestions around punctuation and English stuff.
| 1. Go to your [VSCode Extensions](https://code.visualstudio.com/docs/editor/extension-marketplace) and install the [Ruby LSP](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp) extension. This is an LSP (Language Server Protocol) which gives you autocompletion as you type ruby code in your editor along with some other useful features. | |
| 1. Go to your [VSCode Extensions](https://code.visualstudio.com/docs/editor/extension-marketplace), and install the [Ruby LSP](https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp) extension. This is an LSP (Language Server Protocol) that gives you autocompletion as you type ruby code in your editor along with some other useful features. |
| 1. Before installing `vscode-rdbg` extension let's fulfill its requirements first. | ||
| You need to install the latest `debug` gem and `rdbg` command should be in `$PATH` environment variable. A command in `$PATH` can be called from any directory. |
There was a problem hiding this comment.
| 1. Before installing `vscode-rdbg` extension let's fulfill its requirements first. | |
| You need to install the latest `debug` gem and `rdbg` command should be in `$PATH` environment variable. A command in `$PATH` can be called from any directory. | |
| 1. Before installing the `vscode-rdbg` extension, we need to fulfill a couple of requirements. You need to install the latest `debug` gem, and the `rdbg` command should be in your `$PATH` environment variable. A command that is in `$PATH` can be called from any directory. |
|
|
||
| ```shell | ||
| which rdbg | ||
| # /home/yourusernamehere/.rbenv/shims/rdbg |
There was a problem hiding this comment.
Reminder to myself: check that the rbenv shim path is the same on MacOS. (you don't have to do anything with this yet, and I'll resolve this comment if nothing needs to change).
|
|
||
| ### Debugging with vscode-rdbg | ||
|
|
||
| #### Step 1: Installation |
There was a problem hiding this comment.
| #### Step 1: Installation | |
| #### Installing the VS Code debugger |
We generally don't include ordinality in headings like this, so I'll probably go through and change them a bit.
|
|
||
| 1. Now install the [VSCode rdbg Ruby Debugger](https://marketplace.visualstudio.com/items?itemName=KoichiSasada.vscode-rdbg) extension. | ||
|
|
||
| #### Step 2: Setup |
There was a problem hiding this comment.
| #### Step 2: Setup | |
| #### Configuring VS Code settings for debugging |
| 1. Set version manager. | ||
|
|
||
| 1. Open VScode. | ||
| 1. Press <kbd>Ctrl</kbd> + <kbd>,</kbd> to open settings. | ||
| 1. Search "rdbg ruby version manager". | ||
| 1. Set it to `rbenv` which we made you install in [installing ruby lesson](https://www.theodinproject.com/lessons/ruby-installing-ruby#step-21-install-rbenv). It's your version manager for ruby: [rbenv documentation](https://github.com/rbenv/rbenv). | ||
| 1. Search "ruby lsp version manager" | ||
| 1. Click on the 'Edit in `settings.json`' link | ||
| 1. Edit the identifier, which by default is set to "auto", to "rbenv" | ||
|
|
||
| 1. Confirm settings.json have these two configurations set correctly: | ||
|
|
||
| ```json | ||
| { | ||
| "rdbg.rubyVersionManager": "rbenv", | ||
| "rubyLsp.rubyVersionManager": { | ||
| "identifier": "rbenv" | ||
| }, | ||
| } | ||
| ``` | ||
|
|
There was a problem hiding this comment.
| 1. Set version manager. | |
| 1. Open VScode. | |
| 1. Press <kbd>Ctrl</kbd> + <kbd>,</kbd> to open settings. | |
| 1. Search "rdbg ruby version manager". | |
| 1. Set it to `rbenv` which we made you install in [installing ruby lesson](https://www.theodinproject.com/lessons/ruby-installing-ruby#step-21-install-rbenv). It's your version manager for ruby: [rbenv documentation](https://github.com/rbenv/rbenv). | |
| 1. Search "ruby lsp version manager" | |
| 1. Click on the 'Edit in `settings.json`' link | |
| 1. Edit the identifier, which by default is set to "auto", to "rbenv" | |
| 1. Confirm settings.json have these two configurations set correctly: | |
| ```json | |
| { | |
| "rdbg.rubyVersionManager": "rbenv", | |
| "rubyLsp.rubyVersionManager": { | |
| "identifier": "rbenv" | |
| }, | |
| } | |
| ``` | |
| We need to tell VS Code what version manager we're using so it runs our new tools in the correct way. | |
| 1. Open VSCode. | |
| 1. Press <kbd>Ctrl</kbd> + <kbd>,</kbd> to open settings. | |
| 1. Search "rdbg ruby version manager". | |
| 1. Set it to `rbenv`, which we made you install in the [installing ruby lesson](https://www.theodinproject.com/lessons/ruby-installing-ruby#step-21-install-rbenv). It's your version manager for Ruby: [rbenv documentation](https://github.com/rbenv/rbenv). | |
| 1. Search "ruby lsp version manager". | |
| 1. Click on the 'Edit in `settings.json`' link. | |
| 1. Change the identifier to `"rbenv"`. It should be set to `"auto"` by default. | |
| 1. Confirm settings.json have these two configurations set correctly: | |
| ```json | |
| { | |
| "rdbg.rubyVersionManager": "rbenv", | |
| "rubyLsp.rubyVersionManager": { | |
| "identifier": "rbenv" | |
| }, | |
| } | |
| ``` | |
I'm okay with the nested list items (they're all quite small) but not the top-level one (which only has one item in it). Also includes some miscellaneous nitpicks.
2 participants
Because
gaps in the current debug content.
This PR
adds a custom section heading with content on debugging with vscode-rdbg.
Issue
Closes #30210
Additional Information
Pull Request Requirements
location of change: brief description of changeformat, e.g.Intro to HTML and CSS lesson: Fix link textBecausesection summarizes the reason for this PRThis PRsection has a bullet point list describing the changes in this PRIssuesection