DevTools Is Not Just for Programmers
You've probably heard of "Developer Tools" (DevTools) and assumed it's something only programmers use. But the truth is, many DevTools features work without any coding knowledge.
Picture these scenarios:
- You open a website and the page is blank โ you want to know if the site is down or it's your network
- You fill out a form, click submit, and nothing happens โ you want to know if the button is broken or the server never got it
- You see a weird layout on a page โ you want to know if it's a browser issue or a bug in the site's code
DevTools can answer all of these. And you won't write a single line of code.
This article teaches you the simplest way to read the key info in DevTools and quickly pinpoint where a website problem lies.
Step 1: How to Open DevTools
Chrome / Edge
Three ways, pick the most comfortable:
F12 or Ctrl + Shift + I (Mac: Cmd + Option + I)
Firefox
F12 or Ctrl + Shift + I
Safari
First enable the Develop menu: Safari โ Preferences โ Advanced โ check "Show Develop menu in menu bar"
Cmd + Option + I
Once open, a panel appears at the bottom or right of the browser. Don't be intimidated by the dense tabs โ you only need to care about three of them.
You Only Need to Know 3 Tabs
DevTools has a dozen tabs, but non-developers only need these three:
| Tab | What it does | What you can use it for |
|---|---|---|
| Console | Shows the site's errors and warnings | Tell whether the site's code errored |
| Network | Shows all network requests | Tell whether images/APIs/resources failed to load |
| Elements | Shows the page's HTML and CSS | Inspect an element's styles and position |
Let's go through them one by one.
The Console Tab: Reading Red Error Messages
What Is the Console
The Console is the site's "black box." When the site's code errors, the browser logs it here. Think of it like a car's warning light โ you don't need to understand how the engine works, but you need to know which light is on.
Red = Error, Yellow = Warning
- ๐ด Red message: An error occurred, pay attention
- ๐ก Yellow message: A warning, possibly a problem but not fatal
- ๐ต Blue/white message: Ordinary log, safe to ignore
How to Read an Error Message
After opening the Console, you might see red text like this:
``
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at ProductList.jsx:47:18
`
Don't let the English scare you โ break it apart:
| Part | Meaning | What to focus on |
|---|---|---|
TypeError |
Type error | Error type |
Cannot read properties of undefined |
Tried to read data that doesn't exist | Problem description (just translate it) |
ProductList.jsx:47:18 |
Where it failed: filename line 47, column 18 | Tell the developer where to fix |
You don't need to understand what the error means. You only need to do one thing: screenshot or copy this red message and send it to the developer. That single line can save them 30 minutes of digging.
Common Error Types (Translated)
| English Error | Chinese Meaning | Possible Cause |
|---|---|---|
TypeError |
Type error | Wrong data format; code expected an object but got empty |
ReferenceError |
Reference error | Code used a variable or function that doesn't exist |
SyntaxError |
Syntax error | Wrong code syntax the browser can't parse |
RangeError |
Range error | A value exceeded the allowed range |
Network Error |
Network error | The request never reached the server |
404 Not Found |
Not found | The requested resource doesn't exist |
500 Internal Server Error |
Server internal error | A bug in the server's code |
The 5 Most Common Console Problems
1. Blank page + TypeError
Page loads blank, Console shows a red TypeError. Usually a JavaScript crash prevented rendering.
2. A feature doesn't respond + ReferenceError
Click a button, nothing happens, Console shows a red ReferenceError. Usually the related code didn't load correctly.
3. Data not showing + TypeError: Cannot read properties of undefined
A list or table area is empty, Console has this error. Usually the backend returned data in a format the frontend didn't expect.
4. Part of the page blank + 404 error
Some images or components don't show, Console has a 404. The resource path is wrong or the file was deleted.
5. Very slow load + lots of yellow warnings
Page loads slowly, Console has many yellow warnings. Possibly too many unnecessary resources loaded, or a performance issue.
The Network Tab: Spotting Failed Resource Loads
What Is Network
The Network tab records every network request the page makes while loading โ images, CSS, JavaScript, API endpoints, font files, everything fetched from the server.
How to Use It
)Color Coding
| Color | Meaning |
|---|---|
| Red | Request failed (4xx/5xx error) |
| Gray | Request blocked or canceled |
| Other colors | Request succeeded |
Focus: Status Codes
Every request has a status code โ the most direct clue to the problem:
| Status | Meaning | What you see |
|---|---|---|
| 200 | Success | All normal |
| 301/302 | Redirect | Bounced to another address |
| 400 | Bad request | Form data format wrong |
| 401 | Unauthorized | Needs login but isn't logged in |
| 403 | Forbidden | No permission for this resource |
| 404 | Not found | Image/page/API doesn't exist |
| 429 | Too many requests | Rate-limited, try later |
| 500 | Server internal error | A bug in the server code |
| 502 | Bad gateway | Server overloaded or under maintenance |
| 503 | Service unavailable | Server temporarily can't handle requests |
Walkthrough: Diagnose "image won't load" with Network
(images only)- 404 โ image path wrong or image deleted
- 500 โ server errored while processing the image request
- No corresponding request โ the image URL was never requested (likely a frontend code issue)
Walkthrough: Diagnose "form submit does nothing" with Network
The Elements Tab: Inspecting Element Styles
What Is Elements
The Elements tab shows the page's HTML structure and CSS styles. You can use it to inspect an element's attributes, styles, and position.
Most Useful Feature: Inspect Element
What Non-Developers Can Do With It
Check why an image displays wrong:
- Find the <img>
tag - Check the src
attribute โ is the image URL correct? - Check width
andheightโ are dimensions constrained?
Check why text is truncated:
- Find the text element
- Check the CSS overflow
property โ is it set tohidden? - Check white-space
andtext-overflowโ are they limiting line breaks?
Check why a button can't be clicked:
- Find the button element
- Check CSS z-index
โ is it covered by another element? - Check pointer-events
โ is clicking disabled? - Check display
andvisibilityโ is it hidden?
Note: Edits in Elements Are Temporary
Any style you change in the Elements tab reverts after a page refresh. It's only for debugging and won't actually change the website. Experiment freely โ you can't break anything.
5 Real-World Cases
Case 1: Blank Page
Symptom: Open the site, page is blank
Diagnosis:
Report to developer: "Page is blank, Console shows TypeError: Cannot read properties of undefined at app.js:23:5"
Case 2: Image Shows as Broken Icon
Symptom: An image on the page shows as a broken icon or empty area
Diagnosis:
attribute URLReport to developer: "Homepage banner image 404, URL is /images/hero-v2.png"
Case 3: Form Submit Does Nothing
Symptom: Fill out the form, click submit, no feedback
Diagnosis:
Report to developer: "Submit button click does nothing, Console shows ReferenceError: submitForm is not defined at checkout.js:15:3"
Case 4: Page Loads Very Slowly
Symptom: Opening the page takes 10+ seconds
Diagnosis:
Report to developer: "Page loads slow, product-hero.jpg (3MB) took 8s to load, recommend compressing"
Case 5: Mobile Layout Broken
Symptom: On mobile, buttons and text overlap
Diagnosis:
to switch to device-emulation modeReport to developer: "Mobile (375px width) buttons overlap, missing @media (max-width: 768px) layout adaptation"
Is There an Easier Way?
If opening DevTools, hunting for Console, finding Network, and copying error messages still feels like too much โ there's a simpler way.
BugCapturer can do all of this for you automatically.
When you screenshot and submit feedback with BugCapturer, it auto-collects:
- Console errors: up to 10 error-level logs (with filename and line number)
- Failed network requests: up to 5 requests with status โฅ 400 (with URL, method, status code)
- Technical environment info: URL, browser, OS, screen resolution, viewport size, DPR
You don't need to open DevTools, know where Console is, or manually copy error messages. Just:
All diagnostic info is attached to the email automatically. From spotting the problem to sending the report: 30 seconds.
Summary
DevTools' Console and Network are the most direct tools for diagnosing website problems. You don't need to code โ just:
If you don't want to manually operate DevTools every time, BugCapturer can auto-collect console errors and failed network requests, letting you submit feedback with complete diagnostics in the simplest way possible.
Ready to Report Website Issues More Efficiently?
Add BugCapturer to Chrome โ Free
Auto-collects console errors and failed network requests โ submit a professional-grade diagnostic report in 30 seconds.