Introduction

In a world full of cloud-based computing the need to understand how to view your web browser in order to examine HTML, network communications, and CSS is growing on a daily basis. This article is designed to provide an entry-level understanding of how to open your web browser's developer console with modern web browsers and giving you simple descriptions of the main web console tabs. Understanding these basics can help you obtain crucial information, which can lead to accelerated support ticket resolution times and a general sense of empowerment.

Accessing your Developer Console

First things first: How do you access your web browser’s developer console? The chart below contains instruction pertaining to the keyboard shortcuts you can use:

Additionally, right-clicking on a page in your web browser will provide a shortcut menu. In this menu, you’ll see either an inspect or inspect element. Selecting these options will open your web browser console as well. Once you’ve opened your web browser’s developer console, there are three tabs to focus on: Console, Elements, and Network. Refer to the corresponding sections below to learn more about each tab.

Console Tab

This tab is considered the foundation of your web browser’s developer tool. From here, you can view data that can help you debug issues with APIs, iFrames, HTTPS errors, SCORM CMI variables, and XAPI/TinCan parameters.

Hint: Errors will populate in red text. If you think that you’re experiencing an issue with a certain aspect of the platform, reviewing this area, obtaining the error code, and providing that error in support ticket is a great start to getting assistance from Docebo's help desk.

Elements Tab

This tab displays the Document Object Model (DOM) in its current state. If you’re using Microsoft Edge, you may need to refresh the page to view the DOM. This tab lets you temporarily edit and copy elements as well as momentarily alter HTML, add attributes, and more. If you're attempting to alter Cascading Style Sheets (CSS) in the platform, the Elements tab will help provide a clear depiction of your DOM edits before applying custom CSS to your platform.

Please Note: This tab is identified as the HTML tab in Firefox.

Network Tab

The network tab is designed to show the resources and files initialized in order to load the page you’re attempting to view. Generally, the developer tools need to already have been opened in order for the Network tab to provide information. If the tab wasn’t opened, you can simply refresh the page after accessing the Network tab.

Please Note: This tab is identified as Net in Firefox.

Now that you’re familiar with your web browser console, you’ve got one more tool to help you customize, improve, and troubleshoot your platform.