How to Inspect Elements on Chrome, Firefox, Edge, and Safari

In the early years of web development, the only method to debug the code was through the source code (from the view-source-code option). As website development became essential for many individuals and businesses, the need for inspecting elements grew significantly.

To address this challenge, Google Chrome introduced the Inspect tool, which can be accessed with a right-click. Since then, browsers have continually advanced, and developers could not have asked for a more versatile tool.

What Is Inspect Element?

Inspecting elements is a process for inspecting the web elements on a website or webpage. However, Google introduced Inspect as a tool embedded in the browser that allows one to view the code in a hierarchical structure.

This tool can be accessed by right-clicking anywhere on a web page and then clicking the Inspect option from the context menu. Clicking Inspect gives you the option to check, change, and monitor various debugging and performance parameters, including source code, on the go.

Using Inspect, you can experiment with visual and functional changes without permanently altering the source code. For instance, you can temporarily change the color of a button directly on the browser to preview how it would look.

Inspecting elements empowers developers and testers to make quick changes and debug efficiently, helping you save time.

The Need For Inspecting Elements

The need for good debugging tools has always been essential for developers. Inspecting elements simplifies the process of debugging and testing by allowing modification of the web elements, making it invaluable for various tasks across domains.

• Debugging: It helps you debug web pages by identifying locators, attributes, and intermediate values and analyzing performance metrics effectively.
• Test responsiveness: It allows you to check a web page’s responsiveness by simulating various screen sizes and device specifications.
• Code modification and analysis: You can modify CSS, HTML, and JavaScript live on the browser to preview changes without refreshing the page.
• Analyze code: You can explore the code structure of a web page to learn new trends, optimize performance, and enhance user experience.
• Analyze performance: It provides metrics, such as memory usage, network activity, and security parameters, to assess a web page’s performance.

How to Inspect Elements Across Various Browsers?

Different browsers are developed using different browser engines and, therefore, exhibit different behavior and functionality. Other times, the change of behavior is directly linked to browser developers wanting to keep their browsers unique and provide a different experience.

Let’s learn how to inspect elements across some popular browsers such as Google Chrome, Mozilla Firefox, Microsoft Edge, and Safari.

Inspect Elements on Google Chrome

According to StatCounter, Google Chrome has a market share of over 67%, making it one of the most popular browsers worldwide. Three out of every four users choose it, making it the ideal browser to start with.

Inspecting elements on Google Chrome can be done through three methods.

Method 1: Right-click and Inspect

To inspect elements on Google Chrome, right-click on the page and select Inspect from the options.

Method 2: Using Developer tools

The second method is to select the Developer tools option. This is because the inspect element is simply an option within the Developer tools.

To access it, follow the steps given below:

1. Visit any website or webpage on Google Chrome.
2. Click on the three dots for more options, then select More tools, followed by Developer tools.

Method 3: Keyboard Shortcuts

The fastest way to inspect elements on Google Chrome is by pressing the key combination Ctrl + Shift + C on Windows or Cmd + Option + I if you are using macOS.

Inspect Elements on Mozilla Firefox

According to StatCounter, the browser market share of Mozilla Firefox holds over 2.6% of all Internet users and is still being used by many for development and testing purposes.

Similar to Google Chrome, inspecting elements on Mozilla Firefox can be done through three methods.

Method 1: Right-click and Inspect

To inspect the element on Mozilla Firefox, right-click on the page and select Inspect (Q) from the options.

Method 2: Using Web Developer Tools

The second method to inspect elements on Mozilla Firefox is by opening the Web Developer Tools option on the browser.

To access it, follow the steps given below:

1. Visit any webpage or website on Mozilla Firefox.
2. Click the three dashes (hamburger menu option) at the top right and select More tools, followed by Web Developer Tools.

Method 3: Keyboard Shortcuts

The fastest way to inspect elements on Mozilla Firefox is to directly press the key combination Ctrl + Shift + C on Windows or Cmd + Option + I on macOS.

The web inspector in Mozilla Firefox is slightly different from that in Google Chrome, as there are a few notable differences.

The first difference is that Firefox’s inspector is divided into three panels instead of two. Each option (or tab) has an icon along with its name. The dock options are also placed differently.

As mentioned in the previous section, these small differences arise from the varying designs of different browsers. However, their functionalities and features remain the same, even if they are located in different places.

Inspect Elements on Microsoft Edge

According to StatCounter, Microsoft Edge’s browser market share is 4.84%, making it the third-most popular browser.

