How to Inspect Element and Make Temporary Changes to Any Website

How to Inspect Element and Make Temporary Changes to Any Website

Learning how to inspect elements in a browser is beneficial, especially if you work in IT. Inspect Element lets visitors access and temporarily edit a website’s front-end source code, including its HTML, CSS, JavaScript, and image files.

Aside from briefly manipulating a site’s appearance, the Inspect Element tool allows users to test scripts, debug errors, and find a web page’s metadata.

Inspect Element is a built-in feature in all major browsers. This article will show you how to access and use Inspect Element in Google Chrome, Safari, and Mozilla Firefox.

We will also discuss its various uses, including how to modify a page element, inspect CSS classes, and enable the Responsive Design Mode.

Download Website Launch Checklist

What Can You Do With Inspect Element?

The Inspect Element feature offers many benefits to users. Here are several things you can do with it:

  • CSS live-editing ‒ allows you to make edits in the CSS panel and see the changes in real-time.
  • Layout testing ‒ lets you test different website layouts.
  • Debug diagnostics ‒ helps website maintenance as it can check whether a site contains broken code.
  • Temporary editing ‒ allows you to tweak page elements without making permanent changes to the code.

Why Do You Need to Inspect Web Elements?

The Inspect Element feature is valuable for many use cases, especially for:

  • Web developers – you can test the code you’ve written and interact with it on a web page. You can also use Inspect Element to find errors or bugs on a site.
  • Content writers – the Inspect Element feature lets you omit sensitive information from a web page before taking a screenshot. Manipulating a page using Inspect Element is quicker than photo editing software.
  • Digital marketers – lets you check a competitor’s search engine optimization (SEO) efforts, website metadata, targeted keywords, and Google index status.
  • Customer support agents – helps when assisting web developers in pinpointing and fixing a website error.
  • Designers – helps modify a site’s design and see the changes before implementing them. The tool also lets you preview the appearance of a web page on a desktop computer or mobile device. This saves time and makes communicating with clients more efficient.

How to Inspect Element Using Chrome Developer Tools?

Before exploring the Inspect Element tool in Google Chrome, it’s essential to know about the Developers Tools. It is a panel that comes with the Inspect Tool, and it comprises three main parts:

  • Elements/Document Object Model (DOM) panel – contains the page’s DOM tree and provides access to the Hyper Text Markup Language (HTML) source code. It is located at the top taskbar of the Chrome Developer Tools.
  • CSS panel – allows you to change, add, and remove CSS properties to modify the style rules of a web page. It is located in the middle section of Developer Tools, under Styles.
  • Console – displays logged messages and runs the JavaScript code. It appears at the button taskbar of Developer Tools.

Here’s how to open Inspect Element using Google Chrome:

  1. Open a website in Google Chrome. We will be using hostinger.com for this tutorial.
  2. Click on the three vertical dots on Chrome’s top menu bar, choose More tools, then select Developer tools.
Accessing Developer tools on Chrome.

Alternatively, use the keyboard shortcuts – Ctrl + Shift + I for Windows or Linux and Cmd + Option + I for macOS users.

Or, right-click on the web page and choose Inspect to access the Developer tools panel.

Opening Inspect Element on Chrome.
  1. Once the Elements tab appears on your browser window, you can edit the page’s source code. Resize the inspector box by dragging its corners for better readability.
The Elements panel on Chrome.
  1. By default, the Elements panel will appear on the right side of the browser window. If you want to change its location or move it to a separate window, click on the three vertical dots at the upper-right corner of the panel and choose your preferred Dock side setting.
Changing the Elements panel location on Chrome.
  1. To see how the web page appears on mobile devices, click the Toggle device toolbar at the top-left corner of the panel. Above the preview, you can change the variables to test how the page performs with a different screen resolution or bandwidth throttling level.
Preview of the hostinger.com website on a different screen resolution on Chrome.

Pro Tip

To inspect a specific element, right-click on it and choose the Inspect option. The inspect element tools will open and automatically highlight the source code of the selected element.

You can use Inspect Element to change, delete, or hide site content and check CSS classes. We recommend clearing the browser cache regularly to ensure you’re viewing the original appearance of the web page.

The following sections will provide in-depth information on how to perform common Inspect Element tasks.

Change an Element

To change a page element, you need to alter the page’s CSS or HTML source code. This way, you can edit text and its style elements, such as the font weight, size, and color.

The DOM panel enables simple text modification. Here’s how to do it:

  1. Open Google Chrome and go to a website. In this example, we’re using hostinger.com.
  2. Right-click anywhere on the web page and select Inspect to open the Developer tools.
  3. After opening the Elements box, use the Inspect tool ‒ the cursor icon at the top left of the panel ‒ to highlight the source code element you want to change.
Highlighting the source code using the Inspect tool on Chrome.
  1. Right-click on the code highlighted within the DOM tree and select Edit as HTML. Alternatively, double-click the text you want to alter.
Editing a code as HTML using Inspect Element on Chrome.
  1. The editor box will expand, allowing you to modify the text. Text elements are usually encased in quotation marks.
