Chrome DevTools helps you inspect what a page displays, what it stores and what it sends. You can find useful evidence without changing the application code.

On this practical guide
Open DevToolsInspect the pageConsoleNetworkStorageResponsiveQA workflowLinks

Open DevTools

Use the shortcut that takes you directly to the panel you need.

ActionWindows / LinuxmacOS
Open the last used panelF12 or Ctrl + Shift + ICmd + Option + I
Select an elementCtrl + Shift + CCmd + Option + C
Open the ConsoleCtrl + Shift + JCmd + Option + J
Open the Command MenuCtrl + Shift + PCmd + Shift + P
Fastest option: right-click the element you want to investigate and select Inspect.

Inspect the page

Use the Elements panel for visible UI problems.

Inspect text and attributes

Confirm labels, IDs, classes, ARIA attributes, links and image alternative text.

Check applied CSS

Use the Styles tab. Untick a rule or edit a value to test a possible fix.

Check size and spacing

Use the box model in Computed to inspect margin, border, padding, width and height.

Force an element state

Use :hov to test hover, focus, active and visited styles.

Useful element checks

  • Is the element present but hidden?
  • Is another element covering it?
  • Is a button disabled?
  • Does a field have the correct label and attributes?
  • Does text overflow or become clipped?
  • Does the focus style appear?
Remember: changes made in Elements are temporary. Reloading the page normally removes them.

Check Console errors

Use the Console to find JavaScript errors, warnings and failed resources.

  1. Open Console.
  2. Clear existing messages.
  3. Reproduce the issue.
  4. Look for new red errors.
  5. Expand the error and save the message, file and line number.

Useful commands

// Find the first matching element document.querySelector('[data-testid="save"]') // Find every matching element document.querySelectorAll('button') // Read local storage localStorage // Read cookies available to JavaScript document.cookie // Inspect the element currently selected in Elements $0
Evidence tip: enable Preserve log when an error disappears after navigation or page reload.

Debug Network requests

Use the Network panel when data is missing, an action fails or a page loads slowly.

  1. Open Network.
  2. Enable Preserve log if the flow changes pages.
  3. Clear the request list.
  4. Reproduce the issue.
  5. Filter by Fetch/XHR for API calls.
  6. Select the relevant request.
Tab / fieldWhat to check
StatusWas the response successful? Look for 4xx and 5xx responses.
HeadersURL, method, query parameters, request headers and response headers.
PayloadWas the correct data sent?
Preview / ResponseDid the server return the expected body and error details?
TimingWhich part of the request took the most time?
InitiatorWhich script or action triggered the request?

Practical network tests

  • Choose a throttling profile to test a slow connection.
  • Select Offline to check offline and recovery behaviour.
  • Right-click a request and block its URL to test a missing dependency.
  • Right-click and copy a request as cURL when you need to share or replay it.
  • Export a HAR file when the full request history is useful evidence. Review it first because it may contain sensitive data.

Inspect browser storage

Use the Application panel to inspect cookies, local storage, session storage, IndexedDB and cache storage.

Test session behaviour

Check whether authentication cookies appear, change and disappear at the correct time.

Test saved preferences

Edit or remove local storage values, then reload the page.

Test a clean state

Use Clear storage to remove site data and repeat the flow as a new user.

Check cookie rules

Review expiry, domain, path, Secure, HttpOnly and SameSite values.

Safety: do not include session tokens, cookies or personal data in screenshots and bug reports.

Test responsive behaviour

Open the device toolbar from DevTools and test the page at different sizes.

  • Use responsive mode instead of checking only named devices.
  • Drag the viewport slowly to find layout breakpoints.
  • Test portrait and landscape.
  • Check menus, modals, tables, forms and fixed elements.
  • Look for horizontal scrolling, clipped content and small touch targets.
  • Test zoom separately in the normal browser window.
Limitation: device mode simulates a mobile experience. It does not replace testing on a real device.

Accessibility and performance

Accessibility

  • Select an element and open the Accessibility section in Elements.
  • Check its computed role and accessible name.
  • Use Lighthouse for a quick automated accessibility scan.
  • Still test keyboard navigation and a screen reader manually.

Performance

  • Start with Network and check large or slow resources.
  • Use Lighthouse for a quick page-quality report.
  • Use Performance when you need to record a slow interaction or rendering problem.
  • Repeat measurements to avoid judging a page from one run.

Quick QA workflow

  1. Open DevTools before reproducing the issue.
  2. Clear Console and Network. Enable Preserve log when needed.
  3. Reproduce the issue once. Avoid adding unrelated actions.
  4. Inspect the visible element. Check DOM, state and CSS.
  5. Check Console. Record relevant new errors.
  6. Check Network. Inspect failed or unexpected requests.
  7. Check storage. Confirm the expected user and session state.
  8. Capture evidence. Include the minimum details needed to reproduce and understand the failure.
A useful bug report may include: screenshot or video, Console error, request URL and method, status code, safe request/response details, environment, browser version and exact reproduction steps.

Useful tools and links