Tech News Today
  • Hardware
    • Motherboards
    • CPUs
    • Graphic Cards
    • RAM
    • SSDs
    • Computer Cases
    • Monitors
    • Peripherals
    • Power Supply Unit
    • PC Builds
    • Computer Tips
  • Software
  • Operating System
    • Windows
    • Mac
    • Linux
  • Gaming
  • Mobile
  • Console
  • More
    • Internet
    • Networking
    • Security
    • Buyer’s Guide
    • Gadgets
    • Laptops
    • Reviews
    • How To
    • News
Facebook Twitter Instagram
Tech News Today
  • Hardware
    • Motherboards
    • CPUs
    • Graphic Cards
    • RAM
    • SSDs
    • Computer Cases
    • Monitors
    • Peripherals
    • Power Supply Unit
    • PC Builds
    • Computer Tips
  • Software
  • Operating System
    • Windows
    • Mac
    • Linux
  • Gaming
  • Mobile
  • Console
  • More
    • Internet
    • Networking
    • Security
    • Buyer’s Guide
    • Gadgets
    • Laptops
    • Reviews
    • How To
    • News
Tech News Today
Home»Internet»How to Open and Use Chrome Developer Tools

How to Open and Use Chrome Developer Tools

Bishwo TamliBy Bishwo TamliFebruary 14, 2023
how to open chrome developer tools

The Chrome Developer Tools is a set of web-building toolkits that are directly built into the Chrome browser. It is a front-end developer toolkit mainly used for debugging, editing, and optimizing web pages.

If you’re a website owner or developer, Chrome Developer Tools offers various functions you can use to optimize your website for better user experience, test device compatibility, and improve SEO ranking. 

So, even if you have little to no programming knowledge as a website owner or a budding developer, it is pretty good to learn the basic use of Chrome Developer Tools. First, we’ll show how you can access the Developer Tools in Chrome.

Table of Contents

  • Using keyboard Shortcuts
  • Using Chrome User Interface
  • How to Use Chrome Developer Tools?
    • View Your Website on Different Devices
    • Check Page Load Speed and Network Requests
    • Analyze Your Website SEO

Using keyboard Shortcuts

The easiest way to open Developer Tools in Chrome is by using the keyboard shortcuts. You can simply press the Ctrl + Shift + C hotkey to directly open the Elements tab in Developer Tools. The Elements tab will show the attributes and CSS of all the elements present on the webpage.

ctrl shift c

If you’re trying to run Javascript or check the log and error messages of a webpage, you might want to open the Console tab in Developer Tools. You can use the Ctrl + Shift + J shortcut key to go directly to the Console tab. 

Lastly, you can either use the Ctrl + Shift + I or the F12 key to open the last active tab in Developer Tools. For MacOS, the shortcut keys are roughly the same, and you only need to swap out the Ctrl key with the Command key and the Shift key with the Option key to perform the equivalent shortcut.

Using Chrome User Interface

Another way you can open Developer Tools in Chrome is from the user interface itself. If you want to inspect the attributes of any element in Developer Tools, you can simply right-click it and select Inspect. It will directly open the Elements tab and lead you to the corresponding element attributes.

inspect elements in chrome

You can also go to the Chrome menu in the top right, select More tools, and click on Developer tools to open it. This will lead you to the last active tab in your Developer Tools.

How to Use Chrome Developer Tools?

You can use Chrome Developer Tools for a variety of purposes like inspecting and editing a page’s HTML elements, debugging your code, viewing log files, and also measuring a webpage’s performance.

However, any changes you make in Chrome Developer Tools are only temporary and only affect the client side. As soon as you reload the webpage, the changes should revert back. Nonetheless, these temporary changes are still very useful for further optimizing a website. 

While you are certainly expected to have a little programming knowledge to use Chrome Developer Tools, you can still get some basic use out of it with no programming knowledge.

Before we begin, let’s get you a basic rundown of the few key tabs in Developer Tools.

  • Elements tab: It lets you view and edit the HTML and CSS source code of the webpage.
  • Console tab: It lets you run Javascript to interact with the webpage you’re viewing, and it also displays information about the interactive elements of a webpage.
  • Source tab: It shows you all the source files used to make that particular web page and their file directory.
  • Network tab: It lets you view all the network requests of a webpage that is needed to load it.
  • Security tab: It shows a basic security overview of the webpage you’re viewing.
  • Performance tab: It lets you record a page load process and analyze it to check your website performance.

View Your Website on Different Devices

Using the Chrome Developer Tools, you can view how your website looks on different devices. While your website may look beautiful on desktop devices, it may not look as good on the smaller screens of smartphones.

