How to Use Google Chrome Developers Console

How to Use Google Chrome Developers Console

Google Chrome developers console is used to perform a whole range of functions when creating your website. However the one we want to focus on today is the inspect element function. Used to view your websites pages on mobile and tablet formats. As well as varying screen sizes.

For this,firstly, you need to access Google Chrome.

1. Locating Google Chromes Developers Console :

You can easily access DevTools at any time through your Chrome browser. To get started, simply select the page that you wish to view. Then right click using your mouse to show more options. At the bottom of this list there will be an option to ‘Inspect.’ Alternatively you can hold down CTRL + SHIFT + I simultaneously on your keyboard and the developers console will appear in a pop up to the right of your page.

Locating Google Developer Console

2. Accessing Responsive View for Mobile and Tablet :

This can look somewhat intimidating with all the code on display. However don’t worry, as we won’t be accessing any of that today. Instead you’ll want to look for the button to the top left of DevTools console that has two rectangles overlapping. One looks like an ipad and the other a smartphone. This opens the toggle device toolbar option, allowing you to access a responsive view. Clicking on this option, your screen view will change from the normal desktop view.

Responsive View

3. Alternating Between Various Screen Sizes :

Now that you’ve accessed the responsive view toolbar, let’s navigate between the various screen size options. You can do this using the drop down at the top of the page. This option within the developers console allows you to view your screen in a multitude of different formats. From various different iPhone options, to android and iPad views. Allowing you to see how your website will appear for each particular website user.

The ones we tend to use most frequently are the iPhone 6/7/8 view. As well as iPhone X and iPad views. There’s also the option to view your screen size as responsive, using the dragger to manually adjust the size to view changes to screen dimensions.

Alternating Between Screen Sizes

On mobile views mentioned above the grey circle cursor acts as your finger would on a touch screen device. Allowing you to click to access menus and buttons to navigate around the various website pages as you would on a mobile device. You can also click on the flip phone button as demonstrated in the above screenshot,  allowing you to view the screen as landscape rather than portrait. The icon to click on is the one with the rectangle and alternating arrows.

4. Returning to Normal Desktop View :

When you’re ready to return to viewing the website as normal you can exit responsive view by clicking on the toggle toolbar option (with the ipad and smartphone icon.) Then to exit Google Chrome developers console, you can do so by clicking on the ‘X’ on your page to the right of the console. This will close the editor and return you to normal page view. Anytime you wish to return to DevTools, simply follow the steps outlined above.

Returning To Normal Desktop View

Leave a Reply