---
tags: Talks
---

# Debugging OSDC 2021 Structure

08/19/2021

Theme: Pokemon Bug Catcher Theme
Structure: 20 mins
Format: Pre-recorded / not live

5 mins - Importance of debugging
10 mins - Lesson/Demo
5 mins - Recap/Q&A/CTA

## Script 20 mins

**5 mins - Importance of debugging**

Leading with: Big Overal Example
- important to debugging is relevant for all vertical/agnostic

specific example
- My first "debugging" was the cash register
- How this translates to working on banking applications when I was on the Digital Labs team at WF. Case: [Knight Capital](https://www.bugsnag.com/blog/bug-day-460m-loss)
- OutSystems builds many banking tools that manages the money of financial instiutions and their customers

**10 mins - Lesson/Demo**

- Jr Dev: Print or alert yourself to any variables

- Mid/Sr Dev: uses log statements or breakpoints with, they will build testing into the code, hooking into a software dev lifecycle, keep an eye on your logs to see if something is wrong

- 4 steps:
add breakpoints
start debugging
run application
debug code

- Show: Adding breakpoints in the debugger [LINK](https://success.outsystems.com/Documentation/11_x_platform/Developing_an_Application/Troubleshooting_Applications/Debugging_Applications)

- showing the actual debugging in the IDE, but also time it

debugging in server-side/traditional vs React application on the client-side, you a debugging from the client side into the server-side. If I debug a client-side, it's uncommon that out IDE showcasing debugging on the client side in the IDE

React still has server-side code, show that the same debug tool can debug reactiveJS both the server-side and client-side 

pick an application to show that: client-side/server-side method, have the client-side method call the server-side method. I show the debugging on the client side and then go seamlessly into the serverside 


Can also mention if you're building a native mobile app, there is a native mobile debug option for you
[[link]](https://success.outsystems.com/Documentation/11/Developing_an_Application/Troubleshootin[…]&utm_content=ost-helpid-30134&utm_term=ost-contextualhelp)

**5 mins - Recap**

- Wrong Variables, space explosion [LINK](https://www.bugsnag.com/blog/bug-day-ariane-5-disaster)
- what you just learned in OS IDE summary
- Common Qs
In OutSystems, where can we place breakpoints?
In OutSystems, it is possible to inspect the values of variables while debugging?
Can I debug natively in the mobile app?

- CTA: Enjoyed this lesson? More Decoded lessons in your pocket for podcast

---

Additional notes [LINK](https://hackmd.io/hjeZUoOZQkeouMoETI4xyg)

Titles:
Ease and importance of debugging
Fear the fatalities of not debugging
Catching bugs with PKMN Trainer Syd

double-check my title "How to debug before I ragequit"

Agenda
https://www.outsystems.com/nextstep/osdc/agenda-americas/

tell Rui if I want an updated descritpion

### Next Steps
- give Rui a new title and description
- make the slides
- create the demo
- meet with Rui to do dry-run

---

## Step 1 - Add Breakpoints

Breakpoints are placed where code execution will be suspended later on.

To add breakpoints in logic-flows, right click on a break point to add an element, SS then registers the breakpoints and lists them in the debugger panel. Then while debugging the app, whenever the execution goes through the piece of code w/ an active breakpoint, the execution will automatically stop.

Breakpoints can be disabled and removed at any time

## Step 2 - Start Debugger

Now that the breakpoints defined, it’s time to start the debugger

2. Start debugger, which can start in the debugger window of the service studio
New window opens with the application, the interaction happens with the app
While the debugger is running, new breakpoints can be running

## Step 3 - Run the Application

3. When interacting w/the app, the interaction will stop and every action of the breakpoint will be defined in teh code. The debugger stops when the new browser window is closed

## Step 4 - Debug Code

Whenever the execution reaches a breakpoint, it’s suspended
This allows you to execute the code step by step

In this process, it is easy to see what is happening with the code

Since it is possible to analyze the value of variables and understand when the app is not behaving as it’s expected

When teh execution stops w/in the breakpoint, the focus returns back to service studio

## Step 5 - During Debugging

Step Over
Step Into
Step Out

When the execution stops in the Break Point, the focus goes back to SS

So in SS, we can find the regular debugging operations, the options step over, step into, and step out allow the step by step execution of the code to help the dev analyze its behavior

There’s also options to stop the debugger and stop, continue, suspend or abort

Break on All Execptions - to suspend the execution of hte app, whenever an exception is raised