alexkrolick / debug-me-vscode

Playground for practicing debugging with Visual Studio Code

debug-me-vscode

A playground for practicing debugging with Visual Studio Code.

Install

cd backend && yarn install
cd ..
cd frontend && yarn install

Run

With VSCode: Open the Tasks menu and run "Frontend dev server" and "Backend dev server" from the menu.

Command line: yarn dev in both directories

Debug

There are two branches that contain bugs: frontend-bug and backend-bug. Check one out and open VSCode.

Open the VSCode Debug (🐞) panel and press ▶️ for Frontend or Backend. Add breakpoints throughout the app by clicking in the gutter.

We're expecting to see this:

But sometimes we end up with something like this:

Or this:

               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               🐞🐞🐞🐞🐞🐞🐞🐞🐞
               👢👢👢👢⚙️👢👢👢👢
               👢👢👢⚙️⚙️⚙️👢👢👢
               👢👢👢👢⚙️👢👢👢👢
🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞🐞

              Can you fix it? 
    Put on your debugging hat and find out!