Today: March 29, 2024 7:20 pm

JavaScript programming development tools

There is an error in each code. You are most likely wrong. However, at least if you are a human, you are not a robot, so you will make a mistake. But in the browser, users do not see these errors by default. So, if there is a problem with the coding, we do not see what is wrong and we can not fix it. "Developer tools" are embedded in browsers to see errors and get a lot of other useful information about scripts.

Most developers prefer Chrome or Firefox because they have the best developer tools. Other browsers offer developer tools, which sometimes have special features, but usually Chrome or Firefox browsers are more compatible than others. So most developers have a "favorite" browser.

Developer tools are powerful. They also have many features. In this tutorial, to get started, we will learn how to open them, check for errors, and run JavaScript commands.

Google Chrome

To view the development tools in Google Chrome browser, follow these steps:

  • JavaScript code This error page contains an error. But nothing is clear in the appearance of the page. To view this error, open the developer tools as follows.
  • Press F12 or if you are on a Mac, then press Cmd + Opt + J.
  • Open the Console tab to view the developer tools.
  • The error you see is as follows:
ابزار توسعه دهنده

Note that the exact shape of the developer tools depends on your version of Chrome. Because they change from time to time, but they are usually the same.

In this section we can see the red error message. As you can see, the script contains an unknown "lalala" command.
On the right, there is a clickable address to the source bug.html: 12 stating the line number where the error occurred.
در زیر پیام خطا ، یک آیکن آبی رنگ > وجود دارد. این آیکن یک “خط فرمان” است که در آن می توانیم دستورات JavaScript را تایپ کنیم. برای اجرای آنها Enter را فشار دهید.

Enter multi-line codes

It is usually executed when we type a line of code in the console and then press Enter.

Press Shift + Enter to enter multiple lines. This allows you to enter longer pieces of JavaScript code.

Firefox, Edge and others

Most other browsers use F12 to open developer tools.

The look and feel of all browsers is exactly the same. When working with one of these tools (you can start with Chrome), you can easily use another browser.

Safari

Safari (Mac browser, not supported by Windows / Linux) is slightly different from other browsers. We must first enable the "Developer menu".

To do this, open Preferences and go to the "Advanced" page. At the bottom there is a confirmation box:

ابزار توسعه در سافاری

Now you can change the console with the Cmd + Opt + C key combination. Also, note that a new tab appears in the list above called "Develop". This tab contains many commands and options.

Summary

Developer tools allow us to view errors, execute commands, check variables, and more.
For most Windows browsers it opens with F12. Chrome for Mac requires Cmd + Opt + J as well as Safari: Cmd + Opt + C (must be enabled first).

With Alfa Cyber Stay tuned to stay up to date.

, , , , ,
0.00 avg. rating (0% score) - 0 votes
0 Comments

No comment

en_USEnglish