Developer console

The code is very error-prone. You are also likely to make mistakes…… Oh, what am I saying? As long as you are human, you are bound to make mistakes (when writing code), unless you are a robot.

But in a browser, errors are invisible to the user by default. So, if there is an error in the script, we can’t see what the error is, and we can’t fix it.

To find errors and get some useful script-related information, the browser has built-in developer tools.

In general, developers tend to use Chrome or Firefox for development because they have the best developer tools. Other browsers offer developer tools, sometimes with special features, often playing catch-up with Chrome or Firefox. So most people have a “favorite” browser, and when they run into a browser-specific problem, they switch to another browser.

Developer tools are powerful and feature-rich. First, we’ll learn how to open them, find errors, and run JavaScript commands.

Google Chrome

Open the web page bug.html.

There is an error in the JavaScript code. The average visitor can’t see this error, so let’s open the developer tool and take a look.

Press key:F12. If you’re using a Mac, try key:Cmd+Opt+J.

The developer tools will open, and the Console TAB is the default TAB.

Something like this:

It depends on your version of Chrome. It changes over time, but it’s all very similar.

  • Here we can see the red error message. In this scenario, there is an unknown “lalala” command in the script.
  • On the right, there’s a clickable linkbug.html:12. This link links to the line number where the error occurred.

Below the error message, there is a > flag. It stands for “command line”, where we can type JavaScript commands and press key:Enter to execute (key:Shift+Enter for multi-line commands).

For now, it’s enough that we can see mistakes. We’ll revisit developer tools in more depth later in the Info: Debugging – Chrome section.

Firefox, Edge and other browsers

Most other browsers open developer tools with key:F12.

They all look and feel very similar, and once you learn one of them (try Chrome first), the others will follow quickly.

Safari

Safari (the browser on Mac, not supported on Windows and Linux) is a little different. We need to open the development menu first.

Open preferences and select Advanced options. Check the box at the bottom.

Now we can turn the console on or off with key:Cmd+Opt+C. Also notice that a top menu named “Development” appears. It has many commands and options.

Normally, when we type a line of code into the console, press Key :Enter and the line is executed immediately.

If you want to insert multiple lines of code, press key:Shift+Enter for a line break. This allows you to enter long snippets of JavaScript code.

conclusion

  • Developer tools allow us to view errors, execute commands, check variables, and so on.
  • On Windows, you can pass thekey:F12Open developer tools. On a Mac OS, Chrome is requiredkey:Cmd+Opt+J, use Safarikey:Cmd+Opt+C(Need to be opened in advance).

Now our environment is ready. In the next chapter, we’ll start learning JavaScript in earnest.

Modern JavaScript Tutorials: Open source modern JavaScript tutorials from beginner to advanced quality. React provides a JavaScript tutorial for MDN learners.

Read for free online: zh.javascript.info

Scan the QR code below and follow the wechat public account “Technology Chat” to subscribe for more exciting content.