You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: en/miscellaneous/debugging.md
+72-19Lines changed: 72 additions & 19 deletions
Original file line number
Diff line number
Diff line change
@@ -5,18 +5,55 @@ description: In programming, errors can occur while writing code. It could be du
5
5
---
6
6
# Debugging
7
7
8
-
In programming, errors can occur while writing code. It could be due to syntactical or logical errors. The process of finding errorscan be time-consuming and tricky and is called **code debugging**.
8
+
In programming, errors can occur while writing code. It could be due to syntactical or logical errors. **Code debugging** is the process of identifying, isolating, and fixing errors, which can be time-consuming and tricky.
9
9
10
10
Fortunately, most modern browsers come with built-in debuggers. These debuggers can be switched on and off, forcing errors to be reported. It is also possible to set up breakpoints during the execution of code to stop execution and examine variables. For this one has to open a debugging window and place the `debugger` keyword in the JavaScript code. The code execution is stopped in each breakpoint, allowing developers to examine the JavaScript values and, resume the execution of code.
11
11
12
-
One can also use the `console.log()` method to print the JavaScript values in the debugger window.
12
+
## The console.log() Technique
13
+
14
+
One of the simplest and most widely used debugging methods is using the `console.log()` function. It helps you track the flow of your code and inspect the values of variables at specific points in execution.
13
15
14
16
```javascript
15
-
consta=5, b =6;
16
-
constc= a + b;
17
-
console.log(c);
18
-
// Result : c = 11;
17
+
functioncalculateTotal(price, taxRate) {
18
+
consttax= price * taxRate;
19
+
console.log('Tax calculated:', tax); // Output for inspection
20
+
consttotal= price + tax;
21
+
return total;
22
+
}
23
+
24
+
calculateTotal(100, 0.2);
19
25
```
26
+
Use `console.log()` to:
27
+
28
+
- Check if a function is being called.
29
+
- Print the value of variables.
30
+
- Monitor control flow (e.g., if a condition is met).
31
+
32
+
Other useful `console` methods:
33
+
34
+
-`console.error()` – for logging errors.
35
+
-`console.warn()` – for warnings.
36
+
-`console.table()` – for printing data in tabular form.
37
+
-`console.trace()` – to print the stack trace at a certain point.
38
+
39
+
## Using Breakpoints
40
+
41
+
A breakpoint is a spot in your code where execution will pause, allowing you to examine the current state: variable values, call stack, scope chain, etc.
42
+
Modern browsers offer developer tools with debugging capabilities.
43
+
44
+
### How to Set Breakpoints
45
+
1. Open the Sources panel in DevTools.
46
+
2. Navigate to your script file.
47
+
3. Click on the line number where you want execution to pause.
48
+
49
+
Once paused, you can:
50
+
51
+
-**Step over** – move to the next line.
52
+
-**Step into** – dive into a function call.
53
+
-**Step out** – exit the current function.
54
+
-**Resume** – continue execution until the next breakpoint.
55
+
Breakpoints are non-intrusive and can be added/removed without changing your code.
56
+
20
57
## Browser Developer Tools
21
58
Modern browsers come equipped with powerful developer tools that aid in debugging JavaScript, inspecting HTML and CSS, and monitoring network requests. Here's a brief overview of some essential tools:
22
59
@@ -28,25 +65,41 @@ Modern browsers come equipped with powerful developer tools that aid in debuggin
28
65
29
66
**Safari Web Inspector:** Safari's Web Inspector is a robust toolset for debugging and profiling web applications.
30
67
31
-
##Using Breakpoints
68
+
### Browser Dev Tools
32
69
33
-
Modern browsers offer developer tools with debugging capabilities.
34
-
Setting breakpoints pauses code execution and helps to inspect variables and call stacks.
70
+
Browsers provide a set of developer tools that allow you to inspect HTML, CSS, and JavaScript.
71
+
We can access them by right-clicking on a web page and selecting "Inspect" or by pressing `F12` or `Ctrl+Shift+I`/ `Cmd + Option + I` (Mac).
72
+
73
+
### Key Panels in Developer Tools
74
+
-**Console:** Displays logs, errors, and allows executing JS in real time.
75
+
-**Elements / Inspector:** Lets you browse and edit the HTML and CSS.
76
+
-**Sources:** Where you debug JavaScript using breakpoints.
77
+
-**Network:** View resource loading, timing, and request/response data.
78
+
-**Performance / Memory:** Useful for profiling and identifying memory leaks or bottlenecks.
35
79
80
+
We can insert the debugger statement in the code to create breakpoints programmatically. When the code encounters debugger, it will pause execution and open the browser's developer tools.
36
81
37
-
### Browser Developer Tools
82
+
### Watch Expressions and Scope
38
83
39
-
Browsers provide a set of developer tools that allow you to inspect HTML, CSS, and JavaScript.
40
-
We can access them by right-clicking on a web page and selecting "Inspect" or by pressing `F12` or `Ctrl+Shift+I`.
41
-
Key features include:
84
+
In the DevTools, you can **watch** variables or expressions. This is helpful when debugging complex logic or tracking a variable over time.
42
85
43
-
**Console:** View and interact with console output.
86
+
- Use the **Watch** panel to track expressions like user.name or cart.length.
87
+
- View **Local**, **Closure**, and **Global** scopes to inspect available variables.
44
88
45
-
**Elements:** Inspect and modify the DOM.
89
+
### Stack Trace and Call Stack
46
90
47
-
**Sources:** Debug JavaScript with breakpoints and watch expressions.
91
+
When paused at a breakpoint (or after an error), you can inspect the Call Stack panel:
48
92
49
-
**Network:** Monitor network requests and responses.
50
-
Using debugger Statement
93
+
- It shows the series of function calls that led to the current point.
94
+
- Clicking on a frame lets you inspect variables in that context.
95
+
Understanding the call stack is vital for fixing unexpected behaviors caused by incorrect function flows.
96
+
97
+
## Common Debugging Strategies
98
+
99
+
-**Simplify the problem**: Try to isolate the smallest reproducible example.
100
+
-**Use assertions**: Manually check assumptions in your code.
101
+
-**Rubber duck debugging**: Explain your code to someone (or something!) to uncover hidden issues.
102
+
-**Search for error messages**: JavaScript errors often contain helpful information.
103
+
-**Check browser compatibility**: Not all browsers behave identically.
104
+
-**Use linters**: Tools like ESLint can catch many common bugs before you run your code.
51
105
52
-
We can insert the debugger statement in the code to create breakpoints programmatically. When the code encounters debugger, it will pause execution and open the browser's developer tools.
0 commit comments