Chrome Dev Tools: Tips & Tricks

The initial stage of programming is an essential part. Most individuals do not get past this level since they are overwhelmed by big blocks of code and complex tools and features. However, most of the seemingly complex features are usually the simplest to learn and execute, and Chrome Dev Tools fall into this category.

Though the term Chrome Dev Tools may appear daunting, it is not that complicated. Nevertheless, it is an important topic to be aware of if you want to become a competent web developer.

Let’s take a closer look at Chrome Dev Tools and how they’re used.

What Are Chrome Dev Tools?

Chrome Dev Tools, often known as Chrome Developer Tools, allow developers to modify web pages in a preview environment. Chrome Dev Tools are necessary for a developer to comprehend how a web page works.

Is Chrome Dev Tools Only for Developers to Use?

No, not at all. Anyone can use Chrome developer tools, even if they have no prior programming knowledge. Apart from developers, Chrome Dev Tools are mostly used by designers, SEO strategists, and marketers.

Before delving deeper into the Chrome Dev Tools, let’s get some insight into what you should know before attempting to use them.

• HTML, CSS, Javascript are known as the front-end languages. They are also the languages that are used by browsers. So, if you want to alter something on your website, you should do it in one of these programming languages.
• Changes are not permanent; the alterations made on the web pages are temporary. The changes won’t reflect anywhere else. If you refresh, the web page will turn back to normal.

The purpose of using Chrome Dev Tools is to test how the website appears and functions. 

How to Open Chrome Dev Tools?

Let’s begin by learning about the Chrome Dev Tools. To access the Chrome Dev Tools, right-click on a webpage and select “Inspect,” or press “Command+Option+C” on a Mac or “Control+Shift+C” on a Windows PC.  

Chrome Dev Tools should be open now, with numerous tabs at the top of the window. More tabs can be viewed by clicking “>>”. The Chrome Dev Tools window will have the following tabs:

• Elements
• Console
• Source
• Network
• Application
• Security
• Memory
• Performance
• Lighthouse

Frequently, the order is disordered. However, whenever you open the Chrome Dev Tools window, it will always open with the elements tab active.

Let’s have a closer look at what these tabs do:

• Elements
  The HTML and inline CSS codes are displayed in the elements tab. 
• Console
  In the console, Javascript codes are executed.
• Sources
  The sources tab displays the files that contain the codes.
• Network
  The network tab displays the files that are being loaded from the URL.
• Application
  The application tab displays the contents of your browser’s storage.
• Security
  Security provides standard security details, such as viewing a site’s HTTPS certificate and TLS status.
• Lighthouse
  Lighthouse generates reports on-site functioning and structure dynamically to assist developers in improving efficiency. 

With every new Chrome release, Developer Tools is enhanced. To check for updates, navigate to Components by typing chrome:/components into the bar, then select “Recovery” and look for new features.  

Tips and Tricks Using Chrome Dev Tools

So far, we’ve looked at how to access Chrome Dev Tools and briefly explained the overview of the tools. Now, let’s look at some cool things you can do with Chrome Dev Tools.

Don’t worry if you are not a programmer; the tips and tactics presented here do not necessitate advanced coding knowledge but rather a simple curiosity.

Here, we will look at some of these tips under the following headings:

1. Measuring and Optimizing the Speed of Web Page Using Lighthouse
2. Changing Designs  
3. Performing SEO Audits 
4. Checking the Security of the Web Page
5. Editing the Contents of the Website
6. Troubleshoot Issues Related to Ads Not Showing

Measuring and Optimizing the Speed of Web Page Using Lighthouse

When designing a website, both the design and the speed should be considered. Lighthouse is a handy tool that we will use to determine how quickly a website loads under normal circumstances and over various network connections.

When you click on the Lighthouse tab, you’ll see many options, including checkboxes. The options are as follows:

• Performance
• Progressive web apps
• Best Practices
• Accessibility
• SEO

You can check all the options to get all of the reports at once or click one at a time. 

To see how quickly a page loads, go-to Performance and then click “Generate report”.

A preview window surfaces, with a toggle toolbar at the top. You can alter the preview of the webpage on how it appears on different platforms such as iPad, mobile, and desktop by clicking this toolbar. This approach allows designers to assess how the website appears and make necessary improvements for a better display.

You’ll notice a “No throttling” tab in the same toolbar. This is the tab we will use to test the page speed. “No throttling” signifies that there is no speed disruption. Other alternatives include mid-tier mobile, low-end mobile, and offline.

Testing your website in different connections allows you to determine which components cause the delay in loading, allowing you to optimize the speed.

Indexes to keep in mind if the speed is high

• Fast – Between 0 and 4.3 seconds 
• Moderate – Between 4.4 and 5.8 
• Slow – Over 5.8 seconds 

