How to inspect elements in Chrome, Safari, Firefox, and more

Inspecting elements with DevTools is a fundamental first step in understanding how websites are built. There are many reasons to inspect elements, including web development, debugging, SEO analysis, and scraping data from the web.

Whatever your reason for learning how to use DevTools, this guide will walk you through inspecting elements in some of the most popular browsers: Chrome, Safari, Firefox, Opera, and Edge.

If you don't want to scroll, just click the link to the section that interests you below to get started.

• How to inspect elements in Chrome
• How to inspect elements in Safari
• How to inspect elements in Firefox
• How to inspect elements in Opera
• How to inspect elements in Edge

How to inspect elements in Chrome

1. Open developer tools in Chrome
2. Explore the HTML code
3. Select a specific element to inspect
4. Edit the text of the element
5. Hide or delete an element
6. Change image element
7. Change element state
8. Edit the CSS of the page
9. Inspect the mobile version of the page

1. Open developer tools in Chrome

To open Chrome's developer tools, you have several options:

• Option 1: Right-click anywhere on the page and select Inspect.

• Option 2: Use the keyboard shortcut:
  • Windows/Linux: Control + Shift + I
  • macOS: Command (⌘) + Option (⌥) + I
• Option 3: Click the three-dot menu in the top-right corner, then select More tools > Developer tools.

2. Explore the HTML code

Once the developer tools are open, you'll see the HTML code of the website you're inspecting.

You can change the window layout by clicking the three dots.

The Elements tab shows the structure of the page:

• Blue text represents HTML tags
• Brown text indicates attribute names
• Green text shows attribute values
• Black text is the content within elements

3. Select a specific element to inspect

To inspect a specific element:

1. Move your cursor over the page to highlight different elements.
2. Click on the element you want to inspect.

The corresponding HTML in the Elements tab will be highlighted.

4. Edit the text of the element

To edit text content:

1. Double-click the text you want to change in the Elements tab.
2. Type your new text.
3. Press Enter to confirm the change.

Note that these changes are temporary and only visible in your browser.

5. Hide or delete an element

To hide or delete an element:

1. Right-click the element in the Elements tab.
2. Select Hide element or Delete element.

6. Change image element

To change an image:

1. Select the <img> tag in the Elements tab.
2. Double-click the src attribute value.
3. Enter a new image URL and press Enter.

7. Change element state

To change an element's state (e.g., hover, active):

1. Select the element in the Elements tab.
2. Click the :hov button in the Styles pane.
3. Check the box for the state you want to simulate (e.g., :hover, :active).

8. Edit the CSS of the page

To edit CSS:

