Skip to content

Debugger #373

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
iliakan merged 3 commits into from
Mar 3, 2018
Merged

Debugger #373

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2b34f2e
Proper capitalization
brentguf Jan 19, 2018
aa60a3e
Update article.md
brentguf Jan 19, 2018
65c3bbe
Typos
brentguf Jan 19, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions 1-js/03-code-quality/01-debugging-chrome/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,9 +28,9 @@ Let's click it and select `index.html` and then `hello.js` in the tree view. Her

Here we can see three zones:

1. **Resources zone** lists html, javascript, css and other files including images that are attached to the page. Chrome extensions may appear here too.
2. **Source zone** shows the source code.
3. **Information and control zone** is for debugging, we'll explore it soon.
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.
2. The **Source zone** shows the source code.
3. The **Information and control zone** is for debugging, we'll explore it soon.

Now you could click the same toggler <span class="devtools" style="background-position:-200px -76px"></span> again to hide the resources list and give the code some space.

Expand All @@ -46,7 +46,7 @@ For example, here `1+2` results in `3`, and `hello("debugger")` returns nothing,

## Breakpoints

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.
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.

Congratulations! You've set a breakpoint. Please also click on the number for line `8`.

Expand Down Expand Up @@ -123,7 +123,7 @@ Now it's time to *trace* the script.
There are buttons for it at the top of the right pane. Let's engage them.

<span class="devtools" style="background-position:-7px -76px"></span> -- continue the execution, hotkey `key:F8`.
: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger looses the control.
: Resumes the execution. If there are no additional breakpoints, then the execution just continues and the debugger loses control.

Here's what we can see after a click on it:

Expand Down Expand Up @@ -178,7 +178,7 @@ As we can see, there are three main ways to pause a script:

Then we can examine variables and step on to see where the execution goes wrong.

There are many more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>
There are many more options in developer tools than covered here. The full manual is at <https://developers.google.com/web/tools/chrome-devtools>.

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.

Expand Down