Code is prone to errors, and as a human, it’s natural to make mistakes. In the browser, errors are not visible to users by default, which makes it challenging to identify and fix issues in scripts.
To view errors and obtain useful information about scripts, browsers come with built-in “developer tools.” Chrome and Firefox are popular choices among developers due to their excellent developer tools. Other browsers also provide similar tools, but they may lag behind in terms of features and functionality. Developers often have a preferred browser and switch to others only when troubleshooting browser-specific problems.
Developer tools are powerful and offer various features. Let’s start by learning how to open them, view errors, and run JavaScript commands.
1. Google Chrome:
The JavaScript code on the page contains an error, but it’s not visible to regular visitors.
- Press F12 (or Cmd+Opt+J on Mac) to open the developer tools.
- The developer tools will open on the Console tab, which shows error messages.
- The error message appears in red, indicating a problem with the script.
- A clickable link to the source file and line number of the error is provided.
Note that you can Press Shift+Enter to insert multiple lines of code in the console, allowing for longer JavaScript fragments.
2. Firefox, Edge, and other browsers:
Most other browsers use F12 to open their developer tools. Once you become familiar with using one tool (e.g., Chrome), it becomes easier to switch to another.
3. Safari:
Safari (Mac browser) has a slightly different approach. First, enable the “Develop menu” in Preferences > Advanced.
Press Cmd+Opt+C to toggle the console.
Note the appearance of the new “Develop” menu with additional commands and options.
Summary:
Developer tools are essential for identifying errors, running commands, and examining variables in JavaScript. They can be opened using F12 in most browsers on Windows. For Chrome on Mac, use Cmd+Opt+J, and for Safari, use Cmd+Opt+C (after enabling the Develop menu).
Now that we have the necessary environment set up, we can proceed to the next section and delve into JavaScript.