Since it is based on the Chromium project that drives Google Chrome as well, there will be a ton of similarities between these two browsers, including their official name for web inspector Developer tools.

Similar to Google Chrome, inspecting elements on Microsoft Edge can be done through three methods.

Method 1: Right-click and Inspect

To inspect the element on Microsoft Edge, right-click on the page and select Inspect from the options.

Method 2: Using Developer tools

The second method to inspect elements in Microsoft Edge is by opening the Developer tools option on the browser.

To access it, follow the given steps below:

1. Visit any webpage or website on Microsoft Edge.
2. Select the three dashes (hamburger menu option) on the top-right and go to More tools, followed by the Developer tools option.

Method 3: Keyboard Shortcuts

For Windows users, the key combination to open inspect on Microsoft Edge is Ctrl + Shift + I. Alternatively, developers can use the F12 key to open Developer tools. For macOS users, the key combination is Cmd + Option + I.

Inspect Elements on Safari

Safari is the default browser on macOS and the second most used browser worldwide. According to StatCounter, its browser market share is 18.22%. With a strong presence among macOS users, Safari remains a popular choice for web browsing.

Inspecting elements on Safari can be done through three methods.

Method 1: Right-click and Inspect

To inspect an element on Safari, right-click on the page and select Inspect Element to open the web inspector:

Sometimes, the user may find that this option is not visible. This happens when the developer tools are not enabled for viewing. In such a scenario, follow these steps to enable developer tools.

1. Click on Safari -> Settings. Select Advanced and turn on the option Show features for web developers:

Close this panel, and the Inspect Element option will appear when you right-click.

Method 2: Using Menu options

The second method to open the web inspector in Safari is through the menu options. For this, click on Develop > Show Web Inspector:

Method 3: Keyboard Shortcuts

Safari’s web inspector can also be opened directly through the keyboard shortcut Cmd + Option + I.

Note: If only “Show features for web developers” is enabled, “Develop” will be visible on the top menu screen.

All these above three methods open up the web inspector that looks as follows:

How to Inspect Elements Across Various Browser Versions?

While these four browsers simplify the process, testers can download and install them to begin their web testing. This will ensure that the website looks and functions consistently across various browsers and browser versions. It is essential to check your website across various browser versions, including older ones, to ensure a consistent and seamless user experience.

Many users still run older versions of browsers, and failure to account for these versions can lead to broken designs, functionality issues, and a poor overall experience. Testing on multiple versions ensures that all users, regardless of their browser version, have a fully functional and visually correct experience.

The solution to these challenges lies in cross-browser testing, which involves testing all combinations of target browsers, devices (including small-screen devices), versions, operating systems, OS versions, and resolutions. Performing this process manually can be time-consuming, inefficient resource utilization, and higher costs.

A cloud-based testing platform like LambdaTest can be an effective solution for inspecting elements across different browser versions. With this platform, you can easily test your website on over 3000+ real browser and OS combinations.

This platform lets you run tests on both the latest and older browser versions, eliminating the need to manage multiple local testing environments. Its cloud-based infrastructure helps speed up the testing process, offers scalability, flexibility, and efficiency, and ensures compatibility across different browser versions.

To demonstrate how LambdaTest can help in inspecting elements on various older versions (for specific Chrome versions) follow the steps given below.

1. Create a free account on LambdaTest.
2. From the dashboard or main page, click on the Realtime Testing option.



3. In the Realtime Testing screen, enter the URL, choose the operating system and browser version (new or old), select the resolution, and click Start.



4. Once the specifications are selected, click on Start to launch the web application on the selected configurations.

This method only takes a few seconds to inspect elements on a browser that may not even be supported by the tester’s operating system. It’s the fastest way to conduct cross-browser testing and shorten feedback and release cycles.

If you want to change the browser or browser version, simply stay on the same screen and click the Switch option from the left menu. This allows you to seamlessly switch between browsers and versions.

Practical Use Cases for Inspecting Elements

Inspecting elements on a web page or a website is a common task for developers, testers, and others in various domains. However, its most frequent and critical use cases occur among developers and testers, as they often rely on it daily for long hours.

Let’s explore some practical ways in which inspecting elements can be a lifesaver for developers and testers.

Modifying Elements

Modifying elements using the Inspect tool is a popular front-end use case. By changing an element’s attributes, front-end developers verify which version of an element looks better on a page. This is especially useful when multiple iterations of a web page need to be presented to stakeholders for final approval.

