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/01-getting-started/2-code-editors/article.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -1,6 +1,6 @@
1
1
# Code editors
2
2
3
-
The code editor is the place where a programmer spends most his time.
3
+
A code editor is the place where a programmer spends most of his time.
4
4
5
5
There are two archetypes: IDE and lightweight editors. Many people feel comfortable choosing one tool of each type.
6
6
@@ -32,7 +32,7 @@ They are mainly used to instantly open and edit a file.
32
32
33
33
The main difference between a "lightweight editor" and an "IDE" is that IDE works on a project-level, so it loads much more data on start, analyzes the project structure if needed and so on. A lightweight editor is much faster if we need only one file.
34
34
35
-
In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
35
+
In practice, lightweight editors may have a lot of plugins including directory-level syntax analyzers and autocompleters, so there's no strict border between a lightweight editor and an IDE.
And the one more thing before we get down to coding.
4
-
5
3
A code is error-prone. You are quite likely to have errors... Oh what I'm talking? You are *absolutely* going to make errors, at least if you're a human, not a [robot](https://en.wikipedia.org/wiki/Bender_(Futurama)).
6
4
7
5
But in the browser, a user doesn't see the errors by default. So, if something goes wrong in the script, we won't see what's broken and can't fix it.
8
6
9
7
To see errors and get a lot of other useful information about scripts, browsers have embedded "developer tools".
10
8
11
-
**Most often developers lean towards Chrome or Firefox for the development.**
12
-
13
-
Other browsers also provide developer tools, but are usually in a "catching-up" position, compared to Chrome/Firefox which are the best.
14
-
15
-
Sometimes, it may be required to switch to another browser, if a problem is browser-specific, but that's rare.
9
+
Most often developers lean towards Chrome or Firefox for the development, because developer tools are best there. Other browsers also provide developer tools, sometimes with special features, but usually are in "catching-up" position. So most people have a "favorite" browser and switch to others if a problem is browser-specific.
16
10
17
11
Developer tools are really powerful, there are many features. Here, for the start, we'll learn how to open them, look at errors and run JavaScript commands.
18
12
@@ -34,10 +28,10 @@ It looks somewhat like this:
34
28
35
29
The exact look depends on your Chrome version. It changes from time to time, but should be similar.
36
30
37
-
- Here we can see the red-colored error message. In this case the script contains a "lalala" command, which was put there just because it is unknown.
31
+
- Here we can see the red-colored error message. In this case the script contains an unknown "lalala" command.
38
32
- On the right, there is a clickable link to the source `bug.html:12` with the line number where the error has occured.
39
33
40
-
Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press enter to run them (`key:Shift+Enter` to input multiline commands).
34
+
Below the error message there is a blue `>` symbol. It marks a "command line" where we can type JavaScript commands and press `key:Enter` to run them (`key:Shift+Enter` to input multiline commands).
41
35
42
36
Now we can see errors and that's enough for the start. We'll be back to developer tools later and cover debugging more in-depth in the chapter <info:debugging-chrome>.
43
37
@@ -46,21 +40,21 @@ Now we can see errors and that's enough for the start. We'll be back to develope
46
40
47
41
Most other browsers use `key:F12` to open developer tools.
48
42
49
-
The look & feel of them is quite similar, once we know how to use one of them (can start with Chrome), can easily switch to another.
43
+
The look & feel of them is quite similar. Once you know how to use one of them (can start with Chrome), you can easily switch to another.
50
44
51
45
## Safari
52
46
53
-
Safari (if you use Mac, not Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
47
+
Safari (Mac browser, not supported for Windows/Linux) is a little bit special here. We need to enable the "Develop menu" first.
54
48
55
-
There's a checkbox for that at the bottom of the "Advanced" pane of the preferences:
49
+
Open Preferences and go to "Advanced" pane. There's a checkbox at the bottom of it:
56
50
57
51

58
52
59
-
Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item has appeared with many useful options.
53
+
Now `key:Cmd+Opt+C` can toggle the console. Also note that the new top menu item named "Develop" has appeared. It has many commands and options.
60
54
61
55
## Summary
62
56
63
-
- Developer tools allow us to see errors, run commands, examine variables and much more.
57
+
- Developer tools allow us to see errors, run commands, examine variables and much more.
64
58
- They can be opened with `key:F12` for most browsers under Windows. Chrome for Mac needs `key:Cmd+Opt+J`, Safari: `key:Cmd+Opt+C` (need to enable first).
65
59
66
-
Now we have the environment ready. In the next section we get down to JavaScript.
60
+
Now we have the environment ready. In the next section we get down to JavaScript.
0 commit comments