Accessing the Browser Console and Network Logs

Apr 11, 2019

154627

When you're reporting an issue to HappyFox support, we may ask for a screenshot of your Web Browser's Console and/or Network Logs to troubleshoot the problem thoroughly 🛠.

Console/Network Logs often contain important error details essential to identify the root cause of the issue/bug that you're facing inside HappyFox.

This article describes how you can access these logs in popular web browsers like:

Google Chrome:

Console Logs in Chrome:

In Google Chrome, the Console Logs are available as a part of Chrome Dev Tools.

To open the dedicated Console panel, either:

Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac).

You can also access this Console panel from the Chrome Menu:

Locate and Click the "Three dots Menu bar" on the top right of your chrome browser.
Go to More tools >> Developer Tools.
Switch to Console Tab.

In the Console Tab, you can find the current error messages (Displayed in Red) along with other console level information such as warnings and info.

Tip 💡: If your bug/issue involves movement across multiple pages of the app, it is recommended to "Preserve Log". This helps to persist the error messages.

Network Logs in Chrome:

In general, Network panel is used when you need to make sure that resources are being downloaded or uploaded as expected. Open DevTools by pressing Control+Shift+I or Command+Option+I (Mac). Refresh the contents of the webpage.

Alert❗️: It is important to open the Network Tab before performing any action that results in an issue. This is done to properly preserve the network traffic data, one among which could be the error. Alternatively, Reload the page to start getting the logs.

Finding the Error: Scroll through the network logs to find entries with "Red" font, such as the one below:

Click on the error to find the error details. Navigate across Header, Preview and Response tabs to know more about the error and its origin. Header tab may contain critical information related to the error. Please check with your designated support representative to know which information to share.

Mozilla FireFox:

Console logs in FireFox

In Mozilla FireFox, the Console Logs are available as a part of FireFox developer tools.

To open the Web Console:

either select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)
or press the Ctrl+Shift+K (Command+Option+K on OS X) keyboard shortcut.

Network Logs in FireFox:

Opening the Network Monitor:

Press Ctrl + Shift + E ( Command + Option + E on a Mac).
Select "Network" from the Web Developer menu, (which is a submenu of the Tools menu on OS X and Linux).
Click the wrench icon, which is in the main toolbar or under the Hamburger menu, then select "Network".

Finding the Error: Scroll through the network logs to find entries with "Pink" font, such as the one below:

Click on the error to find the error details. Navigate across Header, Params and Response tabs to know more about the error and its origin. Header tab may contain critical information related to the error. Please check with your designated support representative to know which information to share.

Safari:

In Safari Browser, console and network logs are available as a part of "Develop Menu". By default, these options are disabled. To enable "Develop Menu",

Launch "Safari".
Go to Safari >> Preferences >> Advanced (From the header).
Enable "Show Develop Menu in Menu Bar".

Console logs in Safari:

Post enabling "Develop Menu", go to the desired webpage and click Develop >> Show Javascript Console.

Network Logs in Safari:

Opening the Network Log:

Open Safari JavaScript Console.
Switch to "Network Tab".
Refresh the webpage.
Errors are displayed in "Red" font. Clicking on the error would open the details area. You can find critical error information in the header and Preview tabs.

Tags