1. prepare the debugging target
using the information from what's Next Redwood Tutorial section.
First we need an application to be used as a debugee (app being debugged). Rather than creating such application from scratch, which is sufficiently complex to illustrate debugging practices, let's use the well known application, built in the course of the Redwood Tutorial. This application (Redwood Blog) exists in this repository.
Make a local clone and run it, using the commands defined in the section using the example repo of the Redwood Tutorial. Since the line
the line yarn rw g secret is missing there, these commands are repeated here for your convenience.
git clone https://github.com/redwoodjs/redwood-tutorial.git
yarn rw prisma migrate dev
yarn rw prisma db seed
yarn rw g secret
yarn rw dev
resulting with the front end of the Redwood Blog application running in the browser
Image 1 - Redwood Blog app running locally
2. Setup the (Chrome) DevTool debugger
using the article debugging with chrome
Having the Redwood Blog app running in the browser (Image 1, above), invoke the DevTools from the browser menu with clicks 1, 2 and 3, shown on the Image 2
Image 2 - invoking DevTools
Click on the menu item 3, will launch the debugger panel next to the application running in the browser. The result is shown on the Image 3, below
Image 3 - debugee and the debugger running together
The devtools docking (dock on the right in the above image) can be set according to the Image 4 (below)
Image 4 - setting the devtools docking preference
Note: the browser panel with Redwood Blog is placed next to the devtools panel only as a convenience (so you can restart the application for example). Having just a single monitor, you can do everything on the devtools panel alone (closing the browser)
3. Setup Visual Studio Code debugger