Javascript Development Tools

Like any other task, programming requires the proper tools and workspace. In the case of JavaScript, the most important tools are:

• Code Editor: Think of a code editor as your digital workspace. It's where you'll write, edit, and organize your code. While you can use a basic text editor, a dedicated code editor provides features like syntax highlighting, autocompletion, and error checking, making your coding experience more efficient.
• Compiler or Interpreter: A compiler or interpreter translates your code into instructions that the computer can understand and execute. For our purposes, we'll focus on JavaScript, which uses an interpreter. The interpreter executes your JavaScript code line by line, ensuring it runs correctly.

There are also a number of online development environments available. These environments allow you to write, run, and debug JavaScript code without having to install any software on your computer. Some popular online development environments include JSFiddle, CodePen, and Plunker.

The JavaScript development environment requirements are very modest. At the beginning of development, you only need three essential tools:

• A code editor: This is a software program that allows you to write, edit, and run JavaScript code. Some popular code editors include Visual Studio Code, Sublime Text, and Atom.
• An interpreter (i.e., a bootable environment): This is a program that executes JavaScript code. The JavaScript engine built into most web browsers is an interpreter.
• A debugger: This is a tool that allows you to step through your code line by line, inspecting the values of variables and the state of the program. This can be helpful for finding and fixing errors in your code.

Depending on the level of sophistication, the complexity of the project, or the environment for which you are writing your programs (client-side, server-side, mobile), you may also need other tools, such as:

• Package managers: These tools help you manage libraries (containing ready-made solutions that you can use in your programs) or components of the development environment (e.g., npm or yarn).
• Task runners and module bundlers: These tools automate the process of software development and merge the resulting code from many files and libraries (e.g., Grunt or Webpack).
• Testing frameworks: These tools allow you to automatically test the correctness of your program in search of potential errors (e.g., Mocha, Jasmine, or Jest).
• Security analyzers: These tools help you assess the security of your solution (e.g., Snyk, RetireJS, or OWASP Dependency Check).

The openness of web development environments is both a blessing and a curse. On the one hand, you have a choice of hundreds of components to create the most comfortable environment for yourself. On the other hand, the sheer number of tools and the dynamic changes in the development landscape can make it difficult to keep up.

For now, focus on the essential trio: a code editor, interpreter, and debugger. As your needs grow, you can add other tools to your toolkit as needed.

4.1 Code Editor

The best tools for you will depend on your individual needs and preferences. If you are just starting out, we recommend using a popular code editor like Visual Studio Code or Sublime Text. These editors are easy to use and have a lot of features that will be helpful for beginners.

If you are planning on doing more advanced JavaScript development, you may want to consider using a more powerful IDE like WebStorm. IDEs offer a wider range of features and tools than code editors, but they can be more complex to learn.

4.2 Interpreter

The interpreter is a program that checks your JavaScript code for errors and then executes it. The interpreter you use will depend on the platform you are writing your software for. If you are writing a server-side application, you will need to install the Node.js environment. If you are writing a client-side application, you can use the JavaScript interpreter built into your web browser.

This course is about core JavaScript, which means that the language elements you learn will be useful in all environments. The easiest way to practice core JavaScript is to use a web browser. Chrome and Firefox are two popular browsers with built-in JavaScript interpreters. They are both efficient and have tools that are helpful for web developers.

4.3 Debugger

Computer programs can be very complex and have thousands or even millions of lines of code. It is impossible to write code without any errors. Some errors can only be found when the program is running, and it can be hard to find out what is happening inside a program that runs very fast.

A debugger is a tool that allows you to slow down or even halt the execution of a program, run instructions step by step, and look at and analyze the state of the program at any given moment.

All modern browsers have developer tools that include a debugger. To enable the developer tools, you can use the following keyboard shortcuts:

• Windows and Linux operating systems, all common browsers except Internet Explorer and Edge: Ctrl+Shift+I
• Windows operating system, Internet Explorer and Edge: F12
• macOS operating system, all common browsers: Cmd+Option+I

In the upcoming section, we will learn more about the debugger and how to use it to find and fix errors in our code.

In the meantime, make sure that you have installed the necessary tools and that you can start them up. If you are not sure what tools to use, we recommend using the local environment with Visual Studio Code (code editor) and Chrome (web browser with JavaScript interpreter and debugger).