Browser DevTools Troubleshooting: Fix 80% of Web Access Issues with F12

1. Types of Access Anomalies

When a system runs normally, any of the following conditions in the browser indicates an access anomaly that can be investigated via the page:

Page cannot open : Entering the system address shows "This site can't be reached", "Page load failed", endless spinner, or long timeout.

Page displays abnormally : Page loads but text overlaps, images missing, buttons misaligned, layout broken, styles lost.

Function operation abnormal : Page displays correctly but button clicks do nothing, input fields reject input, form submission fails, or no feedback after action.

Error prompt abnormal : Explicit error messages appear (e.g., "404 Not Found", "500 Internal Server Error") or browser console shows errors.

Data abnormal : Page opens and responds but shows empty, incorrect, or incomplete data (e.g., partial list, chart without data).

Note : If all websites are unreachable, check local network (WiFi, cable) first; this is not a system access anomaly.

2. Core Browser Troubleshooting Tool: F12 Developer Tools (Universal Operations)

Works in Chrome, Edge, 360, etc. Three ways to open:

Keyboard shortcut: Press F12 (some laptops require Fn+F12).

Mouse: Right-click blank page area, select "Inspect" or "Inspect Element".

Browser menu: Click three-dot menu → More tools → Developer tools.

Dock position can be changed via the three-dot menu in the top-right of the devtools window.

Four core panels are used, focusing on the first three in "easy to hard" order:

2.1 Network Panel: Diagnose Interface and Resource Loading Issues

Most used panel. Shows all loaded resources (images, styles, scripts, APIs) and their request status to quickly identify "what failed to load and why".

Steps:

Open devtools, switch to Network panel.

Click refresh button (or press F5) to reload all resources.

Check request list's Status (HTTP code) and Type; focus on red-marked (failed) requests.

Key Status Code Interpretation: 404: Requested resource (page, API, image) does not exist; likely wrong URL. 500/502/503/504: Server-side exception; API error or service not started. 403/401: Insufficient permissions; current user lacks access rights. 200: Request succeeded but data empty/wrong; check API response payload.

Red exclamation (no status code) : Network interruption, cross-origin restriction, or browser-blocked request.

Additional Operations:

View Request/Response : Click any request to see Request (params) and Response (payload) to determine if parameters are wrong or response data is abnormal.

Filter Request Types : Use right-side filters (e.g., XHR, CSS, JS, Img) to focus on specific resource types.

2.2 Console Panel: Diagnose Script and Logic Errors

Displays all script errors, warnings, and API exception messages; quickly locates frontend code issues (JS errors, undefined variables).

Steps:

Open devtools, switch to Console panel.

Review panel content; red "Error" entries are critical, yellow "Warning" can be deferred.

Click filename+line number after error to jump to offending frontend code (for technical staff).

Common Console Errors & Meanings: Uncaught ReferenceError: XXX is not defined: Variable XXX undefined; frontend logic error.

Access to XMLHttpRequest at XXX from origin XXX has been blocked by CORS policy

: Cross-origin restriction; API missing CORS headers. Failed to load resource: net::ERR_CONNECTION_REFUSED: Server not running, or API address wrong, cannot connect.

2.3 Elements Panel: Diagnose Page Display Anomalies

Used when layout broken, styles missing, elements not visible. Shows HTML structure and CSS styles visually.

Steps:

Open devtools, switch to Elements panel.

Click "Select element" icon (top-left), then click the problematic element on page (misaligned button, missing image).

Right side shows element's CSS styles; check for display: none (hidden), abnormal margin/padding (layout shift), missing background-image (image not showing).

Temporarily modify CSS values (double-click to edit) to see real-time page changes; changes only persist until refresh.

2.4 Application Panel: Diagnose Cache and Storage Anomalies

Used when page loads abnormally or data doesn't update; may be browser cache issue.

Common Operations:

Clear cache : Application → Cache → Clear storage, check all options, click "Clear site data".

View/Delete Cookies : Application → Cookies; inspect current system cookies; if abnormal (expired, wrong), right-click delete, then refresh.

3. Common Access Anomalies & Browser Troubleshooting Solutions (Key)

Combining the tools above, specific steps and fixes for daily frequent scenarios; non-technical roles can execute.

Scenario 1: Page Cannot Open, Shows "This site can't be reached"

Troubleshooting Steps:

Confirm network normal (open Baidu, Tencent, or internal sites; if those fail, check WiFi/cable/firewall).

Open devtools → Network panel, refresh, observe request status.

If all requests red with no status code, showing ERR_CONNECTION_REFUSED: likely system server not started or address wrong (e.g., wrong port). Contact ops/dev to start service or verify address.

Solutions:

Verify system access address (IP, port) for typos.

Contact ops/dev to confirm server running.

For locally deployed systems, check local services (Tomcat, Nginx) are started.

Scenario 2: Page Opens but Layout Broken, Styles Missing

Troubleshooting Steps:

