PART II · FRONTEND & BROWSER

Developer Tools

Built-in browser tools used to inspect, debug, and understand web pages.

01 · What is it?

Developer Tools are built into modern browsers.

They help you inspect page structure, styles, JavaScript, network requests, storage, logs, and errors.

Simple Definition: Developer Tools let you see what is happening inside a web page.

02 · Think of it like...

Think of Developer Tools as an inspection panel for a web page.

The normal browser view shows the result.

Developer Tools show how that result is built and what the page is doing.

Web Page
Developer Tools
Inspect What Is Happening

03 · What does it do?

Developer Tools can help you inspect:

HTML

CSS

JavaScript Errors

Network Requests

API Responses

Browser Storage

04 · Where is it used?

Developer Tools are commonly used when:

A page layout looks wrong
A button does not work
An API request fails
Data is missing
A JavaScript error occurs
A browser value needs to be checked

05 · Example

A Save Button Does Not Work

Developer Tools
User clicks Save
  → Nothing happens
  → Open Developer Tools
  → Check Console
  → Check Network
  → Find the problem

Developer Tools help identify which layer may be failing.

06 · How it connects

Use a simple 4-part inspection map:

ElementsHTML / CSS
ConsoleJavaScript / Errors
NetworkHTTP / API
ApplicationCookies / Local Storage

Different Developer Tools panels help inspect different parts of the frontend system.

07 · Do Not Confuse

Developer Tools

Inspect the web page while it is running in the browser.

≠
Source Code Editor

Used to create and edit the project files.

Developer Tools= Inspect Runtime
Code Editor= Edit Source Code

08 · Topic Glossary

English Term中文Simple English中文小白理解
Developer Tools浏览器开发者工具Browser tools used to inspect and debug web pages.用来查看和调试网页结构、请求、日志和错误的浏览器工具。
Elements Panel元素面板A panel used to inspect HTML and CSS.用来查看网页 HTML 结构和 CSS 样式的面板。
Console控制台A panel used to view JavaScript messages and errors.用来查看 JavaScript 日志、错误和调试信息的面板。
Network Panel网络面板A panel used to inspect web requests and responses.用来查看网页请求、API 和响应信息的面板。
Application PanelApplication 面板A panel used to inspect browser storage and related data.用来查看 Cookie、Local Storage 等浏览器数据的面板。
Request请求A message sent from the browser to another system.浏览器发送给服务器或 API 的请求。
Response响应Data returned after a request.请求处理后返回的数据或结果。
Console Error控制台错误An error message shown in the browser console.浏览器 Console 中显示的程序错误信息。
DOM文档对象模型The live page structure shown in the Elements panel.Elements 面板中可以查看和操作的页面对象结构。
Inspect检查Looking at the details of a page element or request.查看页面元素、请求或运行信息的详细内容。

09 · What to Remember

Developer Tools help you inspect a running web page.

Elements shows HTML and CSS.

Console shows JavaScript messages and errors.

Network shows requests and responses.

Page Problem→Developer Tools→Inspect→Find the Layer
↑