Setting Up JavaScript – Browser Console, Node.js & VS Code

The Browser DevTools Console

The fastest way to run JavaScript is your browser's built-in console. Every modern browser — Chrome, Firefox, Edge, Safari — ships with DevTools that include a JavaScript console. Open it with F12 (Windows/Linux) or Cmd + Option + J (Mac), then click the Console tab.

You can type JavaScript directly and press Enter to execute. The console is perfect for experimenting, debugging, and following along with tutorials.

JavaScript

// Type this in your browser console and press Enter
console.log("JavaScript is running!");
2 + 2

▶ Output

JavaScript is running! 4

The console also evaluates expressions — notice that 2 + 2 returns 4 without needing console.log(). This is the REPL (Read–Evaluate–Print Loop) mode.

💡

Multi-line in the Console

Press Shift + Enter in the browser console to add a new line without executing. This lets you write multi-line code snippets directly in the REPL.

Installing Node.js

Node.js lets you run JavaScript outside the browser — on your computer, as a server, or as a build tool. It's essential for modern JavaScript development. Visit nodejs.org and download the LTS (Long Term Support) version for your operating system.

Verifying Your Installation

After installing, open a terminal (Command Prompt on Windows, Terminal on Mac/Linux) and verify:

Bash

node --version
# v22.x.x  (your version may differ)

npm --version
# 10.x.x

Node ships with npm (Node Package Manager), which you'll use throughout your JavaScript career to install libraries and tools.

The Node.js REPL

Type node in your terminal to open the interactive Node.js REPL — it works just like the browser console:

Bash

$ node
Welcome to Node.js v22.x.x.
Type ".help" for more information.
> console.log("Hello from Node!")
Hello from Node!
undefined
> 10 * 5
50
> .exit

ℹ️

Why does it show "undefined"?

console.log() prints its argument and then returns undefined. The REPL shows the return value of every expression — hence the undefined on the next line. This is normal behavior.

Setting Up VS Code

Visual Studio Code (VS Code) is the most popular editor for JavaScript development. Download it free from code.visualstudio.com. It's lightweight, fast, and has an enormous extension ecosystem.

Essential Extensions

Install these extensions from the Extensions panel (Ctrl + Shift + X):

Extension	Publisher	Purpose
ESLint	Microsoft	Catches JavaScript errors as you type
Prettier	Prettier	Auto-formats your code on save
Live Server	Ritwick Dey	Live-reloads your HTML in the browser
JavaScript (ES6) Snippets	charalampos karypidis	Code snippets for common patterns
Path Intellisense	Christian Kohler	Autocompletes file paths

Configuring Prettier

Create a .prettierrc file in your project root to share consistent formatting settings:

JSON

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Adding JavaScript to HTML

The classic way to include JavaScript in a webpage is via the <script> tag. You can write JS inline or link an external file — external files are always preferred for anything beyond a few lines.

Inline Script

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First JS Page</title>
</head>
<body>
  <h1>Hello!</h1>
  <script>
    console.log("Script is running!");
    alert("Welcome to JavaScript!");
  </script>
</body>
</html>

External Script File

Linking an external .js file keeps your HTML clean and allows the browser to cache the script:

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My JS Project</title>
</head>
<body>
  <h1 id="greeting"></h1>
  <!-- defer loads the script after HTML is parsed -->
  <script src="app.js" defer></script>
</body>
</html>

JavaScript

// app.js
document.getElementById("greeting").textContent = "Hello from app.js!";

⚠️

Always Use defer or Place Scripts at the Bottom

If you put a <script> in the <head> without defer, it runs before the HTML is loaded — which means document.getElementById() will return null. Use defer or place <script> tags just before </body>.

Online Editors

When you just want to experiment without any local setup, online editors are invaluable. The most popular options are:

CodePen (codepen.io) — Great for HTML/CSS/JS demos with live preview
JSFiddle (jsfiddle.net) — Classic editor with panel layout
StackBlitz (stackblitz.com) — Full Node.js environment in the browser
JS Bin (jsbin.com) — Lightweight and shareable

🏋️ Practical Exercise

Open your browser, press F12, navigate to the Console tab, and type console.log("My name is " + "JavaScript"). Press Enter.
Install Node.js from nodejs.org. Open a terminal and run node --version to confirm it installed correctly.
Open the Node REPL with node and compute Math.PI * 5 * 5 (area of a circle with radius 5).
Install VS Code and add the ESLint, Prettier, and Live Server extensions.
Create a folder my-js-project, add an index.html and app.js, link them with a defer script tag, and use Live Server to open it in the browser.

🔥 Challenge Exercise

Create a simple project with an index.html file that loads an external app.js. In app.js, use document.title to change the page title dynamically, and add a paragraph element to the page body with today's date using new Date().toLocaleDateString(). Open it with Live Server and verify it works.

📋 Summary

The browser DevTools console (F12) is the quickest way to run JavaScript — no setup needed.
Node.js lets you run JavaScript outside the browser; install it from nodejs.org and use node --version to verify.
The Node REPL (node in terminal) gives you an interactive JavaScript environment.
VS Code is the recommended editor; install ESLint, Prettier, and Live Server extensions.
Link external .js files with <script src="..." defer> to keep HTML clean and avoid timing issues.
Online editors like CodePen and StackBlitz are great for quick experiments and sharing demos.

Interview Questions

What is the difference between running JavaScript in the browser versus Node.js?
Why should you use the defer attribute on a <script> tag?
What is the purpose of ESLint in a JavaScript project?
What does npm stand for, and what is it used for?
What is the difference between async and defer script attributes?

Frequently Asked Questions

Do I need to install anything to start learning JavaScript? +

No! Your browser already has a JavaScript engine. Press F12 to open DevTools and start coding in the Console tab immediately. Node.js and VS Code are optional but recommended for serious development.

Should I use the LTS or Current version of Node.js? +

Always use the LTS (Long Term Support) version for learning and production projects. The Current version has newer features but receives shorter support. LTS is stable and well-documented.

What's the difference between async and defer on a script tag? +

defer downloads the script in parallel but executes it only after the HTML is fully parsed, maintaining script order. async downloads in parallel and executes immediately when ready, potentially breaking order. Use defer for most cases.

Can I use JavaScript without a framework? +

Absolutely. Vanilla JavaScript (plain JS without frameworks) is powerful enough for most tasks. Learning vanilla JS first makes you a much better developer when you eventually use React, Vue, or other frameworks.

Which browser is best for JavaScript development? +

Google Chrome is the most popular choice because of its excellent DevTools, fast V8 JavaScript engine, and large developer user base. Firefox is also excellent, with its own powerful DevTools. Both work great for learning.