Web Development Tools List Every Professional Should Know

// Useful console methods beyond console.log
const users = [
  { name: "Asha", city: "Noida", active: true },
  { name: "Vikram", city: "Delhi", active: false },
];

console.table(users);                 // readable table view
console.time("filter");
const active = users.filter((u) => u.active);
console.timeEnd("filter");            // how long it took
console.warn("Inactive users:", users.length - active.length);

function checkout(cart) {
  debugger;   // pauses here when DevTools is open
  return cart.reduce((sum, item) => sum + item.price, 0);
}

Using the DevTools Network tab to debug a failing API call:

1. Open DevTools (F12) -> Network
2. Tick 'Preserve log' and reload or repeat the action
3. Filter by 'Fetch/XHR'
4. Click the failing request (shown in red)
5. Check:
   - Status code (401? 404? 500?)
   - Request headers (is the auth token sent?)
   - Payload (is the data correct?)
   - Response (what error did the server return?)
6. Use 'Copy as cURL' to reproduce it in the terminal

# Start a feature on its own branch
git checkout -b feature/contact-form

# Work, then review what changed
git status
git diff

# Commit in small, clear steps
git add src/ContactForm.jsx
git commit -m "Add contact form with email validation"

# Push and open a pull request for review
git push -u origin feature/contact-form

# Keep your branch updated with main
git fetch origin
git rebase origin/main

{
  "name": "my-web-app",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint .",
    "format": "prettier --write .",
    "test": "vitest run"
  }
}

Run any script with: npm run <name>
Example: npm run lint

// sum.test.js - run with: npx vitest run
import { describe, it, expect } from "vitest";

export function cartTotal(items) {
  return items.reduce((t, i) => t + i.price * i.qty, 0);
}

describe("cartTotal", () => {
  it("adds price times quantity", () => {
    expect(cartTotal([{ price: 100, qty: 2 }, { price: 50, qty: 1 }])).toBe(250);
  });
  it("returns 0 for an empty cart", () => {
    expect(cartTotal([])).toBe(0);
  });
});

# .github/workflows/ci.yml
name: ci
on: [push, pull_request]
jobs:
  check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: npm
      - run: npm ci
      - run: npm run lint
      - run: npm test
      - run: npm run build

New web project setup

[ ] git init + .gitignore (node_modules, .env, dist)
[ ] npm create vite@latest (or framework starter)
[ ] ESLint configured, npm run lint passes
[ ] Prettier configured, format on save in VS Code
[ ] Test runner installed with one passing test
[ ] README: purpose, setup, scripts
[ ] .env.example for configuration
[ ] CI workflow running lint, test, build
[ ] Deployment target chosen and tested

Recommended VS Code setup for web work

Extensions:
- ESLint
- Prettier
- GitLens (optional)
- Live Server (for plain HTML/CSS practice)

Settings to enable:
- Format on save
- Auto save (after delay)
- Bracket pair colourisation

Shortcuts worth learning:
- Quick open file, command palette, multi-cursor,
  go to definition, rename symbol

Learn tools in this order:

1. VS Code + browser DevTools
2. Terminal basics
3. Git and GitHub
4. npm and package.json scripts
5. A build tool (Vite)
6. A framework (React, Vue or similar)
7. ESLint + Prettier
8. Testing (unit, then end-to-end)
9. CI + deployment

Use each tool on a real project before adding the next.