🌐 Web Development Roadmap — Part 10
🛠️ Developer Tools — The Tools Every Web Developer Needs
Web development isn't only about writing code. Developers also use a set of tools to write, inspect, test, debug, manage, and deploy their applications.
Let's understand the most important ones.
1️⃣ Code Editor
A code editor is where you write your code.
A popular choice is: Visual Studio Code (VS Code)
You can use it to write:
• HTML
• CSS
• JavaScript
• TypeScript
• React
• Node.js
• Python
• And many other languages
For example, you might have a project like:
my-website/
• index.html
• style.css
• script.js
You can open the entire folder in VS Code and work on all these files.
Useful VS Code features
• Syntax highlighting
• Code completion
• Extensions
• Integrated terminal
• Debugging
•
Search
across files
•
Git integration
We'll use a code editor extensively throughout this course.
2️⃣ Web Browser
We've already learned that browsers display websites.
For a developer, the browser is also a development tool.
Common choices include:
• Chrome
• Edge
• Firefox
• Safari
You'll use a browser to:
• Run your website
• Test functionality
• Check responsive layouts
• Inspect HTML and CSS
• Debug JavaScript
• Monitor network requests
3️⃣ Browser Developer Tools
Developer Tools are built directly into modern browsers.
You can usually open them by: Right-click → Inspect or by using a keyboard shortcut.
They provide several important tools.
Elements
Allows you to inspect HTML and CSS.
For example: <button>Buy Now</button>
You can inspect the button and see which CSS rules are affecting it.
You can even temporarily modify the CSS in Developer Tools and immediately see the result.
This is extremely useful when debugging layouts.
Console
The Console is mainly used for:
• JavaScript output
• Errors
• Warnings
• Debugging
For example: console.log("Hello Web Developer");
The message appears in the browser console.
Later, you'll use the Console frequently while learning JavaScript.
Network
The Network panel shows communication between the browser and servers.
You can see:
• Request
• Response
• URL
• Status code
• Request method
• Response data
• Loading time
For example: GET /products - 200 OK
This becomes particularly useful when working with APIs.
Application
The Application panel can help inspect browser-side storage and other resources, including:
• Cookies
• Local storage
• Session storage
• Cache-related information
We'll use this later when learning authentication and browser storage.
Sources
The Sources panel helps you inspect loaded source files and debug JavaScript.
4️⃣ Terminal
The terminal allows you to interact with your computer using commands rather than a graphical interface.
For example: mkdir my-project creates a folder.
You might also run commands such as:
• npm install
• npm run dev
Later, you'll use the terminal to:
• Create projects
• Install packages
• Run development servers
• Execute scripts
• Work with Git
• Build applications
• Deploy applications
You don't need to memorize commands now. We'll learn them gradually.
5️⃣ Package Manager
Modern web applications often use external libraries and packages.
