Complete Web Designing Course for Beginners

🔍 Lesson F8 – Browser Developer Tools

🛠️ Inspect, Debug, and Understand Websites Like a Professional Developer

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand what Browser Developer Tools are

✅ Open Developer Tools in different ways

✅ Inspect website elements

✅ View HTML and CSS of any webpage

✅ Debug website problems

✅ Test responsive designs

✅ Understand Console and Network tabs

✅ Use Developer Tools like professional web developers

📖 Introduction

Imagine you are learning how a car works.

One way is reading books.

A better way is opening the car and looking inside.

The same concept applies to websites.

When you visit a website like:

Google
YouTube
Amazon
Facebook

you only see the final output.

But as a web designer, you must understand:

How the website is built
What HTML is being used
Which CSS styles are applied
How buttons work
Why some errors occur

For this purpose, web browsers provide a powerful tool called:

🔍 Browser Developer Tools

Every professional web developer uses Developer Tools daily.

🤔 What Are Browser Developer Tools?

Browser Developer Tools are built-in tools available inside modern web browsers.

They help developers:

✅ View website code

✅ Inspect elements

✅ Debug problems

✅ Test responsiveness

✅ Monitor website performance

✅ Analyze network activity

🌍 Browsers That Provide Developer Tools

Most modern browsers include Developer Tools.

Examples:

Google Chrome

Microsoft Edge

Mozilla Firefox

Opera

Brave Browser

In this course, we will mainly use:

🌐 Google Chrome

💡 Why Developer Tools Are Important

Imagine creating a website.

Suddenly:

❌ Color is not working

❌ Image is not appearing

❌ Button is broken

❌ Layout is damaged

Without Developer Tools, finding problems becomes difficult.

Developer Tools help identify and solve issues quickly.

🚀 How to Open Developer Tools

There are multiple methods.

Method 1 – Keyboard Shortcut

Press:

F12

Developer Tools will open.

Method 2 – Right Click

Right-click anywhere on a webpage.

Select:

Inspect

Developer Tools will open.

Method 3 – Chrome Menu

Click:

Three Dots
→ More Tools
→ Developer Tools

🎯 First Look at Developer Tools

When Developer Tools open, you will see multiple tabs.

Examples:

Elements
Console
Sources
Network
Performance
Application

At first, this may look complicated.

Don’t worry.

We will learn each section one by one.

🏗️ Elements Tab

The Elements Tab is one of the most important tools.

It allows us to inspect:

HTML
CSS

of any webpage.

🎯 Purpose of Elements Tab

Using Elements Tab you can:

✅ View webpage structure

✅ View HTML code

✅ View CSS styles

✅ Modify content temporarily

📝 Example

Open:

www.google.com

Press:

F12

Open:

Elements Tab

You will see HTML code behind Google’s homepage.

🔍 Inspect Tool

One of the coolest features is:

Element Selector Tool

Its icon looks like:

Mouse Pointer Inside a Box

Located at the top-left of Developer Tools.

How It Works

Click the Inspect Tool.

Move your mouse over webpage elements.

Examples:

Logo
Buttons
Images
Text

The browser highlights selected elements.

You can instantly see:

HTML Code
CSS Properties

used for that element.

💡 Practical Example

Inspect:

Google Search Button

You can see:

HTML Element
CSS Styles
Width
Height
Colors

This is extremely useful for learning web design.

🎨 Viewing CSS Styles

When selecting an element:

The right panel shows CSS properties.

Example:

color: blue;

font-size: 20px;

background-color: white;

This helps understand how websites are styled.

⚡ Editing HTML Live

Developer Tools allow temporary changes.

Example:

Suppose webpage contains:

<h1>Welcome</h1>

You can change it to:

<h1>Hello Students</h1>

and see changes instantly.

⚠️ Important

Changes made in Developer Tools are temporary.

After refreshing the page:

Everything returns to normal.

No permanent changes occur.

🎨 Editing CSS Live

You can also change CSS.

Example:

Original:

color: black;

Change to:

color: red;

The webpage updates instantly.

Why Is This Useful?

Developers can test:

Colors
Layouts
Fonts

before modifying actual files.

📜 Console Tab

Another important tab is:

Console

The Console is used to:

✅ Display errors

✅ Run JavaScript

