Need help? Chat now!

Hostwinds Blog

Search results for:


A Few Pointers for the Google Chrome DevTools Novice Featured Image

A Few Pointers for the Google Chrome DevTools Novice

by: Hostwinds Team  /  August 31, 2019


What is there to say about Google at the present moment? Most facts about Google have already been, well, Googled by many. Consequently, a decent chunk of the information about Google has already circulated the world many times over by now.

Don't worry, we'll spare you the random Google facts like, for instance, how it was initially called "BackRub." Alternately, we will examine something about Google, or rather the Google Chrome browser, that is a little less well-known: The free coding tools embedded into Chrome's essence.

We are referring to what is known as Google Chrome Developer Tools. These tools allow anyone to test, debug, or troubleshoot all of the code amounting to a website. Chrome DevTools, as they are commonly called, are a fantastic resource for software developers.

You might be surprised how much one can accomplish using these free utilities. Today, we will go over just a few of the perks these Google Chrome Developer Tools have to offer.

Please NOTE: This is a very condensed summary and doesn't cover everything. We won't even scratch the surface regarding the myriad of options you have available to you while using Chrome DevTools.

Okay, folks, although this will be a very brief summary, we've still got a lot of ground to cover. Let's begin by opening up a Google Chrome window and opening up our Chrome DevTools!

How to Open Google Chrome DevTools

First and foremost, let's get this out of the way: Google Chrome DevTools is utterly terrific. This is true for many reasons, one being how easy these tools are to access.

The following represents the various ways you can open Chrome DevTools:

Your First Option: Click the vertical ellipses on the far right of your browser >> Click "More tools" >> Click "Developer tools."

Your Second Option: Right-click on the page >> Click the "Inspect" element

Your Third Option, Hotkeys Edition: Type "CTRL" + "Shift" + "I" on your keyboard

(For Macintosh: "CMD" + "OPT" + "I")

Bonus Fourth Option, Hotkeys Edition: Type F12 on your keyboard.

Hooray! We are in business, friends!

Now, before we begin our tutorial, are you by any chance aware that Chrome DevTools was briefly discussed in a previous Hostwinds blog post about WordPress child themes?

If not, today is your lucky day! We have the links to Part 1 and 2 of our WordPress child theme blog series right here:

WordPress Child Themes & Why to Use Them

Hostwinds How-To's: How to Make a WordPress Child Theme

Note: We will explore the Chrome DevTools by moving from the very leftmost panel at the top of the window to the very rightmost panel.

Getting Started with Chrome DevTools

Let's get a move on, team. No time for corny dad jokes or puns today!

Wait, we spoke too soon! We always make time for corny dad jokes and puns. Nevertheless, allow us to direct your attention to the cursor icon on the top left-hand corner of your DevTools window.

Cursor Icon

Seeing as the cursor icon was brought up in that WordPress child theme blog series we keep bringing up, why mince words when we can pull up that quote?

"[…] if you right-click on any web page, click "Inspect," then click the little cursor icon on the very left-hand corner of the Developer Tools, you can click on any element on your page to see what chunk of code created it."

P.S. That is an excerpt from Part 2 of the WordPress child theme blog series.

What's that? We are plugging that WordPress blog series entirely too much at this point? We'll do our best to tone it back moving forward… but no promises. I was just kidding! We're just silly.

In Example 1, we are using the cursor icon to find the code responsible for "MY BLOG." We are changing the text to "MY TOUR!"

In Example 2, we use the cursor icon to find the code responsible for "Hello world!" We are changing the text to "Hi world!"

Onto the next! To the right, we go.

Device Mode

The device mode icon enables you to see how your site will function on various devices.

Once you click the "Responsive" drop-down menu, you can click, for example, "iPad" or "iPhone X" to see what your site will look like on an iPad or iPhone X, respectively. Is your website responsive on all devices? This tool will give you the answer.

Understanding Chome DevTools Panels

Onto the main event!

Wait, first shameless plugs:

Are you new to software development? If so, here are a few Hostwinds blog posts that will help get you started with a bit of HTML and CSS information:

Hostwinds HTML Hype

Hostwinds HTML Hype Part 2: Tag Talk

Hostwinds CSS Chat

"Elements" panel, here we come!

Elements

Under the Elements tab, go ahead and hover over any line of code. Do you see the corresponding sheer blue box that appears around both the line of code and the element on the page affected by that line of code? That is the beauty of this panel. You can identify what chunk of code affects what. The HTML we see here is called the 'source code.'

Within the Elements panel, we can change or edit our HTML or CSS. The best part is this: We can see the changes as if they were live on our site. To state that differently, after you alter the code and push enter, your browser will immediately simulate the result of that change as if it was live on your site.

Check out the "Styles" panel that opens up when you click on the Elements panel. This section displays the CSS that complements your site's collective HTML. Edit/modify CSS properties here (in the same way you did your HTML) in order to see how that change will appear live on the site.