Changing an element via inspect element is similar to modifying the code directly in the editor. It allows you to adjust the text, style, or behavior of the element.

For example, suppose the team has finalized two headings for a hero section:

• Power Your Software Testing with AI and Cloud
• Enhance Your Software Testing with AI and Cloud

These iterations need to be shown to stakeholders for reference, ensuring they understand where the text appears, the background, its placement, etc.

To create the second iteration, hover over the text (“Power Your Software Testing with AI and Cloud”), right-click, and select Inspect.

As seen here, the text “Power Your Software Testing with AI and Cloud” is visible. Double-click on the text and change it to “Enhance Your Software Testing with AI and Cloud” and press enter, and the text will be changed, and the same reflects on the web page:

In this way, the developers can modify other elements as needed. However, these changes are temporary. Once the web page or website is reloaded or refreshed, the modifications will be reverted to their original state, as shown below.

Hiding or Deleting Elements

Another common use case for inspecting elements is hiding or deleting elements from the page. Both front-end and back-end engineers use this technique to understand how the application behaves when certain elements are hidden or deleted.

To hide or delete an element, follow the same steps as before. Instead of editing, you can delete the text or element completely.

1. Visit the same site as used in the previous process.
2. Highlight the text element you want to delete.
3. Right-click on the element and select the Delete element.



4. Press enter, and the element will be deleted:

You can use a CSS style property called visibility to hide an element. To do so, set the attribute value to hidden. For example, hover over the first line, “Power Your Software Testing with AI and Cloud,” and inspect its code.

Add style=”visibility:hidden” to hide the element (or press “h” after selecting the element) and press enter.

Press enter to see the element hidden from the web page.

Inspecting CSS Classes

An important use case for testers is finding the locators for different testing actions. Testers often target elements for testing through their locators, such as ID, class, or XPath. To get the classes using the inspect element option, simply right-click on the element, and the class will be displayed.

For example, the class shown above is for the element “Power Your Software Testing with AI and Cloud .”

The attached class in the image is the direct class of the element. However, the behavior of an element in HTML and CSS can also depend on the parent, descendant, and superclasses. If the element inherits styles from other classes, changes made to those classes will be reflected in the selected element.

Inspecting elements in major browsers provides a complete tree that defines all the connections to the selected class. This tree can typically be found at the end.

The tree also contains elements that are connected to the selected class or element, such as “body.” Any changes made to the elements shown in this tree will directly affect the selected element.

Verifying State Change Behavior

Elements of a web page can exist in different states during the session, depending on user interactions (e.g., hover state, active state). Once the state changes, a series of triggers may be associated with that change on the web page. Observing this behavior without manually changing the state is a common and crucial use case to inspect elements.

To achieve this, find an element that behaves differently in different states (or has multiple states attached to it).

For example, the button “Upgrade” changes color on hover:

To change the state of an element, right-click and inspect it. Then, right-click on the highlighted code and select “Force state.”

Click on “hover” to simulate the hover state.

Now, a small red dot will appear on the element you marked as hover. On the CSS side, you will see the style changes.

After making the change, you can right-click on the element again and uncheck the hover option to test the updated behavior. The element will now change its behavior to reflect the hover state without you needing to hover over the element.

This feature is especially helpful when changes triggered by state transitions occur outside of the element’s boundaries and need to be observed.

Emulating Mobile Devices

The responsiveness property of an application ensures it scales correctly across devices of varying sizes. If not properly managed during development and testing, elements can break, overflow beyond margins, or be misaligned, leading to a poor user experience. Inspect element is an excellent tool to check for responsiveness, especially during development.

To check responsiveness using the inspect element, right-click on a website or web page and inspect. Then, click the icon that represents a laptop and a mobile device.

This will change the viewport to a fixed size based on a mobile device:

As seen, the website is fully responsive for the iPhone 12 Pro. The device name, such as the iPhone 12 Pro, contains a list of other devices for testing responsiveness. If the device is not listed, you can select “Responsive” from the options to open a resizable layout:

The developer can adjust the viewport size freely, and the resolution numbers on top will adjust accordingly:

However, this method has a limitation—there are too few devices in the list, making it difficult to test all target devices. Since users may not update their devices regularly, relying on just 15-17 devices, including tablets and laptops, is insufficient and can result in risky releases. A better solution is to use responsive checker tools like the LT Browser offered by LambdaTest; LT Browser allows responsive testing across 53+ different viewports to ensure a more comprehensive check for responsiveness.

