How to Open and Use Developer Console in Different Browsers (Chrome, Firefox, Safari, etc.)

What is a developer console?

Developer Console is an embedded development environment with a set of instruments that you can use to build, debug, and test applications right in your browser. It records (or logs) the info associated with a web page, such as network requests, HTML, CSS, JavaScript, warnings and errors. The screenshots of warnings in the Developer Console can be extremely helpful for the Elfsight support team if they are resolving the issue you are having with our widgets.

How to Open Console in Different Browsers

It only takes a few clicks to open the console in whatever browser you are employing, and you can also start it by using shortcuts or hotkeys. In the guide below you will find brief instructions on how to open the console and screenshots of the process.

How to open Chrome developer console

To open console in Google Chrome, you’ll need to click the three-dots icon in the upper-right-hand corner of the browser window, click More tools where you’ll find Developer Tools in a drop-down list. 

How to Open Chrome developer console

One more option is to use Chrome dev tools hotkey: F12 (on Windows/Linux), and Option + ⌘ + J (on macOS).

You’ll see console either at the bottom or on the right of the Chrome page. Select the Console option and start examining your code performance.

Further, you’ll get acquainted with the process of opening developer tools in different browsers.

Open Opera Developer Tools

You can use Opera console to examine, edit, and debug HTML, CSS, and JavaScript. To work with it, you’ll need to use the following shortcut: Ctrl+Shift+C to open Developer Tools Console or Ctrl+Shift+I to first open developer tools and further select Console.

Open Opera developer console

Start Firefox web console

Mozilla console can be initiated by clicking Web Developer in a top-right-hand menu, then, by choosing Browser Console. Also, you may use a Firefox developer tools shortcut, that is Ctrl+Shift+J.

How to open Firefox developer console

Enable developer tools in Safari

Before accessing the developer console in Safari, you need to enable the Developer Menu. To do that, go to Safari’s preferences (Safari Menu > Preferences) and choose the Advanced Tab.

How to open Safari developer console

Further, you will open console in Safari by clicking on Develop > Show Javascript Console. You can also benefit from the shortcut Option + ⌘ + C. The console tab will open automatically, you will not have to choose it.

Open Microsoft Edge console

You may open the Edge browser console by clicking on F12 Developer Tools in the dropdown menu, or by pressing F12. You can also right-click on any element of the web page and select Inspect Element.

How to open Microsoft Edge developer console

Open Internet Explorer console

The IE development console can be opened in the same way as the Edge console. Click on F12 Developer Tools in the dropdown menu or just press the F12 key.

Note: the Elfsight team no longer supports IE because it does not meet modern web standards.

The main tabs in Developer Tools

Below is a brief overview of the major console tabs located among Developer Tools. We’ve reviewed them all on the example of Google Chrome web browser.

Elements tab

The Elements panel is a great tool for those who want to examine CSS and HTML performance of their web page. You may right-click any element of the page, choose Inspect Element, and see the element’s attributes highlighted in the code.

Elements tab in Google Chrome

Console

The Console tab serves to display the working of scripts on the web page. It is an interpreter of command lines which you can use to start a script engine and enter commands to perform the scripts. If our support team are asking you to take a screenshot of your console, they’ll need a picture made in this tab.

Console tab in Google Chrome

Sources panel

You can utilize the Sources tab in Chrome DevTools to edit JavaScript and CSS, view files, create JavaScript snippets and use them further. Also, this tab may help in debugging JavaScript code.

Sources tab in Google Chrome

Network tab

The Network pane may be used as a testing tool, which inspects web page performance and recognizes issues that are slowing down the website. The Network tab in Chrome starts recording all network requests once you open DevTools. You can sort them further by different properties.

Network panel in Google Chrome

Performance tab

The Performance pane allows you to record the runtime and load performances over time. This panel reveals how well the website acts once it is fully loaded and used by visitors. You can choose to record the performance or take a series of screenshots of the process.

Performance tab in Google Chrome

Memory tab

One can use the Chrome Memory tab to diagnose and fix memory issues such as bloating, garbage collection, leaks. All of these problems affect page performance. If these issues are not resolved, your website will become slow and unappealing to visitors.

Memory tab in Google Chrome

Application panel

With the help of the Application tab you can debug Progressive web apps; inspect and manage storage, databases, and caches; inspect and delete Cookies; and inspect Resources.

Application tab in Google Chrome

Security

The Security tab can be useful if you want to debug mixed content issues and certificate issues. The website is believed to be insecure when the URL you visited has been requested over HTTP. According to modern web requirements, this should be done via HTTPS protocol. If you see that the page contains mixed content, this means they are partially protected and are vulnerable to sniffers.

Security panel in Google Chrome

Lighthouse tab

Lighthouse is an automated instrument for improving the quality of web apps. It is directly integrated into Chrome DevTools. It offers performance audits, accessibility, progressive web apps, SEO and more.

Lighthouse tab in Google Chrome

Typical console warnings and errors in the work of Elfsight widgets

