Setting Up Your JavaScript Environment

Setting up a proper environment is the first step to diving into the exciting world of JavaScript development. In this post, we’ll guide you through the process of preparing your environment, from installing an editor to understanding how to link files and use browser developer tools.

Step 1: Installing and Using Editors

For creating and working with Javascript files, you can follow the setup explained in HTML docs itself. Check it out here.

Step 2: Creating an HTML File and Linking JavaScript

In these JavaScript tutorials, we will go through how to run js in a browser.

Open your favourite code editor, create a file called index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JavaScript Environment</title>
  </head>
  <body>
    <h1>Welcome to JavaScript</h1>
    <script src="script.js"></script>
  </body>
</html>

Create another file named script.js

Inside this file, write the following JavaScript code:

console.log("Hello, JavaScript!");
alert("Welcome to your first JavaScript environment!");

Open the index.html file in a browser

You can see an alert and a log on the developer tools console tab, let’s look at how we can open the developer tools

Step 3: Opening Browser Developer Tools

Modern web browsers come with built-in developer tools that allow you to debug and test your JavaScript code.

How to Open Chrome DevTools

Open your page in Google Chrome.
Right-click anywhere on the page and select Inspect.
Navigate to the Console tab to view logged messages, errors, and other outputs from your JavaScript code.

The Developer Tools include several tabs for different purposes.

Elements: View and modify the HTML structure and CSS styles in real time.
Console: Execute JavaScript commands directly and log diagnostic information.
Sources: Debug JavaScript files, set breakpoints, and inspect the call stack.
Network: Monitor and analyze network requests, including XHRs, fetch requests, and static file loading.
Performance: Analyze and improve page load and runtime performance.
Memory: Diagnose memory leaks and inspect memory usage of the page.
Application: Manage and inspect web storage (e.g., Local Storage, Session Storage), cookies, and service workers.
Security: Check security information like SSL certificates and mixed content.
Lighthouse: Run audits to get insights into your page’s performance, SEO, and accessibility.

We will look at the console tab in detail.

Step 4: Console Basics

The console is one of the most important tools in JavaScript development. It allows you to debug, log outputs, and inspect variables.

Log Messages and Values

Use console.log() to display messages or variables in the browser’s console:

console.log("Hello, world!");

You can log variables or objects to check their current values in your code:

let developer = "Test user";
console.log("Developer name:", developer);

Display Errors and Warnings

To help with debugging, you can output error or warning messages directly to the console.

console.error("This is an error message!");
console.warn("This is a warning message!");