Using Browser Developer Tools

Introduction

Every web developer eventually encounters a website that does not behave
as expected. A button may fail, a layout may break, an image may not load,
or JavaScript may produce an error.

One of the most important tools for investigating these problems is the
browser's built-in Developer Tools.

Developer Tools allow developers to inspect the page directly inside the
browser and investigate what is happening.

1. What Are Browser Developer Tools?

Browser Developer Tools are a collection of tools built into modern web
browsers for inspecting, testing and debugging websites.

They allow developers to examine:

• HTML structure.
• CSS rules.
• JavaScript.
• Network requests.
• Images and other resources.
• Browser storage.
• Responsive layouts.
• Performance information.

2. Opening Developer Tools

Developer Tools can normally be opened by right-clicking a web page and
selecting Inspect.

Most modern browsers also provide keyboard shortcuts for opening the
tools.

The exact interface may differ slightly between browsers, but the major
development concepts are similar.

3. The Elements Panel

The Elements panel allows developers to inspect the HTML structure of a
web page.

For example:

<section class="hero">
	<h1>Learn Web Development</h1>
	<p>Build modern websites.</p>
</section>

The developer can select the section and examine its HTML structure.

4. Temporarily Editing HTML

Developer Tools allow developers to temporarily modify HTML in the browser.

A developer could change:

<h1>Learn Web Development</h1>

to another heading and immediately see the result.

These changes are normally temporary and are useful for testing and
debugging.

5. Inspecting CSS

When an element is selected in the Elements panel, the browser normally
displays the CSS rules affecting that element.

For example:

.hero h1 {
	font-size: 48px;
	margin-bottom: 20px;
}

The developer can examine which rules are active, overridden or inherited.

6. Testing CSS Changes

One of the most useful features of Developer Tools is the ability to
test CSS changes before editing the actual stylesheet.

A developer might temporarily change:

padding: 20px;

to:

padding: 40px;

The page immediately displays the new result.

If the result is correct, the developer can then make the corresponding
change in the actual source file.

7. Understanding CSS Overrides

Sometimes a developer writes a CSS rule but the browser does not appear
to apply it.

This can happen because another rule has greater specificity or because
the rule is overridden later in the stylesheet.

Developer Tools can show which rule is currently controlling an element
and which rules have been overridden.

8. The Console

The Console is one of the most important Developer Tools panels for
JavaScript development.

Developers can use:

console.log('Hello from JavaScript');

to display information in the Console.

The Console can also display warnings and errors generated by scripts.

9. Finding JavaScript Errors

Consider the following example:

const button = document.querySelector('#missingButton');

button.addEventListener('click', function () {
	console.log('Clicked');
});

If the expected element does not exist, the JavaScript code may fail when
it attempts to use it.

The Console can provide useful information about the problem, allowing
the developer to investigate the relevant line of code.

10. Testing DOM Selection

Developers can also test selectors directly in the Console.

document.querySelector('#courseTitle');

If the element exists, the browser can return the matching element.

This is particularly useful when debugging JavaScript that interacts
with page elements.

11. The Network Panel

The Network panel displays requests made by the web page.

These requests can include:

• HTML documents.
• CSS files.
• JavaScript files.
• Images.
• Fonts.
• API requests.
• Other resources.

If an image or JavaScript file fails to load, the Network panel can help
the developer identify the failed request.

12. HTTP Status Codes in Developer Tools

The Network panel can also display HTTP status codes returned by servers.

Examples include:

• 200: Request succeeded.
• 301/302: Redirect.
• 404: Resource not found.
• 500: Server-side error.

This information can help developers identify whether a problem is
related to the browser, resource URL or server.

13. Testing Responsive Design

Modern websites need to work across different screen sizes.

Developer Tools commonly provide a device or responsive mode that allows
developers to simulate different viewport sizes.

This makes it easier to test:

• Mobile layouts.
• Tablet layouts.
• Desktop layouts.
• Navigation menus.
• Responsive images.
• Buttons and forms.

14. Checking a Mobile Navigation Menu

Suppose a hamburger menu works on desktop but does not appear on a mobile
screen.

A developer can use responsive mode and then inspect:

• The menu button.
• The navigation element.
• CSS display properties.
• JavaScript event handlers.
• Console errors.

This allows the developer to investigate the problem systematically.

15. Sources and JavaScript Debugging

The Sources panel allows developers to inspect loaded source files and,
where appropriate, debug JavaScript.

Developers can use breakpoints to pause execution and inspect what is
happening in a script.

This becomes particularly useful in larger applications where a problem
cannot easily be identified by reading the code alone.

16. Inspecting Computed Styles

The browser can calculate the final style applied to an element after
all relevant CSS rules have been considered.

The computed style information helps developers understand the actual
values being used by the browser.

17. Browser Storage

Modern websites may store information in browser storage mechanisms.
Developer Tools can provide access to areas such as local storage and
session storage.

For example, JavaScript can use:

localStorage.setItem(
	'theme',
	'dark'
);

A developer can inspect the stored value using the browser's
application or storage tools.

18. A Systematic Debugging Method

When something goes wrong, avoid changing several things at once.
Instead:

1. Identify the problem.
2. Reproduce the problem.
3. Inspect the affected element or resource.
4. Check the Console for errors.
5. Check the Network panel when resources are involved.
6. Test possible causes.
7. Apply the correct source-code fix.
8. Test the solution again.

19. Important Reminder

Changes made directly inside Developer Tools are generally temporary.
They are excellent for testing an idea, but they do not replace editing
the actual project files.

Once a solution has been identified, the developer should make the
corresponding change in the source code and test the website again.

20. Practical Exercise

Create a simple page containing a heading, paragraph and button.

Use Developer Tools to:

1. Inspect the HTML.
2. Change the heading text temporarily.
3. Change the heading size using CSS.
4. Open the Console.
5. Run a simple JavaScript expression.
6. Inspect the page's CSS.
7. Open the Network panel.
8. Test the page using a mobile viewport.

Conclusion

Browser Developer Tools are an essential part of professional web
development. They provide developers with a practical way to inspect,
test and troubleshoot websites.

Students who become comfortable with Developer Tools will be better
equipped to diagnose problems instead of relying on guesswork.