If you’re a web developer, you may need to test things on the fly while communicating with your customers. It is also possible that you need to share a screenshot, but the web page you are trying to capture contains your personal information.
The Inspect Element tool is useful in both cases. It allows users to access the code of the web page and manipulate its elements. Being a built-in feature in all major browsers, both visitors and web developers can use this tool to debug, test and search for keywords.
This article will show you how to access Inspect Element in Google Chrome. You’ll learn its various uses, including how to change or hide a page element and inspect CSS classes.
Get to know the elements panel in Chrome
Inspect Element is a Chrome Developer Tools feature that allows you to inspect and modify web elements on the frontend of a page. With this tool, it is possible to change the appearance and content of a web page by editing its files and .
There are several ways to open Developer Tools in Google Chrome. The first method is through Menu. Click on the three vertical dots in the upper right corner of the browser. Then hover over More tools and click Developer Tools.
To easily inspect an element in Chrome, right-click an element on the page and select To inspect or use the keyboard shortcut Ctrl+Shift+C for Windows and Command+Shift+C for Mac. Then use Ctrl+F either Command+F to search for anything within the source code of the page.
panel developer tools consists of three main parts:
- Elements/DOM panel: contains the Document Object Model (DOM) tree of the page and gives you full access to the source code . It is usually located at the top of the window.
- CSS pane: allows you to modify the style rules of a web page by changing, adding or removing CSS properties. This panel is located in the central part, just below styles.
- Console: displays what’s new in the developer tools. It is also used to run JavaScript. It appears in the lower section of the window.
Chrome Developer Tools also includes other features, such as Sources, Net, App Y Security, among other. This article will show you how to change page attributes using the Elements panels Y CSS.
What can you do with Chrome developer tools?
The Inspect Element feature offers many benefits to web developers. Here are some of the things you can do with the Elements and CSS panels:
- CSS live editing: allows you to see the changes in real time while making edits in the CSS panel.
- Design test: it allows you to test different designs of a website before making permanent changes to the code.
- Debug diagnostics: helps to check if your site contains broken code.
- Temporary edition: allows you to adjust the elements of the web page to see them in the browser.
Why do you need to inspect web parts?
If you’re a web developer, you can use Inspect Element to modify a site’s design and see the changes live before permanently implementing them. This saves time and makes communication with customers more efficient.
For their part, content writers can use the Inspect Element tool to omit sensitive information from a web page before taking a screenshot. This is faster than using photo editing software.
The ability to inspect items also helps digital marketers in their SEO efforts. It can be used to gain insight into the hidden keywords of the competition.
How to access element inspection tool in Chrome?
Nowadays, most browsers have the function To inspect element. However, this article will teach you how to use it in Google Chrome.
Check out our for tutorials on how to inspect elements in other browsers like Mozilla Firefox, Opera, and Internet Explorer.
Here’s how to use the function inspect element in Google Chrome:
- Open a website in Chrome. We will be using the homepage for this tutorial.
- Click the three vertical dots on Chrome’s top menu bar to open the dropdown menu, then select More tools -> Developer tools.
- Alternatively, use the keyboard shortcuts mentioned above or right-click on the webpage and choose To inspect for quick access to the inspection tool.
- Once the panel appears Items in the browser window, you will be able to make changes to the page code. Resize the inspector box by dragging its corners to improve readability.
- By default, the developer tools will appear on the right side of the browser window. If you want to change their location or move them to a separate window, click the three vertical dots in the top right corner of the panel and choose your preferred setting under Anchor to the side.
- To see how the webpage appears on mobile devices, click the device toolbar in the upper left corner of the panel. On top of the preview, you can change variables to test how the page behaves under a different screen resolution or bandwidth throttling level.
Inspect Element also allows users to change and remove or hide web elements, as well as inspect CSS classes. The following sections provide detailed information on how to perform these actions.
Professional Tip
To inspect a specific item, right-click on it and choose the option To inspect. The web inspector box will open and automatically highlight the source code of the selected element.
Change an item
To change an element on the page, you need to modify the CSS or HTML source code. In this way, you can edit the text and style elements, such as the weight, size and color of the font.
The DOM panel allows you to easily modify the text. After opening the box Itemsuse the function To inspect (the cursor icon at the top left of the panel) to highlight the element whose source code you want to modify. Next, right-click the highlighted code within the DOM tree and select Edit as HTML.
The editor box will expand, allowing you to modify the text. Uncheck the item to preview the changes.
A faster method is to double-click the text you want to modify in the DOM panel and replace it. Text elements are usually enclosed in quotation marks.
Styling elements is similar, but you’ll need to use the CSS panel.
use the tool To inspect to highlight an item. Then click on the property element.style at the top of the CSS panel and add the respective style descriptions inside the quotes.
In the following example, we have added a background color to a text block:
If you want to add another style, select the property again element.style. The web inspector will add another empty line for you to fill in.
Here, we’ve added a second property that displays the text in italics:
Hovering over the CSS properties in the CSS panel will cause a checkbox to appear next to each one. Uncheck the box to skip styles you don’t want to show. Alternatively, you can click on a property or value to replace it.
To use other types of formatting, familiarize yourself with the .
Hide or remove an item
The developer tools also allow you to hide elements of a web page. Using the function hide itemthe CSS panel will create a visibility property to hide an element without removing it.
To do this, start by opening the Developer Tools and click on the item you want to hide with the tool To inspect. Next, right-click on the highlighted code in the DOM tree and select hide item.
A new visibility property will appear in the CSS panel. Uncheck it to undo the change.
If you want to remove an HTML element instead, right-click the highlighted code and select delete item. Refreshing the page will restore the removed code.
Professional Tip
All changes made with the Inspect Element tool can be undone by clicking Ctrl+Z on Windows and Linux or Command+Z on macOS.
Inspect CSS classes
Inspecting the elements of a web page is also a great way to check the code for the elements of the site that you like. You can copy the code to style the elements of your site using CSS classes.
To do this, open the Developer Tools and activate the tool To inspect. Next, hover over the item you’re interested in. Your basic information, such as color, font, and margin, will appear in a box, and your source code will be highlighted in the DOM panel.
You can find a specific CSS style by clicking Ctrl+Shift+F on Windows and Linux or Command+Option+F for macOS users.
A search box will appear at the bottom of the panel. Enter your query and the inspector will return the results.
conclusion
Inspect Element is a feature of web browsers that allows users to access developer tools. They are useful for testing web page design, debugging, omitting sensitive information from screenshots, investigating hidden keywords, and much more.
Let’s go through the steps to use the Inspect Element tool in Chrome:
- Open any web page and locate the item you want to inspect.
- Right-click on the element and choose To inspect.
- Resize the window by dragging its corners to improve readability. Set other preferences like dock position and device type as needed.
- Use the Elements pane to apply HTML layout edits and the css pane to modify the style of the elements.
We hope this article helped you learn how to use the Inspect Element feature in Chrome and some of its apps. If you have any questions or comments, let us know in the comment section below.
Diana is a translator with extensive experience in different types of documents, including tutorials and…
Facebook Comments
Disqus