How to use the browser Console and Network tools to diagnose errors

The concepts are common to current browsers, although names and shortcuts vary:

• Firefox: Ctrl + Shift + K (Command + Option + K on macOS) opens the Web Console. Ctrl + Shift + E (Command + Option + E) opens Network.
• Chrome and Edge: Ctrl + Shift + J (Command + Option + J on macOS) opens the Console. You can also open the tools with F12 or Ctrl + Shift + I (Command + Option + I) and select Console or Network.
• Safari: enable Safari > Settings > Advanced > Show features for web developers. Then open Develop > Show Web Inspector or press Command + Option + I and select Console or Network.

The position and appearance of the tools may vary by version.

We will focus on two views: Console, for messages generated by the page and the browser, and Network, for HTTP requests and responses.

Console

Open the Console, clear previous messages and reproduce the failing action once. Start with the first error that appears when you perform that action and keep the full message, the file URL, the line and the stack trace when available.

Some common messages are:

• Uncaught TypeError or Uncaught ReferenceError: copy the full text, not just the error name. The path, line and stack trace let you locate the code that produced it.
• Mixed Content: note the HTTPS URL of the page, the HTTP URL of the resource and whether the browser says it blocked it.
• A message about blocking by the CORS policy: keep the origin, the destination URL and the full message, and find the same request in Network.
• Failed to load resource followed by a status such as 404, 403 or 500: find that request in Network to check its exact URL, response and status.

A warning, a message from an extension or a later error may not be the cause of the problem. Always relate the message to the action you have just reproduced.

The Console also lets you run JavaScript with access to the open page. Do not paste or run code you do not understand, and do not ignore a browser warning that blocks pasting.

Network

Network shows the HTTP requests made while the tools are open: the main document, images, JavaScript, stylesheets, fonts and API calls, among other resources.

Open Network before reproducing the problem, check that recording is active, clear the list and reload the page or perform the failing action once.

• If the whole page does not load, start with the Document request.
• If a button, form or save fails, check the Fetch/XHR requests generated when performing that action.
• Look for requests with a 4xx or 5xx status, (failed), (blocked:...) or no response. A cancelled request may be due to navigation and does not always represent a failure.
• Open the request and note the URL, method, status, time and the relevant content of Response. Check Initiator and Timing too when necessary.

An HTTP code confirms the result of that request, but does not by itself identify its cause. For example, a 500 confirms an internal failure, but you need to relate it to the PHP or server log at the same time.

Before copying a message or a response, replace any passwords, tokens, private addresses or other credentials that may appear.

Share a useful diagnosis

State the browser and its version, the URL, the time and the exact action. A screenshot should show the selected request or error and the detail that explains the failure; there is no need to include all your tabs or the desktop.

If you export a HAR file from Network, review it before sharing it: it may contain cookies, authorisation headers, parameters, forms and private responses. Use a sanitised export when available and still check its content. For payment or login issues, a test with dummy data is preferable to disclosing the real session.