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

Change panel names according to official documentation

Browse source
This commit is contained in:
tarasyyyk 2020-01-16 22:12:39 +02:00
parent 4f756bbb09
commit 6c00296f70
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.