Skip to content

Commit 500df6f

Browse files
geekysrmgeekysrm
authored
Add debugging notes
1 parent 72a2f75 commit 500df6f

File tree

1 file changed

+176
-0
lines changed

1 file changed

+176
-0
lines changed

‎15-debugging.md

+176
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
2+
## Debugging
3+
4+
There are 2 aspects to debugging:
5+
6+
1. Debugging Tools
7+
2. Mindset to tackle errors/bugs etc.
8+
9+
Here we will learn about **Debugging Tools**
10+
11+
1. **Console Methods:**
12+
13+
- Most basic form of debugging
14+
- e.g.
15+
- `console.log` - normal logging,
16+
17+
- `console.info` - similar to `console.log`,
18+
19+
- `console.error` - used for throwing/ handling errors (changes look of logs in console + gives a stacktrace),
20+
21+
- `console.warn` - similar to `console.error` but used for warnings(only UI difference than previous)
22+
23+
- `console.table` - useful to use when we have data in array of objects where the objects have same keys, it formats it in a nice table
24+
25+
```javascript
26+
// For this data, you get below output in console:
27+
28+
const people = [
29+
{ name: "Wes", cool: true, country: "Canada" },
30+
{ name: "Scott", cool: true, country: "Merica" },
31+
{ name: "Snickers", cool: false, country: "Dog Country" }
32+
];
33+
34+
people.forEach((person, index) => {
35+
console.table(person.name);
36+
});
37+
38+
```
39+
40+
41+
![hello](https://res.cloudinary.com/geekysrm/image/upload/v1578689087/console.table.png)
42+
43+
- `console.count` - counts how many times, say, a function is run
44+
45+
```
46+
function doctorize(name) {
47+
console.count(`Running doctorize for ${name}`);
48+
return `Dr. ${name}`;
49+
}
50+
51+
// console :
52+
> doctorize('wes')
53+
Running doctorize for wes: 1
54+
< Dr. wes
55+
> doctorize('wes')
56+
Running doctorize for wes: 2
57+
< Dr. wes
58+
> doctorize('snickers')
59+
Running doctorize for snickers: 1
60+
< Dr. wes
61+
> doctorize('wes')
62+
Running doctorize for wes: 3
63+
< Dr. wes
64+
65+
```
66+
67+
useful when we want to check why a function is running more times like hover element method triggering too many times.
68+
69+
The counting is based on what string we pass to `console.count`.
70+
71+
- `console.group`- Group logs in a collapsible group
72+
73+
```javascript
74+
function doALotOfStuff() {
75+
console.group('Doing some stuff');
76+
console.log('Hey Im one');
77+
console.warn('watch out!');
78+
console.error('hey');
79+
console.groupEnd('Doing some stuff');
80+
}
81+
82+
doALotOfStuff();
83+
84+
```
85+
86+
![https://res.cloudinary.com/geekysrm/image/upload/v1578691374/console.group.png](https://res.cloudinary.com/geekysrm/image/upload/v1578691374/console.group.png)
87+
88+
When we use `console.groupCollapsed('Doing some stuff');` instead of `console.group('Doing some stuff');`, then we get the collapsed look by default.
89+
90+
91+
2. **Call Stack or Stack Trace:** Tells us what function called what function called what function and so on..
92+
93+
Example:
94+
95+
```javascript
96+
function doctorize(name) {
97+
// console.count(`running Doctorize for ${name}`);
98+
return `Dr. ${name}`;
99+
}
100+
101+
function greet(name) {
102+
doesntExist(); // Cause an error
103+
return `Hello ${name}`;
104+
}
105+
106+
function go() {
107+
const name = doctorize(greet('Wes'));
108+
console.log(name);
109+
}
110+
111+
```
112+
113+
In this above example, `doesntExist` function doesn't exist, which will cause an error, when we run the `go` function:
114+
115+
`go()`
116+
117+
Error:
118+
119+
```javascript
120+
debugging.js:32 Uncaught ReferenceError: doesntExist is not defined
121+
at greet (debugging.js:32)
122+
at go (debugging.js:37)
123+
at <anonymous>:1:1
124+
125+
```
126+
127+
The error says that this error occurred at line 32 in function `greet`. `greet` was called by `go` at line 37. The `anonymous 1:1` comes as we ran it from our console, else it would have shown the line no. from where we would have called the `go` function in code.
128+
129+
3. **Grabbing Elements**
130+
131+
If we select something using the _Elements_ tab in dev tools, and then flip over to _Console_ tab, then we run `$0`, then we get returned that selected item.
132+
133+
`$0`: the selected element
134+
135+
`$1` : the last selected element
136+
137+
`$2` : the second last selected element
138+
139+
and so on...
140+
141+
We also have `$` and `$$` in the console. We can't use them in code.
142+
143+
They are shorthand selectors.
144+
145+
- They help us to select things based on selectors
146+
147+
e.g. `$('p')` = `document.querySelector('p')` : selects first element that matches
148+
149+
`$$('p')` = `document.querySelectorAll('p')` : selects all elements that match
150+
151+
152+
4. **Breakpoints:**
153+
154+
To pause JavaScript from running at a certain line of code, we write `debugger;`. The pausing of JavaScript only works when the DevTools is open. It helps us to peer into JavaScript at that very moment.
155+
156+
It shows us the call stack, values of local variables at that time and other useful stuff.
157+
158+
There are 2 buttons:
159+
160+
play/pause: clicking this runs JS till the next time `debugger;` is encountered in code.
161+
162+
step over next function call: runs the code line by line.
163+
164+
We can also set breakpoints from the browser by ourselves in the sources tab. This does the same thing as a `debugger;` i.e. stops the JS from running at that point.
165+
166+
5. **Network Requests:**
167+
168+
To see the network requests, go to the _Network_ tab in Devtools.
169+
170+
6. **Break on Attribute:**
171+
172+
We can select an element in _Elements_ tab and right click on it to select **_break on > attribute modifications._** It means, when somebody changes its attributes, then there will be a breakpoint.
173+
174+
7. **Other types of breakpoints:**
175+
176+
In _Sources_ tab, there are other type of breakpoints too like mouse click, keyboard events, XHR or fetch breakpoints(breakpoint when a XHR request is made) etc.

0 commit comments

Comments
 (0)