While we are in the Styles panel, please scroll down to the very bottom. Notice the Russian dolls of sorts in the form of different colored rectangles.

These rectangles represent something about each of your elements, as outlined below:

Sheer Blue Rectangle = The element itself

Sheer Green Rectangle = The padding around the element

Sheer Yellow Rectangle = The element's border size

Sheer Orange Rectangle = The margin surrounding the element

As an experiment, go ahead and click on the cursor icon again and hover over various areas on your page. Notice how the sheer colors surrounding multiple parts of your site correspond with the colors of the rectangles that we just talked about.

Now click the ":hov" icon on the navigation bar at the top of your Styles panel. Here you have a shortcut that lets you immediately add a "Focus," "Hover," etc., effect to the CSS selector(s) of your choice.

If we look to the right of Elements, we will see "Console."

Console

The "Console" section enables you to type in Javascript commands to test them out. Once again, your browser will display the hypothetical result of that command as if it were live.

What a relief to have the option to test out your JavaScript functions without altering your actual site in any way! The Console section is also helpful when you debug your code. If something on your site isn't functioning correctly, this panel provides diagnostics about what might potentially be the issue. Beyond that, possible fixes for the issue are displayed here.

Tip to Further Your Knowledge of this Important Panel: Look up the "console.log()" and "time()" functions.

Here we go again, moving to the right. Hello, "Sources" panel!

Sources

"Sources" helps you scan for bugs in JavaScript and subsequently make changes to your JS as well as your CSS. This section allows you to set breakpoints to pinpoint exactly where the bug occurred. You can also conveniently navigate through your site files here.

Now that we've cleaned up all the buggies in our code let's review our site's loading time information by clicking the "Network" tab.

Network

"Network" generates a detailed analysis as to how well your web pages are loading. To be more specific, this area gives you statistics about every individual element's loading time, one by one.

It is called "Network" because when you consider how long it takes for each element to load, you can figure out what is causing a network issue should one arise.

Please move with us to the right and click "Performance."

Performance

Your Performance panel displays a summary of your website's runtime performance, including rendering and scripting information. To that end, some definitions seem to be in order here.

Definition of Rendering: When your site "renders," it shows your viewer the front-end result of all the information that was put together (including code, items in a database, etc.) to make your web page. How fast your site renders information is evaluated in the Performance panel.

Definition of Scripting: Scripting is when you make something automatic via some code or function. For example, say you make it, so your hypothetical blogging website automatically logs when you published each blog post. A scripting language would do the "scripting" that would make this process automatic, thereby relieving you of manually displaying the time you published each blog post yourself.

If you click the "record" button, you will receive an overview of your memory, document number, etc.

What's next, you ask? Even more explanation of DevTools tabs! Onto "Memory."

Furthering Our Understanding of DevTools Panels

The "Memory" section is where it gets exciting and interactive.

Memory

This panel can help you detect potential memory issues. It shows you how much every component of your site is taking up memory. You can view the memory on your website with the blue "Take a Snapshot" button.

What's that? You are eager to know what the next panel does, so you want to move on to the right? You got it. To the right, we go!

Application

This panel is all about storage. Namely, how much storage is being used up by your databases, applications, cookies, etc. Is your site bogged down and running slow because you are storing too much? This panel will help you with these kinds of questions.

To the right of that, we have "Security."

Security

As you may have guessed, this section provides you with an assessment of the level of security currently established for your website. In other words, it gives you information about how secure your site is at this time. For instance, this panel will alert you if your site's URL lacks the "S" in "HTTPS."

We're almost done! Now we will audit our website's functionality.

Audits

The "Audits" area represents an audit of pages and applications on your website. This audit will let you know if your web pages are loading correctly. The Audits panel is helpful for SEO purposes and for checking your site's overall performance.

If you look to the very right of the window, you will see a sideways ellipses icon. Click that to view even more tools! On that note, there is so much more you can do with Chrome DevTools, yet we are out of time today. Thus, that is about it for our quick tutorial.

Surprise! We Saved the Corny Jokes Until the End Just for You

The time has come for us to conclude, our dear friends. Here is the best way to sum up this blog piece: Google Chrome Developer Tools are magical! Wait, is there anything else to add?

*Thinking… Thinking… Thinking*

Oh, yes! We promised you corny dad jokes and puns, so guess what? You're getting a corny dad joke and a pun right here, folks! We never make empty promises here at Hostwinds.

Corny Dad Joke and Pun All in One: Congratulations on completing our Chrome DevTools tutorial. We will give you a gold medal for crossing the finish line, but a CHROME metal might be more appropriate!

Whoa, that one was rough. Anyways, we hope you have enjoyed this little overview of some Chrome DevTools features, tips, and pointers. Right-click on your website to play around with the enchanting Google Chrome Developer Tools today!

Written by Hostwinds Team  /  August 31, 2019