A Few Pointers for the Google Chrome DevTools Novice

Tools

What is there to say about Google at the present moment? Needless to say, most facts about Google have already been, well, Googled by many. Consequently, a decent chunk of the information about Google has already circulated around 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 that are embedded into Chrome’s essence.

As a matter of fact, we are referring to what are known as Google Chrome Developer Tools. These tools allow anyone to test, debug, or troubleshoot any and 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 in terms of 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 are 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 were 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:

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 just 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. Just kidding! We’re just being 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 are using 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:

“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 in a different way, 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 various 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 in order 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 properly, 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 in order 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 individual 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 kind of code or function. For example, say you make it so your hypothetical blogging website automatically logs the time 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 really interesting and interactive.

Memory

This panel can help you detect potential memory issues. It shows you how much memory is being taken up by every component of your site. 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 is lacking 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 for completing our Chrome DevTools tutorial. We were going to 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!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.