Simulating Mobile Networks

Even a perfectly optimized website can deliver a poor user experience if the end user’s network bandwidth is lower than expected. This issue often arises in real-life scenarios, especially when users rely on cellular networks instead of high-speed connections like WiFi. To address this, teams prioritize analyzing how websites behave under slower network conditions.

The Inspect tool allows developers to simulate mobile network conditions to test application behavior. To use it, start by opening the developer tools by right-clicking and selecting the inspect option.

Navigate to the Network tab:

Note: The above screenshot is from Google Chrome. The tab’s name and location may vary in other browsers.

In the Network tab, you’ll see an option labeled No throttling, which indicates that the browser is using the actual network conditions. To simulate slower networks, choose a different setting from the dropdown:

Select “3G” to mimic a slower network. Then, interact with the website—for example, select an option that redirects to another page—and observe how the page loads more slowly. The Network tab will also display detailed information about requests made to load the page, along with a time chart:

This simulation is invaluable for identifying thresholds and bottlenecks during testing, ensuring the application performs well under various network conditions. Using tools like LT Browser, you can also perform network audits and performance reports of the website across 53+ viewports.

Subscribe to the LambdaTest YouTube Channel to get more tutorial videos about emulating and simulating mobile devices.

Inspecting JavaScript Code

Developers can use the inspect element tool to inspect JavaScript code, along with HTML and CSS. Unlike markup or style sheets, JavaScript debugging offers additional functionalities such as setting breakpoints to pause execution, monitoring variable values, and analyzing the call stack.

These tools enable developers to observe an application’s behavior mid-execution, eliminating the need for multiple print statements or alert popups to debug issues.

To inspect JavaScript code:

1. Right-click anywhere on the web page and select Inspect.
2. Navigate to the “Sources” tab. This tab lists all files loaded on the page, excluding the primary HTML, such as JavaScript, CSS, and image files.



3. Choose the desired file from the left panel.
4. Click on the line number where you want to pause execution.



5. When the execution reaches the specified line, it will pause, allowing you to inspect.

Once the execution is paused, the necessary information will be presented on the right, such as the call stack that has been executed till now.

Inspecting JavaScript code is a powerful use case since it helps developers scrutinize or modify logic efficiently. This capability is particularly useful for understanding abrupt functionality behavior or implementing new requirements.

Keyboard Shortcuts for Inspecting Elements

The following keyboard shortcuts will come in handy while working on the developer tools to inspect elements on the page:

Functionality	Windows	macOS
Open inspect element panel	Ctrl + Shift + C	Cmd + Opt + C
Open the last used panel in the inspect element	Ctrl + Shift + I	Cmd + Opt + I
Open console panel	Ctrl + Shift + J	Cmd + Opt + J
Open Search Tab	Ctrl + Shift + F	Cmd + Opt + F
Toggle device mode (full screen to mobile)	Ctrl + Shift + M	Cmd + Opt + M
Focus next panel	Ctrl + ]	Cmd + ]
Focus previous panel	Ctrl + [	Cmd + [
Search current panel	Ctrl + F	Cmd + F
Open command menu	Ctrl + Shift + P	Cmd + Shift + P
Reload (Normal)	Ctrl + R	Cmd+ R
Reload (Hard)	Ctrl + Shift + R	Cmd + Shift + R
Zoom In	Ctrl + Shift + ”+”	Cmd + Shift + “+”
Zoom Out	Ctrl + “-”	Cmd + “-”
Restore 100% viewport	Ctrl + 0	Cmd + 0
Open the file in the Source panel	Ctrl + 0 or Ctrl + P	Cmd + 0 or Cmd + P
Hide the currently selected element	h	h

Conclusion

Making changes to a website’s source code often requires refreshing the page or rebooting the server, even for small modifications like changing text. This process is necessary for testing, but it can be time-consuming. Browsers have introduced tools like inspecting elements to allow changes within the same session without altering source files.

Inspect element opens browser developer tools, offering functionalities for developers, testers, and even professionals in other fields like marketing and sales. These tools enable users to modify elements, delete them, analyze network performance, throttle bandwidth, edit JS files, and perform responsive testing. Thus, developers can test and understand changes without switching between multiple environments.

Citations

• Chrome DevTools: https://developer.chrome.com/docs/devtools
• Inspect mode: Quickly analyze element properties: https://developer.chrome.com/docs/devtools/inspect-mode
• Elements Panel Overview: https://developer.chrome.com/docs/devtools/elements