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) orCmd + Option + J(Mac) - Firefox: Press
Ctrl + Shift + K(Windows) orCmd + 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 |