jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #1711 from tarasyyyk/master

Browse source 
Change panel names according to official documentation
This commit is contained in:
Ilya Kantor 2020-01-19 18:45:29 +01:00 • committed by GitHub
commit 1e475bf1af
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

10
1-js/03-code-quality/01-debugging-chrome/article.md
View file

@ -4,7 +4,7 @@ Before writing more complex code, let's talk about debugging.
[Debugging](https://en.wikipedia.org/wiki/Debugging) is the process of finding and fixing errors within a script. All modern browsers and most other environments support debugging tools -- a special UI in developer tools that makes debugging much easier. It also allows to trace the code step by step to see what exactly is going on.
We'll be using Chrome here, because it has enough features, most other browsers have a similar process`.
We'll be using Chrome here, because it has enough features, most other browsers have a similar process.
## The "Sources" panel
@ -24,11 +24,11 @@ Let's click it and select `hello.js` in the tree view. Here's what should show u
![](chrome-tabs.svg)
Here we can see three zones:
The Sources panel has 3 parts:
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.
1. The **File Navigator** pane lists HTML, JavaScript, CSS and other files, including images that are attached to the page. Chrome extensions may appear here too.
2. The **Code Editor** pane shows the source code.
3. The **JavaScript Debugging** pane is for debugging, we'll explore it soon.
Now you could click the same toggler <span class="devtools" style="background-position:-172px -122px"></span> again to hide the resources list and give the code some space.