Skip to main content

Setup

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
cd redwoodblog
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
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
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
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
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


TBD ...