Uspacy Knowledge Base
All materialsTips for work

How to open browser console

How to open browser console

In this article, we explain how to open developer tools in Google Chrome, switch to the Console and Network tabs, and view Payload and Preview.

Sometimes our technical support specialists ask users to open the browser console to check page errors, review network requests, or clarify what data is sent and returned while the service is running. For this purpose, Google Chrome includes a built-in set of tools called Chrome DevTools.

In Chrome DevTools, you can quickly switch to the Console tab to see messages and errors, or to the Network tab to check page requests. Inside the Network tab, you can also open the Payload and Preview tabs if they are needed for diagnostics.

Where can you find it?

According to the official Google documentation, you can open Chrome DevTools in Google Chrome in several ways — using a keyboard shortcut, through the browser menu, or through the page’s context menu.

Method 1. Using the keyboard

💡 Keyboard shortcuts differ for Windows / Linux and Mac, so make sure you use the ones appropriate for your operating system.

  1. Open the required page in Google Chrome.
  2. Press F12 or Ctrl + Shift + I on Windows / Linux.
  3. If you are using a Mac, press Cmd + Option + I or Fn + F12.

☝🏻 The shortcuts listed above correspond to the official Chrome combinations for opening DevTools and Console.

Method 2. Using the browser menu

  1. Open Google Chrome.
  2. Click the three-dot menu in the upper-right corner.
  3. Go to More Tools.
  4. Select Developer Tools.
Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 15-57-51.png

After that, the Chrome DevTools window will open with the last tab you used previously.

Method 3. Using the page context menu

  1. Open the required page in Google Chrome.
  2. Right-click anywhere on the page.
  3. Select Inspect.
  4. After that, Chrome DevTools will open.
Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 16-01-29.png

How to open the Console tab

  1. Open Chrome DevTools using any convenient method.
  2. If the Console tab does not open automatically, click Console at the top of the DevTools window.
  3. Review the messages, warnings, or errors displayed on the page.
Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 16-02-50.png

💡 You can also open Console directly with a keyboard shortcut: Ctrl + Shift + J on Windows / Linux or Cmd + Option + J on Mac.

How to open the Network tab

  1. Open Chrome DevTools.
  2. In the top panel, click Network.
  3. After opening the tab, perform the action during which the issue occurs, or refresh the page.
  4. Wait for the requests to appear in the list.
Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 16-04-23.png

💡 In the Network tab, requests are recorded automatically while DevTools is open. If you open DevTools after the page has already loaded, some requests may not appear in the list, so it’s recommended to refresh the page again.

How to open the Payload and Preview tabs

1. Go to Network.

2. In the list of requests, click the request you need. On the right side of the window, open the Payload tab to view request parameters or form data.

Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 16-13-30.png

3. On the right side of the window, open the Payload tab to view request parameters or form data.

Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 16-13-09.png

4. Switch to the Preview tab to see a preview of the response.

Monosnap Uspacy — єдиний робочий простір для організації щоденних процесів компанії 2026-03-06 16-13-43.png

According to the Chrome documentation, Payload shows query string parameters and form data, while Preview displays a basic representation of the response content

To open the browser console in Google Chrome, simply launch Chrome DevTools using the menu or a keyboard shortcut. From there, you can switch to Console to review errors or to Network, and within a specific request open Payload and Preview for a more detailed inspection. These actions are the most commonly required when contacting technical support.

If you have additional questions or you need to contact the support, send a request to this email [email protected]

Created: March 11, 2026