1. Select an element in the Elements tab.
2. Look at the Styles pane on the right.
3. Click on any CSS property to edit it (e.g. you can change color: red; to blue.

4. Add new properties by scrolling to the bottom of the existing properties or finding an empty space in a CSS rule. Click on the empty space, and you can start typing a new CSS property, like background-color: yellow;.
5. Press Enter to apply the new property.

9. Inspect the mobile version of the page

To view the mobile version:

1. Click the Toggle device toolbar icon (phone and tablet icon) in the top-left corner of DevTools.

2. Select a device from the dropdown menu or set custom dimensions by entering specific width and height values in the fields next to the dropdown menu.

How to inspect elements in Safari

1. Open developer tools in Safari
2. Explore the HTML code
3. Select a specific element to inspect
4. Edit the text of the element
5. Hide or delete an element
6. Change image element
7. Change element state
8. Edit the CSS of the page
9. Inspect the mobile version of the page

1. Open developer tools in Safari

To open Safari's developer tools on your Mac:

• Go to Safari in the menu bar, select Preferences, and click on the Advanced tab.
• Check the box that says Show Develop menu in menu bar.

A Develop option will now be added to the menu bar.

Now, you have two options:

• Option 1: Click on Develop in the menu bar and select Show Web Inspector.
• Option 2: Press Command (⌘) + Option (⌥) + I.

2. Explore the HTML code

Once the developer tools are open, you'll see the HTML code of the website you're inspecting.

You can dock the DevTools pane to different sides of the browser window with the Dock Controls to the left of the Elements tab.

The Elements tab shows the structure of the page:

• Blue text represents HTML tags
• Purple text indicates attribute names
• Green text shows attribute values
• Black text is the content within elements

3. Select a specific element to inspect

To inspect a specific element:

1. In the Web Inspector, click on the icon that looks like a pointer arrow inside a box with crosshairs or press Command (⌘) + Shift (⇧) + C.
2. Hover over the webpage to highlight different elements.
3. Click on the element you want to inspect. This will bring you directly to the corresponding HTML code in the Web Inspector.

4. Edit the text of the element

To edit text content:

1. Find the element you want to edit in the HTML code within the Elements tab.
2. Double-click on the text content within the element tags.
3. Type the new text and press Enter to apply the changes.

Note that these changes are temporary and only visible in your browser.

5. Hide or delete an element

1. Select the element in the Elements tab.
2. Right-click on the element.
3. To delete an element, select Delete > Node.

4. To hide an element, select Edit > HTML and add  style="display: none;" within the opening tag of the element you want to hide.

6. Change image element

To change an image:

1. Find the <img> tag in the Elements tab.
2. Double-click the src attribute of the <img> tag.
3. Enter the new URL for the image and press Enter.

7. Change element state

To change an element's state:

1. In the Elements tab, right-click on the element.
2. Choose Forced Pseudo-Classes.
3. Select the state you want to apply: Active, Focus, Hover, Visited.

8. Edit the CSS of the page

To edit CSS:

1. Go to the sidebar to the right of the Elements tab.
2. Find the CSS rules for the element you are inspecting.
3. Click on a CSS property value to edit it, or add new properties.
4. Press Enter to apply the changes.

9. Inspect the mobile version of the page

To view mobile versions:

1. In the menu bar, click on Develop and select Enter Responsive Design Mode.

2. Choose the device you want to simulate from the toolbar that appears at the top.

You can now inspect and interact with the page as if you were on a mobile device.

How to inspect elements in Firefox

1. Open developer tools in Firefox
2. Explore the HTML code
3. Select a specific element to inspect
4. Edit the text of the element
5. Hide or delete an element
6. Change image element
7. Change element state
8. Edit the CSS of the page
9. Inspect the mobile version of the page

1. Open developer tools in Firefox

• Option 1: Use the keyboard shortcut:
  • Windows/Linux: Ctrl + Shift + I
  • MacOS: Command (⌘) + Option (⌥) + I
• Option 2: Right-click on any webpage element and select "Inspect" from the context menu.

2. Explore the HTML Code

Once the developer tools are open, the HTML code of the website you're inspecting will appear in the Inspector tab.

The Inspector tab shows the structure of the page:

• HTML tags: Purple
• Attribute names: Red
• Attribute values: Blue
• Content within elements: Black

You can dock the DevTools pane to different sides of the browser window by clicking on the three dots (…).

3. Select a specific element to inspect

To inspect a specific element:

1. Move your mouse over the HTML elements in the "Inspector" tab. The corresponding elements on the webpage will be highlighted.
2. Click on an element in the HTML code to inspect it in detail.

4. Edit the text of the element

To edit text content:

1. Find the element you want to edit in the HTML code within the Inspector tab.
2. Double-click on the text content within the element tags.
3. Type the new text and press Enter to apply the changes.

Note that these changes are temporary and only visible in your browser.

5. Hide or delete an element

To delete an element:

• Right-click on the selected element in the HTML code.
• Select Delete Node to remove the element entirely from the page.

To hide an element:

• Right-click on the selected element in the HTML code.
• Select Edit As HTML. The text will be highlighted, and you can make your changes.

• Add style="display: none;" to the element tag.
• Press Enter to apply the change.

6. Change image element

To change the image element:

1. Find the <img> tag in the Inspector tab.
2. Double-click the src attribute of the <img> tag.
3. Enter the new URL for the image and press Enter.

7. Change element state

To change an element's state:

1. Right-click on the selected element in the HTML code.
2. Choose Change Pseudo-class.
3. Select the state you want to apply: Hover, Active, Focus, Hover, Visited, Target.

8. Edit the CSS of the page

To edit CSS:

1. In the "Inspector" tab, go to the "Rules" panel on the right.
2. You can add, modify, or delete CSS rules to see the effects on the webpage in real time.

9. Inspect the mobile version of the page

• Option 1: Use the keyboard shortcut:
  • Windows/Linux: Ctrl + Shift + M
  • MacOS: Command (⌘) + Option (⌥) + M
• Option 2: Click the "Responsive Design Mode" button (a small phone icon) in the developer tools toolbar.

This will simulate different screen sizes and resolutions so you can inspect how the page looks on mobile devices.

How to inspect elements in Opera

1. Open developer tools in Opera
2. Explore the HTML code
3. Select a specific element to inspect
4. Edit the text of the element
5. Hide or delete an element
6. Change image element
7. Change element state
8. Edit the CSS of the page
9. Inspect the mobile version of the page

1. Open developer tools in Opera

To open Opera's developer tools, you have several options:

• Option 1: Go to the menu bar at the top, navigate to Developer, and select Developer tools.

• Option 2: Right-click on any webpage element and select "Inspect element" from the context menu.

• Option 3: Use the keyboard shortcut:
  • Windows/Linux: Ctrl + Shift + I
  • macOS: Command (⌘) + Option (⌥) + I

2. Explore the HTML code

Once the developer tools are open, you'll see the HTML code of the website you're inspecting.

You can change the window layout by clicking the three dots.

The Elements tab shows the structure of the page:

• Blue text represents HTML tags
• Brown text indicates attribute names
• Green text shows attribute values
• Black text is the content within elements

3. Select a specific element to inspect

To inspect a specific element:

1. Move your cursor over the page to highlight different elements
2. Click on the element you want to inspect

The corresponding HTML in the Elements tab will be highlighted.

4. Edit the text of the element

To edit text content:

1. Double-click the text you want to change in the Elements tab
2. Type your new text
3. Press Enter to confirm the change

Note that these changes are temporary and only visible in your browser.

5. Hide or delete an element

To hide or delete an element:

1. Right-click the element in the Elements tab
2. Select "Hide element" or "Delete element"

6. Change image element

To change an image:

1. Select the <img> tag in the Elements tab.
2. Double-click the src attribute value.
3. Enter a new image URL and press Enter.

7. Change element state

To change an element's state:

1. Right-click the element in the Elements tab
2. Select Force state
3. Check the box for the state you want to simulate (e.g., :active, :hover, :focus, :visited)

8. Edit the CSS of the page

To edit the CSS:

1. Click on the "Styles" sub-tab within the "Elements" tab.
2. Find the CSS rule you want to edit.
3. Click on the value of the property you want to change and enter the new value.
4. Press Enter to apply the changes.

9. Inspect the mobile version of the page

To inspect the mobile version of a page:

1. Click on the device icon of the Developer Tools panel. This will display the page in mobile view.
2. You can then select a device from the dropdown menu or set custom dimensions by entering specific width and height values in the fields next to the dropdown menu.

How to inspect elements in Edge

1. Open developer tools in Edge
2. Explore the HTML code
3. Select a specific element to inspect
4. Edit the text of the element
5. Hide or delete an element
6. Change image element
7. Change element state
8. Edit the CSS of the page
9. Inspect the mobile version of the page

1. Open developer tools in Edge

To open Edge's developer tools:

• Option 1: Use the keyboard shortcut:
  • Windows/Linux: Ctrl + Shift + I
  • macOS: Command (⌘) + Option (⌥) + I
• Option 2: press F12 on your keyboard or right-click anywhere on the page and select Inspect.

2. Explore the HTML code

Once the developer tools are open, you'll see the HTML code of the website you're inspecting.

You can change the window layout by clicking the three dots.

The Elements tab shows the structure of the page:

• Blue text represents HTML tags
• Purple text indicates attribute names
• Orange text shows attribute values
• Black text is the content within elements

3. Select a specific element to inspect

To inspect a specific element:

1. Move your cursor over the page to highlight different elements
2. Click on the element you want to inspect

The corresponding HTML in the Elements tab will be highlighted.

4. Edit the text of the element

To edit text content:

1. Double-click the text you want to change in the Elements tab
2. Type your new text
3. Press Enter to confirm the change

Note that these changes are temporary and only visible in your browser.

5. Hide or delete an element

To hide or delete an element:

1. Right-click the element in the Elements tab
2. Select "Hide element" or "Delete element"

6. Change image element

To change an image:

1. Select the <img> tag in the Elements tab.
2. Double-click the src attribute value.
3. Enter a new image URL and press Enter.

7. Change element state

To change an element's state:

1. Right-click the element in the Elements tab
2. Select Force state
3. Check the box for the state you want to simulate (e.g., :active, :hover, :focus, :visited)

8. Edit the CSS of the page

To edit the CSS:

1. Click on the "Styles" sub-tab within the "Elements" tab.
2. Find the CSS rule you want to edit.
3. Click on the value of the property you want to change and enter the new value.
4. Press Enter to apply the changes.

9. Inspect the mobile version of the page

To inspect the mobile version of a page:

1. Click on the device icon of the Developer Tools panel. This will display the page in mobile view.
2. You can then select a device from the dropdown menu or set custom dimensions by entering specific width and height values in the fields next to the dropdown menu.

Use cases of inspecting elements

Inspecting elements has various practical applications:

1. Debugging HTML and CSS issues
2. Analyzing website layouts and styles
3. Testing responsive designs
4. Extracting data for web scraping
5. Temporarily modifying website content for mockups or demonstrations
6. Learning how other websites are built

Now you're ready to inspect websites

Whether you want to debug HTML and CSS issues, analyze website layouts and styles, or write web scraping scripts to extract data from websites, this guide has equipped you with the basic knowledge you need to use DevTools in multiple browsers.

If web data collection is the reason you want to learn how to inspect elements, you can learn more about extracting data with DevTools in Apify Academy.