Setting up your environment (Browser Console, VS Code)

🧰 Chapter 2: Setting Up Your Environment

🔧 Section: Browser Console & VS Code

Before writing your first lines of JavaScript code, it’s essential to set up your development environment. This ensures you have the right tools to write, test, and debug your code efficiently.

🌐 1. Using the Browser Console (Quick Testing)

All modern web browsers come with built-in Developer Tools, including a JavaScript Console. This is the easiest place to start experimenting with code.

✅ Steps to Open the Console:

Google Chrome: Press Ctrl + Shift + J (Windows) or Cmd + Option + J (Mac)
Firefox: Press Ctrl + Shift + K (Windows) or Cmd + Option + K (Mac)
Edge: Press F12, then click on the “Console” tab

▶️ Example:

console.log("Hello from the browser console!");

🖥 You’ll see this message printed directly in your browser’s console.

🔍 Benefits:

Quick testing without any setup
Great for debugging
Useful for inspecting variables and errors

💻 2. Setting Up Visual Studio Code (VS Code)

Visual Studio Code (VS Code) is a free, powerful, and lightweight source code editor. It’s the preferred tool for most JavaScript developers.

✅ Steps to Install VS Code:

Go to: https://code.visualstudio.com
Download and install it for your OS (Windows, macOS, Linux)
Launch the application

📦 Recommended Extensions:

Live Server: For real-time preview of your HTML & JavaScript
Prettier: Code formatter for clean and readable code
ESLint: Helps you avoid common coding errors

📁 Folder Structure:

Create a new folder for your JavaScript projects. Example:

MyJSProject/
  ├── index.html
  └── script.js

📝 Example Code:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My First JS Page</title>
</head>
<body>
  <h1>Welcome to JavaScript!</h1>
  <script src="script.js"></script>
</body>
</html>

script.js

console.log("JavaScript is connected!");

Then, right-click on index.html and select “Open with Live Server” to run your page.

✅ Summary

Tool	Purpose
Browser Console	Quick testing, debugging JS directly in the browser
VS Code	Full-featured code editor for writing projects

JavaScript Course

Curriculum