If your page is slow, you will need to make some changes to enhance the page speed. To figure out which factors are causing the web page to load slowly, select “Opportunity,” which displays a list of the factors affecting your site’s performance.

Changing Designs  

Let’s have a look at the design phase now. If you’re a designer, you’re probably not going to be satisfied easily. When previewing the website, you may see design flaws such as font size, colour, or size. It’s perfectly natural. Going back to the source code and changing the styles each time and then executing it is not a fun task.

So why don’t we try another approach, one in which you can see the results while also making the necessary changes? For this, we will be using the elements tab.

• Navigate to the Elements tab by clicking on inspect.

• Hover your mouse over a sentence to select it. Take, for example, the title.

• You’ll discover another panel below the elements tab if you look closely. There will be a “Styles” tab in that window. This is the tab where you can find the CSS codes.

• If you want to change the colour, simply input your favourite colour in the colour line, and you will notice the difference in the blink of an eye.

• A colour pick tool with transparency options appears when you click the CSS colour attribute. You can use this to try out different hues that complement the accent of your web page.

• However, these alterations are not lasting and will not reflect the original code. Reload the page to return it to its original state.

Chrome Dev Tools are wonderful resources for designers who are constantly sceptical of their designs.

Performing SEO Audits 

When it comes to creating a website, SEO is essential. Whenever you search a term on Google, you will see several pages listed on the web page and several others in the consequent pages, which you probably won’t dare to look at. Have you ever wondered why only a few pages made it to the front of the search? The answer is SEO.

SEO is a factor that determines the relevancy of the websites to the searched keyword, which is why websites take SEO seriously. But how would you know the SEO rank of your website? By using Chrome Dev Tools, of course. 

Let’s use the lighthouse once more. We’d already seen the numerous possibilities mentioned under the lighthouse tab. SEO is one of them.

• Check the SEO box and then click generate a report to generate the SEO report.

• A detailed report will be generated detailing the improvements that can be implemented to enhance your website. 

Checking the Security of the Web Page

To assess whether the website is secure or not, you can look at the address bar. The presence of a padlock indicates that the website is secure. If there is a warning sign, it signifies that the website is not secure.

Do you know how websites’ security is determined?

An SSL or TLS certificate is present on every website. These certificates are the ones that determine the website’s security if the certificates are missing or expired; the browser flags the website as malicious.

To test the website’s security,

• Select the security panel.
• Then press Ctrl + R to reload the page.
• The information about the relevant certificate will be presented.

Editing the Contents of the Website

We already know that we can use the chrome developer tools to alter the content of the webpage. For instance, suppose you are a blogger who wants to publish a blog but is concerned about how it would appear. To alleviate your concerns, let’s use an existing blog.

• Navigate to the elements tab by clicking inspect on the webpage.
• Right-click the three dots in the element tab and select “Edit as HTML.”
• The codes in HTML code are colour-coded, and the text is usually black. Enter your content and watch the outcome.
• The changes will be undone after reloading.

You can change the headline and paragraphs in the same way. This task does not require you to be a blogger. You can do this for fun on any random website since the changes are solely for you.

Troubleshoot Issues Related to Ads Not Showing

We’ve already seen a variety of tricks that can be done with the help of Chrome Dev Tools. Let’s finish this article by learning one more trick that is by far the most significant, especially if you own your own website. 

Ads are essential for generating revenue from websites. So, you must monitor the performance of your advertisements. Let’s have a look at how Chrome Dev Tools can assist in resolving ad-related issues.

• Click inspect, or press Command+Option+C (Mac) or Control+Shift+C (Windows) (Windows).
• Navigate to the Network tab.
• Enter “ads?” In the “Filter” section.
• If you get:

• Ads?client – ad request was sent to the client
• No ad request – the ad wasn’t sent or blocked by the client
• Status “403” – indicates that the website has not been approved for advertising.
• Status “200” – indicates that you are experiencing difficulties with the deployment of ads.txt.

If you have correctly applied the AdSense code but the ads are still not appearing. There is also a solution to troubleshoot these problems.

• Click inspect once more.
• Navigate to the Console tab.
• If you come across

• ERR_BLOCKED_BY_CLIENT – it means the client was using an ad blocker.
• An adsbygoogle.js error – This is a common problem that happens when AdSense tries to post a responsive ad on your page, but there isn’t enough accessible space

Time to learning some coding basics

Are you interested in learning more about software development? If so, then it’s time to learn the basics with Code Institute’s free 5 Day Coding Challenge. All it takes is one hour a day over five days. By the end, you will have built your first ever web page. Register now through the form below. Alternatively, if you want to know more about our Full Stack Software Developer programme, follow this link.