No Ticket Needed

Appearance

4 min fix 4 min read Recently reviewedBeginner

By , IT support technician

Quick Answer

Press F12 or Ctrl+Shift+I to open Developer Tools. Use the Elements tab to inspect the page layout, or the Console tab to see if a script is broken and causing the page to freeze.

How to Use Browser Developer Tools Basics ​

Applies to: Microsoft Edge, Google Chrome
Article Type: How-To
Last Updated: 2026-03-09

Summary ​

Browser Developer Tools (DevTools) are built into Edge and Chrome, providing powerful utilities for troubleshooting web page issues — such as clearing a stuck page, checking for loading errors, and inspecting elements. While DevTools are primarily designed for developers, basic familiarity can help any user diagnose and resolve common browser issues. This article covers the essential features.

Prerequisites ​

  • Microsoft Edge or Google Chrome (latest version).
  • No admin rights required.

Instructions ​

1. Open Developer Tools ​

Access DevTools from any web page.

  1. Press F12 on your keyboard (or Ctrl+Shift+I).
  2. The DevTools panel opens at the bottom or side of the browser window.
  3. Alternatively, right-click anywhere on the page and select Inspect to open DevTools at a specific element.
  4. To close DevTools, press F12 again or click the X button in the DevTools panel.

2. Use the Console to Check for Errors ​

Identify page errors that may be causing issues.

  1. Open DevTools and click the Console tab.
  2. Look for messages highlighted in red — these are errors.
  3. Common error types you might see:
    • 404 Not Found — A resource (image, script, or file) could not be loaded.
    • CORS error — The page was blocked from loading a resource from another site.
    • JavaScript error — A script on the page failed to run properly.
  4. This information is useful when reporting issues to IT or a web application vendor.

3. Hard Refresh a Page (Clear Cache for One Site) ​

Force the browser to reload a page without using cached files.

  1. Open DevTools (F12).
  2. With DevTools open, right-click the browser Refresh button (circular arrow).
  3. Select Empty Cache and Hard Reload.
  4. The browser reloads the page from scratch, ignoring all cached files.
  5. This is useful when a web application appears stuck or shows outdated content.

4. Inspect an Element on the Page ​

Examine the structure of any element on a web page.

  1. Open DevTools and click the Elements tab.
  2. Click the Select element icon (cursor + box) in the top-left of the DevTools panel (or press Ctrl+Shift+C).
  3. Hover over any element on the page — it highlights with a blue overlay.
  4. Click the element to see its HTML code in the Elements panel.
  5. This is helpful when reporting UI issues (e.g., "the button with ID submit-form is not responding").

5. Check Network Requests ​

See what the page is loading and identify slow or failing requests.

  1. Open DevTools and click the Network tab.
  2. Reload the page (F5) to capture all network requests.
  3. The panel shows every file the page loaded (HTML, CSS, JavaScript, images, API calls).
  4. Look for entries highlighted in red — these are failed requests.
  5. Click any entry to see details (status code, response time, response body).
  6. Use the time column to identify slow-loading resources.

Troubleshooting ​

INFO

DevTools are a diagnostic tool — they do not change anything permanently on the web page. Any edits you make in the Elements panel are temporary and reset when you refresh the page.

Symptom / ErrorPotential CauseSolution
F12 does not open DevToolsKeyboard shortcut may be disabled by policyTry right-clicking on the page and selecting Inspect, or use Ctrl+Shift+I.
Console shows many errors but page works fineWarnings and non-critical errors are commonFocus on red Error messages. Orange Warning messages are usually informational.
Hard refresh did not fix the issueIssue is server-side, not cachedClear the full browser cache via Settings > Privacy > Clear browsing data and try again.