How to Use the Inspect Element in Google Chrome

If you’re working in Google Chrome, you’ve got a lot of great features at your fingertips. The Inspect Element can give you the chance to take a closer look at the front-end coding of a website or to inspect the HTML source code from any visual element that is on a website. There are two main ways to use this tool when you are in Google Chrome, and we’ll take a look at both of them here.

First, though, it’s important to know what this feature can do. Not only does it allow you to view and modify the web elements on the front-end, but it also allows anyone with access to change the content and appearance of the page by editing the HTML and CSS files. You can use the menu or keyboard shortcuts to open the Developer Tools panel that contains everything that you need for:

• Layout testing
• CSS live editing
• Temporary editing
• Debugging diagnostics
• And more

When you open the Inspect Element, you will have three main sections: 

1. CSS Panel: This is usually in the middle of the page under the “Styles” header and gives you the chance to modify style rules by adding, removing, or changing various CSS properties. 

2. Console: This shows you what is new in the developer tools, and is the part that handles the JavaScript for the website. You’ll find it at the bottom of the Developer Tools page. 

3. Elements/DOM Panel: Also known as the Document Object Model tree, this provides full access to the source code in HTML format. It’s usually on the upper part of the page and takes up a significant amount of space. 

Why do you need the Inspect Element?

One more thing to cover before we get into the specifics of using this feature is the why—so many people don’t even understand what the Inspect Element can do and why it’s so helpful to have on hand. Web developers could use this feature to add temporary changes in real-time and see what happens before they implement them on the backend. This can create more efficient processes. Content writers are another group that can use this feature—they can remove sensitive information before screenshots are taken, which is quicker than editing a photo the traditional way. 

One more benefit is that the Inspect Element ability can improve search engine optimization efforts because it can help marketers investigate hidden keywords their competition may be using. There’s a lot to love about this simple little feature. And, it’s easy to use. 

How to use the Inspect Element feature: Step-by-step 

Here’s how to put the Inspect Element tool to work. 

1. Click on the 3 dots at the top right of the Chrome window

When you bring down the menu bar, you’ll see an option for “More Tools” and you’ll click that. Then, you will see the option for Developer Tools. 

Alternatively, you can use keyboard shortcuts (Ctrl+Shift+C or Command+Shift+C for Windows and Mac, respectively) to access the developer tools menu. One more option is to right-click anywhere on the page and then scroll down and select “Inspect” from the menu that appears. 

2. Use the Elements panel to your advantage

Whichever way you choose to access the developer tools, the Elements panel should now be displayed on your screen next to the website. This is where you can make changes to the HTML source code. You can also resize the Inspect box to improve readability by dragging the corners of it. 

You can also go into the settings in the Elements panel and change the Dock Side option so that the panel shows up on the left of the screen instead of the right.  

3. Check mobile previews and variables

Some people want to see how their mobile site renders. They can use the Toggle Device toolbar that’s located at the top left of the panel. When you create the preview, you’ll also have a space to change variables like screen resolution and bandwidth to see how the site responds and performs. 

4. Make changes or complete your inspection 

Once you have done all this, you will be able to alter the HTML or CSS source code to change font size, color, and other elements. You can also use the other panels to change various features of the website, but it’s not recommended to tinker around here unless you’re familiar with coding. Otherwise, you could erase important code or cause other serious glitches that are difficult and costly to fix. 

How to change an element 

Highlight the element source code that you want to change. Then, right-click and select “Edit as HTML” to expand the editor box. Then, you can modify the text. Remove the selection highlight to get a preview of the changes. You can also just double-click the text in the DOM panel that you want to change and then replace it with new text. 

If you want to modify style elements, the process is similar but you will have to navigate to the CSS panel first and then modify the element properties that you want to change. 

When is the last time you inspected your communications strategy?

While you’re doing the hard work of making sure that your website is up to par, who’s fielding the phone calls and other customer queries? When you partner with Smith.ai, you’ll get a team of dedicated virtual receptionists to handle everything from 24/7 phone answering and live website chat to lead intake, appointment scheduling, and so much more. 

Our team can even assist with outreach campaigns and offer outbound sales support to get the leads in the first place, freeing up your time to focus on your business. And as always, it comes with a custom plan to manage it all so that we don’t miss a thing. 

To learn more, schedule a consultation to discuss what the 24/7 virtual receptionists at Smith.ai can do for your business. You can also reach us at hello@smith.ai or (650) 727-6484.