✅ Test code

Example

Open Console.

Type:

alert("Hello Students");

Press Enter.

A popup appears.

🎯 Why Developers Use Console

Console helps:

Find errors
Test JavaScript
Debug websites

Professional developers use it every day.

❌ Error Messages

Suppose your JavaScript contains an error.

Console displays messages like:

ReferenceError

SyntaxError

These messages help identify problems.

🌐 Network Tab

The Network Tab shows everything a website loads.

Examples:

HTML Files
CSS Files
JavaScript Files
Images
Videos

What Happens When a Website Opens?

When you visit:

www.youtube.com

the browser loads hundreds of files.

Network Tab shows all these files.

Why Network Tab Is Useful

Developers use it to:

✅ Analyze website speed

✅ Identify missing files

✅ Monitor requests

📱 Device Toolbar (Responsive Testing)

One of the most important tools for web designers.

What Is Responsive Design?

A responsive website works properly on:

Mobile
Tablet
Laptop
Desktop

Opening Device Toolbar

Press:

Ctrl + Shift + M

or click:

Toggle Device Toolbar

What Can You Do?

You can simulate:

iPhone

Samsung Mobile

Tablet

Laptop

Why Is This Important?

Today most users visit websites using smartphones.

A web designer must ensure websites work on all screen sizes.

Example

Create a website.

Open Device Toolbar.

Check:

Mobile View
Tablet View
Desktop View

This helps identify layout problems.

🏆 Real Life Example

Suppose your website menu looks perfect on a laptop.

But on mobile:

❌ Text overlaps

❌ Buttons disappear

❌ Images break

Developer Tools help find and fix these issues.

🔎 Sources Tab

The Sources Tab displays website files.

Examples:

HTML Files
CSS Files
JavaScript Files

Developers use this tab for advanced debugging.

As beginners, you only need basic awareness.

⚙️ Application Tab

Application Tab shows:

Cookies
Storage
Website Data

Mostly used by advanced developers.

📊 Performance Tab

Used to analyze:

Website Speed
Loading Performance
Optimization

Professional developers use it for improving user experience.

🌟 Benefits of Developer Tools

Developer Tools help you:

✅ Learn from existing websites

✅ Inspect HTML

✅ View CSS

✅ Debug errors

✅ Test responsiveness

✅ Improve coding skills

⚠️ Common Beginner Mistakes

❌ Thinking Changes Are Permanent

Developer Tool changes disappear after refresh.

❌ Ignoring Console Errors

Always check Console when debugging.

❌ Not Testing Mobile Layouts

Modern websites must be mobile-friendly.

❌ Being Afraid of Developer Tools

Every professional developer started as a beginner.

Explore and experiment.

📝 Practical Activity

Activity F8

Visit:

Google
YouTube
Amazon

For each website:

Open Developer Tools
Open Elements Tab
Inspect a button
Inspect an image
View CSS styles
Open Console
Open Device Toolbar

Write your observations.

📋 Assignment

Assignment F8

Answer the following:

What are Browser Developer Tools?
Which key opens Developer Tools?
What is the purpose of the Elements Tab?
What is the purpose of the Console?
What is the purpose of the Network Tab?
Why is responsive testing important?
Can Developer Tools permanently modify a website?

🧠 Quiz

Q1. Which key opens Developer Tools?

A. F1

B. F5

C. F12

D. F10

✅ Answer: C

Q2. Which tab displays HTML and CSS?

A. Network

B. Elements

C. Console

D. Sources

✅ Answer: B

Q3. Which tab displays JavaScript errors?

A. Console

B. Network

C. Elements

D. Performance

✅ Answer: A

Q4. Which feature helps test mobile screens?

A. Network

B. Elements

C. Device Toolbar

D. Sources

✅ Answer: C

Q5. Are changes made in Developer Tools permanent?

A. Yes

B. No

✅ Answer: B

📌 Lesson Summary

✅ Browser Developer Tools are built into modern web browsers.

✅ They help developers inspect, debug, and analyze websites.

✅ Elements Tab is used to inspect HTML and CSS.

✅ Console is used to test JavaScript and view errors.

✅ Network Tab shows files loaded by a website.

✅ Device Toolbar helps test responsive designs.

✅ Developer Tools are one of the most important tools for web designers and developers.