Create a small, repeatable workspace

Use an editor such as VS Code to keep an HTML file and a JavaScript file together. The browser console is for observing output and investigating errors; a temporary console command is not a saved change to your project.

Two files

Create index.html:

  
  
  

JavaScript Lab

Create app.js in the same directory:

const title = document.querySelector('#title');
console.log('Script loaded');
console.log({ titleFound: title !== null });
title.textContent = 'JavaScript workspace ready';

Open index.html in your browser. Expect the heading to change and two console entries to appear. defer allows a classic external script to run after document parsing; the file still needs to load successfully.

Use developer tools deliberately

1. Console: inspect errors and log values.
2. Sources: set a breakpoint on the text update, reload, and inspect title.
3. Network: verify app.js returns a successful response when served through a local development server.
4. Elements: inspect the resulting DOM, remembering that edits there are usually temporary.

Common setup problems

A wrong filename, capitalisation mismatch or relative path can prevent loading. A cached file may show an older version; inspect the requested URL and use the development tools' reload controls when appropriate. Module scripts and network requests should be tested through a local HTTP development server rather than assuming file:// behavior matches deployment.

Practice

Introduce a misspelled variable, reload and locate the filename and line number in the error. Repair it, then set a breakpoint and step through the corrected statement. Never paste unfamiliar code into a console simply because a website tells you to.

हिन्दी संकेत: editor की file save करें, browser reload करें, और error की पहली line पढ़ें। Console में की गई temporary editing file को save नहीं करती।