JavaScript Development Tools

You need two things to start coding JavaScript. 1) Text Editor 2) Browser
Though any simple text editor as notepad would work, there are many IDEs and Editors that provided so many functionalities. IDEs and Lightweight editors make it easy to develop scale JavaScript project. So you should start your course with choosing IDE or Editor.
IDE is not just tool for writing code, but you can compile, debug the code also while in editors you can not do that. These days, the editors also provide that functionality with installing plugins. Most IDEs are provide everything related to particular language. So the memory used by IDEs are more than editors. But to write JavaScript, you can use a simple editor ( like MS Code ) which provides great functionalities in-built.

Integrated Development Environment

  • WebStorm
  • Microsoft Visual Studio
  • NetBeans
  • Eclipse

Lightweight Text Editors

  • Microsoft Visual Studio Code ( VS Code )

    VS Code is more like IDE because most of the needed things are already integrated into it. Though, there are plugins available. It is one of the best editors for JavaScript available in the Market.

  • Sublime
  • Brackets
  • Atom

Developer Console

The second tool needed for development of JavaScript is a browser. As we have seen, the browser provides enviornment for JavaScript to run.

The code is prone to errors. You are likely to make errors. To see what error has occurred, you will need to open the developer tools of the browser. Mostly F12 will open developer tools for most of the browsers.


Open Developer Console in Chrome
Chrome Developer Console

To open developer tools in chrome, press F12 or right click on the webpage and select inspect. If you are in Mac, press Cmd + Opt + J.
In the figure, as you can see, there is something written in the red line. That is an error. And that is how you will know that some error has occurred.


Enable developer tools in Safari
Enable developer tools in Safari

To open developer tools in Safari, you need to enable the developer tools first.
To do that, open Preferences -> Advanced. Enable "Show Develop menu in Menubar".
Now Cmd + Opt + C can toggle the developer tools.

Firefox, Opera and Other Browsers

In Firefox, Opera and Other browsers, F12 will open developer tools.


So, in this section, you learned about how to open developer tools in the different browser.
Developer tools are very important in the development of the JavaScript project.
In next section, you will write your first script in JavaScript.