# Debugging :bug:
---
Collaborative session! :i_love_you_hand_sign:
Please prepare laptops! :computer:
---
## Who am I?
- Rihards
- Software Engineer :man_with_gua_pi_mao:
- Apolitical (global learning platform for public servants)
---
## Overview
- Debugging process
- Effective console logging (quick and dirty but sometimes works well) :shit:
- Browser network tabs (good for debugging http(s) requests) :smile:
- VScode debugger :heart:
---
### Debuggin process
- Identify :eyes: -> Isolate 🔒 -> Resolve ✨ -> Prevent 🛑
- Development, Testing, Monitoring, User Reporting
---
- Bugs in development are cheap and can be resolved fast
- Bugs in production are expensive and often takes a lot of time and effort to be resolved
---
- Context -> ui or api bug? affected number of users? page? endpoint? frequency? timeline? -> Root Cause
---
### Add manual breakpoints
```javascript
if (userPaid) {
const { paymentId } = await createPayment(userId);
debugger;
await sendInvoice({ id: userId, payment: paymentId })
}
```
---
### Console types
```javascript
console.log()
console.info()
console.warn()
console.error()
```
All the same. Visibility can be controlled with output level
---
### Console tables (good for large objects)
```javscript
const car1 = {name:"Audi", model:"A4"}
const car2 = {name:"Volvo", model:"XC90"}
const car3 = {name:"Ford", model:"Fusion"}
console.table([car1, car2, car3]);
```
---
### Console count (good for large or nested loops)
```javascript
for (i = 1; i <= 50; i++) {
let fruit = "apples"
let vegetable = "tomato"
console.count(fruit)
console.count(vegetable)
}
```
---
### Browser network tabs
- **Filter** _> XHR
- **Header** _> response status, method, url, query params
- **Response**
- **Parsist Logs**
- **Trottling level**
:warning: To see requests network tab should be open before the request is done!
---
### VScode debugger
- set configurations (hardest thing to do)
- set breakpoints
- run debugger F5
---
### Configurations
- By default VScode has built in NodeJs and Chrome (starting ) debugger
- `Launch` vs `Attach`
- For other things you will need to install extensions
- `args` -> lets debugger know on how to run the application
- .vscode/launch.json
**References:**
- https://code.visualstudio.com/Docs/editor/debugging
- https://code.visualstudio.com/docs/nodejs/debugging-recipes
- https://dev.to/nikolalsvk/7-ways-to-debug-jest-tests-in-terminal-20am
- https://profy.dev/article/debug-react-vscode
---
### Environment variables
- **env** - add single secret
- **envFile** - point to .env file
Don't need to define them for Chrome debugger
---
### Breakpoints and Logpoints
```javascript
debugger;
console.log() -> { variable }
if(a > 1) {
console.log(a) -> expressions
}
console.count() -> hitcounts
```
- If logpoint fail nothings happens and there are no warnings about what has happened :warning:
---
### Exercise
1. Debug javascript file
2. Debug express ednpoint
3. Debug frontend application
---
### Thank you!
{"metaMigratedAt":"2023-06-17T13:28:52.759Z","metaMigratedFrom":"YAML","title":"Debugging","breaks":true,"description":"How to debug UIs, API endpoints and NodeJS","contributors":"[{\"id\":\"289a1388-d0c8-4e90-99e2-9df7cea160aa\",\"add\":5641,\"del\":2418}]"}