Sometimes something goes wrong in the work of Elsfight widgets. Don’t be afraid if you see any red colored warnings or errors in the console. If you know the reason why they happened, you can probably fix everything yourself. Below, you’ll find a list of common failures you may see in the console.

These are two errors regarding all our widgets:

WIDGET IS BLOCKED – you have blocked the website domain in your Elfsight account if the error is referred to apps.elfsight.com.

WIDGET NOT FOUND – you might have accidentally deleted the widget in the account. Check it.

See, it’s no big deal. Now, we’ll discuss some errors in the work of particular widgets and integrations.

Google Maps common problems

As for the Google Maps, errors usually occur if something goes wrong with the API key.

ExpiredKeyMapError – the API key has expired or isn’t recognized. In most cases you should generate the new one. If you get this error just after creating a new API key, you’ll need either to wait from 1 to 8 minutes or to separately enable the Places API.

ExpiredKeyMapError

RefererNotAllowedMapError – Elfsight URL loading the Maps JavaScript API hasn’t been allowed to be a referrer. You should check the referrer settings of your API key in the Google Cloud Platform Console. While using our widget, you’ll need to add us as referrer. Here’s an article how to do this correctly.

ClientBillingNotEnabledMapError – For using Google maps widget, you’ll need to have a Billing account. This failure happened because you didn’t activate billing on your project. The solution is to enable billing on the Google Cloud Project associated to this client ID. You may do it here.

BillingNotEnabledMapError – Using Google Maps, you’ll need to enable billing.

YouTube Gallery failures in console

If you use Elfsight YouTube Video Gallery, you will not have to bother about most of the issues listed below. However, there are two general problems that can occur in our widget, too.

quotaExceeded – YouTube uses quotas for people to reach its content and fetch it to websites or applications. Once YouTube quota exceeded, you’ll notice that your YouTube Gallery accidentally stops working or works slowly on the website. The solution may be the following:

  • Get a new API key if you are fetching YouTube content yourself;
  • Contact our support team at support@elfsight.com if you are using Elfsight YouTube Gallery, which is much easier.

videoNotFound – This warning can occur if the URL you inserted to link to the YouTube video is incorrect. Sometimes users paste a link to the page with the video in it, but it is not the actual location of the video, resulting in the error. Check everything and paste the link to the original video.

Facebook Feed and Instagram Feed Errors

If either Facebook Feed or Instagram has stopped working, you can examine what’s happening in Developer Console. Because both of these popular applications work on the basis of Facebook API, the following explanations of errors may work equally for each of two.

err_ssl_protocol_error when using Facebook or Instagram Feed widget on your website may be caused by various reasons. To resolve it, you can try to set a correct date and time, clear Chrome browsing data or clear your SSL state. Also, if the Facebook Graph API throws errors, you can use the fbtrace_id to find out more info about them. However, if nothing of the above helped, you can always reach out our support team. 

rest_cannot_access – usually means that a third-party widget like the Password Protect plugin is preventing our widget from working properly. Disabling such a service will do a trick for you.

The page you requested cannot be displayed right now – this may mean your Facebook application is in development mode. You will not get this error message if you are an Elfsight Facebook Feed user, however, if you see this message, contact our support team.

OAuthException on Instagram in particular means that the login status or access token has been revoked, expired, or is invalid for some reason. In this case, contact our support team, Elfsight developers will get a new access token or look through a subcode, if any.

The most common console errors

Being an experienced web developer, you’ve probably seen these errors more than you wish to. They can be seen in Chrome when you read a property or call a method on an undefined object. You can test try and catch these particular errors in the Chrome and Safari Developer Console.

If you are not a professional programmer, you may omit this guideline.

Uncaught TypeError: Cannot read property

This can happen for many reasons, but the most common is improper state initialization when rendering UI components. This is easy to fix. The simplest way: Initialize state with reasonable default values in the constructor.

TypeError: ‘undefined’ is not an object

This is an error that occurs in Safari when you read a property or call a method on an undefined object. You can test this in the Safari Developer Console. It is practically the same as the above error for Chrome, but Safari uses a different error message.

(unknown): Script error

If you see this error, you should first of all get the real message. You can get it by doing the following: set the Access-Control-Allow-Origin header to * means that the resource can be accessed correctly from any domain. You can replace * with your domain if necessary: for example, Access-Control-Allow-Origin: www.example.org. However, managing multiple domains becomes tricky and may not be worth it if you are using a CDN due to caching issues that can arise.

Conclusion

Developer Console is a great instrument which allows every programmer to get access to tons of data about their website. It’s not very difficult to get open it and start using this tool, however, it will take some time and effort, just be patient.

What errors have you ever come across with? Share your experience in the comments below, we’ll be happy to discuss it with you!

The post How to Open and Use Developer Console in Different Browsers (Chrome, Firefox, Safari, etc.) appeared first on Elfsight.

Read More Tutorials, Guide

Leave a Reply

Your email address will not be published. Required fields are marked *