So, you can test with different devices to see how your website will look with each of them, and you can use this information to optimize your website for them.

  1. Open Developer Tools.
  2. Click on the smartphone and tablet icon beside the Elements tab. (You can also use the Ctrl + Shift + M shortcut to directly switch to smartphone or tablet viewing.)
    chrome developer tools mobile view
  3. Click on the Dimensions Responsive drop-down menu to select from any of the preset devices. (This will directly show how your website will look on that device.)
    chrome developer tool mobile view choosing device
  4. You can also leave it as Responsive, and set custom dimensions to replicate a particular smartphone’s display.

Check Page Load Speed and Network Requests

You can also check how fast your webpage loads from the Chrome Developer Tools. Website load speed is a crucial thing, as it massively affects website traffic and SEO ranking. Nobody likes waiting for a slow website to load, and it is essential you know how long your website needs to load and why.

  1. Open Developer Tools.
  2. Go to the Network tab.
    network tab in chrome developers tools
  3. Click on the Reload button to refresh your page.
  4. You can see your website load speed at the bottom right in the three parameters, Finish, DOMContentLoaded, and Load.
    • DOMContentLoad: It will show how long it took to load the HTML code for your webpage.
    • Load: It shows the amount of time needed for the web page to fully load.
    • Finish: It shows when all the HTML code, elements, and other stuff are fully done.
      page load speed in chrome dev tools
  5. You can also see the total network requests from the webpage and the resources used.
  6. Additionally, you can also check your load speed together with the above method to see your web page load speed on different devices.
  7. You can also choose from No throttling, Mid-tier mobile, or Low-end mobile to see the load speed in different performance phones.
    website on different tier phones

Analyze Your Website SEO

You can also check if your website is following basic search engine optimization (SEO) advice from the Lighthouse tab in Chrome Developer Tools. While it only performs a basic level SEO check, you can still find useful tips to make your website rank higher in search engine results or make sure your website is following all basic SEO guidelines.

  1. Open Developer Tools.
  2. Click on the two right arrows icon beside the tab menu and select Lighthouse.
    chrome dev tools tab lighthouse
  3. Select the Mode to be Navigation (Default), and choose which Device to conduct the test for.
  4. From Categories, select SEO and uncheck the rest.
    analyze seo report chrome dev tools lighthouse
  5. Click on Analyze page load.
  6. It should take about 30 seconds for your SEO results to load.

Additionally, you can perform just about any test from the different categories present in the Lighthouse report like Performance or Best practices.

Lastly, if you want a full guide from basic to advanced levels of utilizing Chrome Developer Tools, you can go to Chrome’s own DevTools Documentation.

how-to
Bishwo Tamli

I'm a tech enthusiast, and I've always been troubleshooting errors by myself for years. I also like keeping up to date with the latest technology and gadgets.

Related Posts

chat gpt not working

Chat GPT Not Working? 6 Ways to Fix It

May 10, 2023
How to stop buffering while streaming

How to Stop Buffering While Streaming? 10 Best Ways

May 5, 2023
how-to-send-large-files-via-email

How to Send Large Files via Email? 3 Easy Ways

May 2, 2023
youtube app not working

YouTube App Not Working? How to Fix It

April 26, 2023
right click disabled

6 Ways to Enable a Disabled Right Click on Website

April 17, 2023
error code 1020

What is Error 1020: Access Denied? How to Fix it

April 11, 2023
Add A Comment

Leave A Reply Cancel Reply

Latest Posts
what is port 443

Port 443: Everything You Need to Know About It

May 18, 2023
Best-1200W-PSU

8 Best 1200W PSUs for Extreme PC Builds in 2023

May 16, 2023
Best-1000W-PSU

10 Best 1000W PSUs in 2023

May 16, 2023
You may also like
how-to-get-sand-out-of-charging-port

How to Get Sand Out of Charging Port

May 23, 2023
how-to-unpause-printer

How to Unpause Printer

May 23, 2023
convert to dynamic disk

How to Convert to Dynamic Disk

May 22, 2023
Recommended
Cookie Clicker Garden Guide

Cookie Clicker Garden Guide to Unlocking Every Seed

September 26, 2021
monitor no signal

Computer Turns On But Monitor Says No Signal (9 Ways To Fix)

November 10, 2022
Facebook Twitter Pinterest
  • Home
  • About Us
  • Our Team
  • Editorial Guidelines
  • Privacy Policy
  • Affiliate Disclosure
© 2023 TechNewsToday, editor@technewstoday.com | Tech Central Pvt. Ltd.

Type above and press Enter to search. Press Esc to cancel.