Open devtools → Elements panel, select broken element.

Inspect right-side CSS: check display, margin, padding, width, height for anomalies (e.g., display: none, excessive margin).

Switch to Network panel, filter Type "Stylesheet", check for 404 status (stylesheet failed to load).

Solutions:

If stylesheet 404: contact dev to confirm stylesheet path correct or file not missing.

If CSS abnormal: non-tech can refresh/clear cache (Application panel); tech can locate CSS code and fix values.

If browser compatibility issue (Edge works, Chrome fails), switch browser (recommend latest Chrome/Edge).

Scenario 3: Page Error "404 Not Found"

Troubleshooting Steps:

Open Network panel, find red 404 request, view Request URL.

Verify request address correct (path spelling, missing/extra chars, port).

Distinguish 404 type: if Type "Document" → page address wrong; if Type "XHR" → API address wrong.

Solutions:

Correct page/API address spelling, port.

If address correct, contact dev to confirm page/API not deleted, migrated, or path changed.

Clear browser cache, refresh (avoid cached old wrong address).

Scenario 4: Page Error "500 Internal Server Error"

Troubleshooting Steps:

Open Network panel, find red 500 request, view Response for specific error details.

Open Console panel for additional error info.

500 is server-side; frontend cannot fix directly. Record error details and escalate to tech.

Solutions:

Non-tech: Screenshot Network 500 request (Request URL, Response) and Console errors; send to dev with reproduction steps.

Tech: Use Response and Console errors to locate server code issue (API logic error, DB connection failure), fix, restart service.

Scenario 5: Function Operation Abnormal (Button Unclickable, Form Submit Fails)

Troubleshooting Steps:

Open Console panel, check for red JS errors (undefined variable, function call failure); if present, locate error code.

Open Elements panel, select unclickable button, check CSS for pointer-events: none (disables clicks) or element overlay blocking.

Open Network panel, click button/submit form, observe if XHR request fires; if none, frontend didn't trigger API call; if request exists, check status code (200 expected).

Solutions:

JS errors: tech fixes code; non-tech escalates.

Button disabled/blocked: temporarily modify CSS in Elements panel (remove pointer-events: none, adjust z-index of overlay).

API not triggered: verify button click event binding, or form validation not passed (required fields empty).

API request fails (non-200): apply Scenario 3/4 methods.

Scenario 6: Cross-Origin Access Abnormal (Console Shows CORS Policy)

Troubleshooting Steps:

Open Console, confirm error contains "CORS policy".

Open Network, find red request, compare Request URL (API address) with page address; confirm domain/port mismatch (triggers CORS).

Solutions:

Non-tech: Report CORS error to dev; ask them to configure CORS headers on API.

Tech: Configure CORS server-side (Nginx Access-Control-Allow-Origin, or code-level CORS annotations); for local dev, use browser plugin to disable CORS temporarily (testing only).

Scenario 7: Data Display Abnormal (Empty, Wrong, Incomplete)

Troubleshooting Steps:

Open Network panel, find data-fetching API (Type "XHR", name often contains "list", "get", "data").

Click API, view Response payload; determine if API returns empty/wrong data, or frontend fails to render correctly.

If Response empty/wrong → server-side issue; if Response normal but page abnormal → frontend rendering issue.

Solutions:

API returns abnormal: escalate to dev to check API logic, DB query.

Frontend rendering abnormal: tech checks frontend code for data binding errors, loop rendering issues; non-tech can refresh/clear cache.

4. Universal Browser Troubleshooting Tips (Must Read)

Clear cache first : Many anomalies (style broken, data stale, address errors) stem from cache. Before troubleshooting, clear cache (F12 → Application → Clear storage).

Refresh method : Normal refresh (F5) uses cache; hard refresh (Ctrl+F5) ignores cache and reloads all resources. Prefer hard refresh during troubleshooting.

Switch browser test : If anomaly in one browser, try latest Chrome/Edge to rule out compatibility.

Screenshot evidence : Capture Network abnormal requests, Console errors, Elements anomalies; share with tech for faster root-cause.

Distinguish frontend vs backend : If Network all 200, Console clean, but page/operation abnormal → frontend issue. If 404/500 or API response abnormal → backend issue.

5. Final Reminders

Browser troubleshooting targets "access-type anomalies". If entire backend service down or DB dead, must use command line on server; browser can't cover that.

CSS/JS edits in devtools only affect current page; refresh restores original. Experiment freely without fear.

Non-tech staff need not deep-dive code; focus on error messages and request status, screenshot accurately for tech—they'll understand instantly.

Regularly clear browser cache; prevents many weird issues (style chaos, data not updating).

Summary : Browser troubleshooting boils down to: identify anomaly type, use corresponding panel to find cause. Start with simple checks (cache, address, resource loading); escalate to tech for code/API issues. Master these and you'll resolve 80%+ of system access anomalies yourself, boosting efficiency and reducing tech interruptions.