The editor box on the Chrome's Inspect Element.
  1. Deselect the element to preview the changes.
The texts are successfully edited using Inspect Element on Chrome.

Modifying the style of web elements involves similar steps, but you’ll use the CSS panel instead. We’ll mainly use element.style, which comprises different properties to choose from and add to the web page.

Follow these steps:

  1. Open Google Chrome and access a website. In this example, we’re using hostinger.com.
  2. Right-click anywhere on the website and choose Inspect.
  3. Use the Inspect tool to highlight an element.
  4. Click on the element.style property on the upper part of the CSS panel and add the desired style declarations inside the curly brackets. In the following example, we added a background color to a text block:
Changing a background style using Inspect Element on Chrome.
  1. If you want to put another style declaration, select the element.style property again. The web inspector will add another empty line to fill. Here, we append a second property to display the text in italics:
Modifying a font style using Inspect Element on Chrome.
  1. Hovering over CSS properties in the panel will reveal a checkbox next to each line. Uncheck it to omit any styles from being shown. Alternatively, you can click on a property or a value to replace it.
Unchecking the element style options using Inspect Element on Chrome.

Hide or Delete an Element

The Developer Tools also let you hide site elements on web pages. With the Hide Element feature, the CSS panel can create a visibility property to hide any site content without deleting it.

Follow these instructions:

  1. Open Google Chrome and go to a website. Here, we use hostinger.com.
  2. Right-click on any part of the web page and select Inspect.
  3. Enable the Inspect feature and click on the element you want to hide.
  4. Right-click on the code highlighted on the DOM tree and select Hide Element. A new visibility property will appear on the CSS panel. Uncheck it to undo the change.
Hiding an element's style using Inspect Element on Chrome.
  1. If you want to remove an HTML element instead, right-click on the highlighted code and select the Delete element. Refreshing the page will restore the removed code.
Deleting a code using Inspect Element on Chrome.

Pro Tip

You can undo all the changes made in the Inspect Element tool by pressing Ctrl+Z on Windows and Linux or Command+Z on macOS.

Inspect CSS Classes

Inspecting page elements is an excellent way to check web design code. You can also copy them to style your website’s sections using CSS classes.

Here’s how to do it:

  1. Open Google Chrome and access a website. Here, we use hostinger.com.
  2. Right-click anywhere on the web page and select Inspect.
  3. Activate the Inspect tool and hover your cursor over the element you want to check. Its basic information like color, font, and margin will appear in a box, and the DOM panel will highlight its source code.
Checking an element's CSS information using Inspect Element on Chrome.
  1. You can also find a specific CSS style by pressing Ctrl+Shift +F on Windows and Linux or Command+Option+F on macOS.
  2. A search tab will appear on the lower part of the panel. Enter your query, and the inspector will generate the results.
Opening a search box using Inspect Element on Chrome.

How to Inspect Element in Other Browsers

Most browsers have a feature similar to the Google Chrome Inspect Element tool. While the features mainly work the same way, various browsers require different steps to run it.

Inspect Element in Safari

Before you can use the Inspect Element tool in Safari, you need to enable the Develop menu:

  1. Select Safari on the menu bar and choose Preferences from the menu.
Setting Safari's preferences on macOS.
  1. Choose Advanced and tick the box next to Show Develop menu in menu bar to enable Inspect Element.
Enabling the Develop menu on Safari.
  1. Once you activate the feature, you’ll see a Develop option added to the menu.
The Develop menu on macOS.

Here’s how to use Inspect Element on Safari:

  1. Open the Safari browser.
  2. Right-click anywhere on the page and choose Inspect Element, or you can use the keyboard shortcut Command+Option+I.
Accessing Inspect Element on Safari.

Alternatively, choose Develop -> Show Web Inspector from the menu bar.

Showing Web Inspector on Safari.

The Inspect Element tool in Safari appears at the bottom of the browser window by default. To change the location, click the icon to dock the panel on the right side or open it in a separate window.

Changing the Web Inspector panel location on Safari.

The Web Inspector panel consists of two columns – the first shows the HTML source code, and the second displays the CSS. Use the cursor to navigate the interface and explore the code and lines corresponding to each region.

The Web Inspector panel on Safari.

Alternatively, inspect the page directly by clicking the Inspect tool button on the panel’s upper left corner. As you move the cursor, the tool shows the corresponding source code.

Like the Google Chrome Inspect Element tool, Safari allows users to edit, remove, and add web page elements.

Here’s how to modify a part of a page:

  1. Open Safari.
  2. Go to a website. In this example, we use hostinger.com.
  3. Right-click an HTML code on the Elements panel and hover over Edit.
Editing a code using Web Inspector on Safari.
  1. Select an option from the Edit menu.
The editing options inside Safari's Web Inspector.
  1. Web Inspector will prompt you to input the new text and display the changes you’ve made in real-time.
Modifying a text using Web Inspector on Safari.

Follow these steps to add a new element to a page:

  1. Open Safari.
  2. Access a website. In this case, we’re going to use hostinger.com.
  3. Right-click a line of code and select an option from the Add menu. In this example, we’re choosing Child.
