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: 1-js/03-code-quality/01-debugging-chrome/article.md
+6-6Lines changed: 6 additions & 6 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,9 +26,9 @@ Let's click it and select `index.html` and then `hello.js` in the tree view. Her
26
26
27
27
Here we can see three zones:
28
28
29
-
1.**Resources zone** lists html, javascript, css and other files including images that are attached to the page. Chrome extensions may appear here too.
30
-
2.**Source zone** shows the source code.
31
-
3.**Information and control zone** is for debugging, we'll explore it soon.
29
+
1.The **Resources zone** lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
30
+
2.The **Source zone** shows the source code.
31
+
3.The **Information and control zone** is for debugging, we'll explore it soon.
32
32
33
33
Now you could click the same toggler <spanclass="devtools"style="background-position:-200px-76px"></span> again to hide the resources list and give the code some space.
34
34
@@ -44,7 +44,7 @@ For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing,
44
44
45
45
## Breakpoints
46
46
47
-
Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at the line number `4`. Yes, right on the `"4"` digit, not on the code.
47
+
Let's examine what's going on within the code of the [example page](debugging/index.html). In `hello.js`, click at line number `4`. Yes, right on the `4` digit, not on the code.
48
48
49
49
Congratulations! You've set a breakpoint. Please also click on the number for line `8`.
50
50
@@ -121,7 +121,7 @@ Now it's time to *trace* the script.
121
121
There are buttons for it at the top of the right pane. Let's engage them.
122
122
123
123
<spanclass="devtools"style="background-position:-7px-76px"></span> -- continue the execution, hotkey `key:F8`.
124
-
: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger looses the control.
124
+
: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.
125
125
126
126
Here's what we can see after a click on it:
127
127
@@ -176,7 +176,7 @@ As we can see, there are three main ways to pause a script:
176
176
177
177
Then we can examine variables and step on to see where the execution goes wrong.
178
178
179
-
There are many more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>
179
+
There are many more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>.
180
180
181
181
The information from this chapter is enough to begin debugging, but later, especially if you do a lot of browser stuff, please go there and look through more advanced capabilities of developer tools.
0 commit comments