JavaScript runs in two primary environments: the browser (for front-end development) and Node.js (for server-side and tooling). This guide walks through setting up both, plus the editor and browser tools you need for productive development.

JavaScript in the Browser

Every modern browser ships with a JavaScript engine:

Browser Engine
Chrome / Edge V8
Firefox SpiderMonkey
Safari JavaScriptCore

No installation is required — open any browser, press F12 (or Cmd+Option+I on Mac), and select the Console tab to run JavaScript immediately:

  console.log('Hello from the browser!');
document.title = 'JS is running';

Keep your browser updated to access the latest ECMAScript features (ES2023+).

Installing Node.js

Node.js runs JavaScript outside the browser — for backend APIs, build tools (Webpack, Vite), and package management (npm).

Step 1: Download

Visit https://nodejs.org/ and download the LTS (Long-Term Support) version. LTS is recommended for stability.

Step 2: Verify Installation 

  node --version    # v20.x.x or v22.x.x
npm --version     # 10.x.x

Step 3: Run Your First Script

Create hello.js:

  const name = process.argv[2] ?? 'World';
console.log(`Hello, ${name}!`);

Run it:

  node hello.js Simon
# Hello, Simon!

When working on multiple projects, use nvm (Node Version Manager):

  # Install nvm — see https://github.com/nvm-sh/nvm
nvm install 20
nvm use 20
nvm alias default 20

Switch versions per project:

  nvm use 18   # older project
nvm use 20   # current project

Package Management with npm

Initialize a project:

  mkdir my-js-project && cd my-js-project
npm init -y

Install dependencies:

  npm install lodash
npm install --save-dev eslint prettier

Your package.json tracks dependencies and scripts:

  {
  "name": "my-js-project",
  "version": "1.0.0",
  "scripts": {
    "start": "node index.js",
    "test": "node --test"
  }
}

Choosing a Code Editor

VS Code is the most popular editor for JavaScript development.

  1. Download from code.visualstudio.com
  2. Install extensions:
    • ESLint — lint JavaScript/TypeScript
    • Prettier — code formatting
    • JavaScript (ES6) code snippets — productivity shortcuts

Open a folder, create index.js, and press F5 to debug with breakpoints.

WebStorm (Alternative)

JetBrains WebStorm is a full IDE with built-in debugging, refactoring, and framework support. A paid license is required for commercial use.

Browser Developer Tools

Master these panels in Chrome DevTools or Firefox Developer Tools:

Panel Purpose
Console Run JS, view logs and errors
Elements Inspect and modify DOM/CSS live
Network Monitor HTTP requests and responses
Sources Set breakpoints, step through code
Application Inspect localStorage, cookies, service workers

Example — log all button clicks:

  document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', (e) => {
    console.log('Clicked:', e.target.textContent);
  });
});

Paste this in the Console on any page with buttons.

Live Server for HTML/JS Development

When learning browser JavaScript, serve files over HTTP (not file://) to avoid CORS issues:

  npm install -g live-server
live-server ./public

Or use the VS Code Live Server extension — right-click an HTML file and select “Open with Live Server.”

Optional: TypeScript Setup

TypeScript adds static types to JavaScript and compiles to plain JS:

  npm install -g typescript
tsc --init

Create app.ts:

  function greet(name: string): string {
  return `Hello, ${name}!`;
}

console.log(greet('TypeScript'));

Compile and run:

  tsc app.ts
node app.js

Environment Checklist

Before starting the JavaScript track, confirm:

  • A modern browser with DevTools accessible
  • Node.js LTS installed (node --version)
  • npm working (npm --version)
  • VS Code (or preferred editor) with ESLint/Prettier
  • A project folder ready for exercises

Next Steps

Proceed to Introduction to JavaScript to learn language fundamentals, then work through variables, functions, DOM manipulation, and async programming in order.