Home | 5 Handy Google Console Tricks

5 Handy Google Console Tricks

  • News
web paste website with google console open

For those who haven’t used Chrome Console much before, these Chrome Console Tricks help the average chrome user access a bit more functionality that can be useful for website owners analyse their sites and competitors’ sites.

How to open the Chrome console

The conventional means of accessing the Chrome DevTools is to click on the Customize and Control Google Chrome button (the three vertical dots at the top right corner of the Chrome browser menu bar), scroll down to more tools, and select the developer tools.

Keyboard shortcut: Ctrl + Shift + I for Windows and Cmd + Options + I for Macintosh.

Alternatively, you can access the Chrome console by right-clicking on any element on a website and selecting the Inspect Element option.

The Chrome console panel would appear by the side or bottom of the browser window if you use any of the methods mentioned above. You can unlock the chrome console panel into a separate window or change the dock position by clicking on the Customize and control Devtools button (the three vertical dots at the top right corner of the DevTools panel) and selecting your preferred position beside the Dock side option.

1. Simulate mobile devices

One of the most important aspects of website testing is to ascertain how responsive your page designs are and their breaking points with respect to different devices. You can use the chrome DevTools to test media queries or find out the resolution at which a website would break so you can set where to apply a media query by simulating different mobile devices.

To access the Chrome console device mode, where you can simulate different mobile devices, click on the toggle device toolbar (the small phone and tablet icon) at the top left corner of the Chrome console panel. This would change the website window to the responsive mode.

Keyboard shortcut: Ctrl + Shift + M (Cmd + Shift + M).

A set of tools that would appear in the website window would allow you to choose the devices and resolution you want to simulate and as well as add mobile devices not available on the list.

2. Inspect network activity

Using the Chrome console, you can inspect the network activity of a website to ensure that all resources are being downloaded and uploaded accurately. And also to inspect the properties of each resource, such as image size, content, HTTP headers, etc.

Click the network tab on the DevTools window. This will open the network panel with an empty log because the tool only logs network activity while it’s open. Press Ctrl + R (Cmd +R) or reload the website to view your page network log activity.

3. Take a screenshot of an entire page

A. Open the command menu by pressing Control + Shift + P or Command + Shift + P (Mac) when the chrome developer tool is open.

B. Type ‘screenshot’ in the search box and select “Capture full-size screenshot” from the result.

It will take a screenshot of the entire page no matter how long the page is.

Full Page Screenshot

4. Edit Any Website Text On The Fly

Now here comes a cool trick that lets you edit any text displayed on the website. This trick avoids the need of selecting the element and editing it in the elements panel. To do this,

A. Goto any website.
B. Execute the below code in your console to make the site editable
document.designMode = ‘on’

C. Now click on any heading or text from the website and you can directly start typing and changing the text displayed.

To turn off the editing, execute
document.designMode = ‘off’

Lighthouse powers the Audits panel of Chrome DevTools. To run a report:

A. Open Chrome DevTools.

B. Click the Audits tab.

The Audits panel of Chrome DevTools
Figure 1. To the left is the viewport of the page that will be audited. To the right is the Audits panel of Chrome DevTools, which is now powered by Lighthouse

C. Click Perform an audit. DevTools shows you a list of audit categories. Leave them all enabled.

D. Click Run audit. After 30 to 60 seconds, Lighthouse gives you a report on the page.

A Lighthouse report in Chrome DevTools

If you are noticing errors in google console when loading your site or need any help, feel free to get in touch and we can point you in the right direction.