Adding a child element to a web page using Web Inspector on Safari.
  1. Specify the element. In this example, we’ll add an <h1>. You can continue writing any code you’d like next to it.
Adding a new code using Web Inspector on macOS Safari.

Here’s how to delete a page element:

  1. Open Safari.
  2. Go to a website. In this example, we’re accessing hostinger.com.
  3. Select any code and press Delete.
Deleting an HTML code using Web Inspector on Safari.

Alternatively, right-click on a line of code, and select Delete -> Node.

Removing a node using Web Inspector on Safari.
  1. To hide an element of the desired web page, simply right-click on the code you want to conceal and choose Toggle Visibility.
Hiding a code using Web Inspector on Safari.

In addition, Safari has a Responsive Design Mode that allows you to preview a website across various devices, such as desktop and mobile screens. Here’s how to use it:

  1. Open Safari.
  2. Access a website. In this example, we’re using hostinger.com.
  3. Select the Develop option on the menu bar.
  4. Choose Enter Responsive Design Mode.
Opening a website using Responsive Design Mode on Safari.
  1. It will show the available device options and screen resolutions for site preview.
Using Responsive Design Mode on Safari.

Inspect Element in Mozilla Firefox

The Inspect Element panel is also a built-in feature in the Mozilla Firefox browser. Here’s how to use it:

  1. Open Mozilla Firefox.
  2. Go to a website. In this example, we’re using hostinger.com.
  3. Right-click on any part of the page and select Inspect.
Opening the Inspect Element tool on Firefox.

Alternatively, click the three-stripes menu -> More tools.

Accessing More tools on Firefox.
  1. Select Web Developer Tools.
Opening Web Developer Tools on Firefox.

You can also use the keyboard shortcut Ctrl+Shift+I to access Inspect Element.

The Firefox inspector appears at the bottom of the window by default. To change its location, click the three-dots menu on the panel’s upper right corner and choose another display option.

Changing the Inspector panel's location on Firefox.

This tool allows you to select a specific element to find its code. Click the Inspect tool on the top-left corner of the panel to enter selection mode.

Enabling the Inspect tool on Firefox's Inspector panel.

The Inspector panel in Firefox works similarly to Chrome and Safari. The HTML source code is color-coded – blue is content, yellow is margin, and purple is padding.

Hovering a web page's element using the Inspect tool on Firefox.

Here’s how to modify a page element on Firefox:

  1. Open Mozilla Firefox.
  2. Access a website. In this example, we’re using hostinger.com.
  3. Right-click on any specific part of the web page and select Inspect.
  4. Double-click to change the text.
Choosing a text to modify using Inspect Element on Firefox.

Alternatively, right-click and choose Edit as HTML to modify the text. The box will expand to allow you to write the code.

Editing a page element as HTML using Inspect Element on Firefox.
  1. To add a new text, select Create New Code.
Writing a new code using Inspect Element on Firefox.
  1. To delete the code, simply double-click and press Backspace or Delete.

Follow these steps to modify the style of an element:

  1. Open Mozilla Firefox.
  2. Go to a website. In this example, we’re using hostinger.com.
  3. Open the Inspector panel and go to Filter Styles at the bottom section.
The Filter Styles panel on Firefox.
  1. Uncheck the box next to a CSS declaration to deactivate a style.
Deactivating a style using Inspect Element on Firefox.
  1. Click the section, and the tool will provide a new line to add a new code.
Adding a new line using Inspect Element on Firefox.

Mozilla Firefox also offers Responsive Design Mode to preview several preset screen resolutions. Here’s how to do it:

  1. Open Mozilla Firefox.
  2. Access a website. In this example, we’re opening hostinger.com.
  3. Open the Inspector panel and click the Responsive Design Mode icon at the top-right corner.
Using Responsive Design Mode on Firefox.

Alternatively, click the three-stripes menu -> More tools -> Responsive Design Mode.

Accessing Responsive Design Mode on Firefox
  1. Activating the mode lets you check the connection speed and device pixel ratio.
The site preview of hostinger.com on a different device using Responsive Design Mode on Firefox

Conclusion

The Inspect Element feature lets users modify, edit, or add code to an existing web page. It is helpful for testing site design, debugging, excluding sensitive information from screenshots, researching metadata, and finding hidden keywords.

In this article, we have explained the steps to access Inspect Element and provided its common uses in three web browsers – Google Chrome, Safari, and Mozilla Firefox.

We hope this article has helped you learn how to use Inspect Element and some of its implementations. If you have any questions or suggestions, let us know in the comments section below.

Was this tutorial helpful?

Author
The author

Linas L.

Linas started as a customer success agent and is now a full-stack web developer and Technical Team Lead at Hostinger. He is passionate about presenting people with top-notch technical solutions, but as much as he enjoys coding, he secretly dreams of becoming a rock star.

Author
The Co-author

Noviantika Gita

Noviantika is a Digital Content Writer at Hostinger. Passionate in web hosting, WordPress, and SEO, she's driven to share her knowledge with the world through her writing. During her free time, Noviantika likes to hop on a plane and discover places.