How to Inspect Element in Chrome, Safari, and Firefox?

Have you ever wondered what makes web pages look so stunning, with many features and functionality? How do all the codes come together to create a well-appealing and stunning website?

All secrets can be easily revealed by simply inspecting website elements using the Inspect tool in your browser.

With the help of this built-in tool, you can easily peel off the website layer and see how the codes are connected to each element, creating a fully functional website. It will give you an idea of how things work on the front end and also inspire you to recreate them in your projects.

In this post, we will show you how to inspect website elements in popular browsers and provide short methods to use them directly.

---

---

---

How to inspect Elements of a website on any Browser?

You can easily inspect elements of a website on any Browser by simply following these Inspect Elements shortcuts.

1. Inspect Elements shortcuts for the Google Chrome browser

You can access the elements of the website by launching dev tools or Inspect Elements tools by simply pressing the combination of keys Ctrl+Shift+I on your keyboard.

However, another shortcut and straightforward method you can try is simply Right-click on an empty area of the website or any element, and select “Inspect.” After that, you can use the “Elements” tab to view the whole website structure or use the “Console” tab for any sort of warnings or errors.

However, the third but long way for you to get access to dev tools is by clicking the three vertical dots or hamburger menu (the icon with three stacked dots) located at the top right corner of Chrome browser followed by clicking More Tools, then selecting Developer Tools. 

2. Inspect Elements shortcuts for the Firefox Browser

If you are a Firefox browser user, you can try a combination of shortcut keys Ctrl+Shift+C to utilize use dev tools to insect website elements. Or you can also even Right-click on an empty area of the website or any element, and select “Inspect.”

3. Inspect Elements shortcuts for the Opera Browser

For Opera users, press Ctrl+Shift+I on your keyboard to directly access the dev tools to inspect website elements. Similarly, like other browsers, you can also directly Right-click on an empty area of the website or any element, and select “Inspect.”

4. Inspect Elements shortcuts for Edge Browser

In case Edge is the default browser you are using; you can press F12 on your keyboard to open the development tools. Or Simply Right-click on an empty area of the website or any element, and select “Inspect.”

5. Inspect Elements in Safari Browser

The Safari Browser doesn’t have any shortcut method to inspect elements of a website, but you have to follow the steps given below:

To use Inspect Element in Safari, you need to enable developer tools first. Here’s how:

• Click on “Safari” in the top menu and select “Settings.”

• Go to the “Advanced” tab and check the box that says “Show Develop menu in the menu bar.”

• Close the Preferences window.

Now, you can right-click anywhere on a webpage and select “Inspect Element” to open the Elements pane.

The pane will immediately open up at the bottom of your window, which might not look great and also create difficulty in viewing the codes.

For your convenience move it to the side by clicking on the icon in the top-left corner of the pane (next to the “X”) and select “Dock to the right of the window” or “Dock to the left of the window.” (It applies to all the Browsers)

Also, you can even separate the pane from the window if you want to. To change the size of the pane, move your cursor to the edge of the pane until it changes to a double arrow, then click and drag to resize.

Now you might be wondering, what to do after opening the pane or what are the main elements you can check out about the website.

Well, for that purpose check out the below sections.

---

---

Things you can do with Inspect Website Elements Dev tools

Now that you have successfully accessed the Elements tool and opened the pane, you will see a variety of built-in tools available to help you easily play with the website, customize it, and edit it according to your requirements.

We will use Chrome for demonstration purposes for your convenience, but all the features, settings, options, and instructions will be the same across all browsers.

1. Find anything on a site with the help of the Inspect Element Search tool

It can be overwhelming to search for anything in the entire source code, which is complex and sometimes huge. For that reason, DevTools has a built-in Search tool.

To utilize it, open the default Elements pane and press Ctrl + F or Command + F to search through the source code. A Search tab will immediately appear at the bottom of the DevTools pane.

In the search field, you can search for anything, whether CSS, JavaScript files, or specific elements within the source code.

For example, if you type “meta name” in the search field and hit Enter, it will find and show all occurrences of “meta name ” in the code. This helps you check your webpage’s meta, SEO keywords, and indexing status.

Similarly, if you are a web designer, you can search for colors by entering the color hex code, such as #98fb98db, in the search field and pressing Enter. This will show every instance of that color in the site’s CSS and HTML files.

Communication and Fixes:

• The Search tool helps communicate with developers by showing exactly where mistakes are or what needs changing.
• Tell developers the line number with the issue for quicker fixes.
• You can also change the webpage yourself using Elements, the core part of Chrome’s Developer Tools.

---

2. Select and Inspect individual/specific elements of the webpage

You can also view the HTML code of a specific element of a page by directly clicking on the cursor icon in the top left corner of the pane.

Now you can click any page element to reveal its source code in the inspect panel.

---

3. Edit or modify anything with elements

If you enjoy experimenting and playing around with website design and like to bring instant ideas to life, the Inspect Element tool can help you do so.

With this tool, you can make temporary changes to the website’s appearance by modifying or editing the CSS and HTML files and seeing the results in real-time.

However, the changes are not permanent. After you reload the page, the changes will disappear. This way, you can experiment as much as you like without interfering with the source code of the website.

If at some point you find the changes appealing, you can simply copy them and save them elsewhere for later use.

Let’s see some examples for reference.

But before that, let’s get our playground ready and clean. For that purpose, click the Elements tab in the Developer Tools pane. For more room, press the Esc key to close the search box.

Now you are ready with the complete source code on your screen.

• In the top-left corner of the Developer pane, click the icon of a mouse on top of a square.
• Select any element on the page to change it.

Changing Text on a Webpage:

• Click the mouse cursor/square icon.
• Click any text on the page.
• In the Developer Tools pane, double-click the highlighted text to make it editable.

• Type in your new text such as “Fastest” instead of “Premium” as shown in the picture below and press Enter.
• The text change is temporary and will revert when you refresh the page.

Editing Elements:

• Close the Developer pane, highlight any part of the webpage, right-click, and select Inspect.
• The Developer Tools pane will highlight the selected sentence.

Changing the color and font size of Elements :

• In the Developer Tools pane, go to the Styles tab.

• Click into the “font-size” field and change the value to 22px.

• Scroll to “color” and change it to #ff0000.

• Adjust the “font-family” to “Arial”.

Now the fonts were looking like this before the changes we made:

After the changes, it appears like this :

Changing Element States:

If you want to make your website more visually appealing to your visitors when they hover over or interact with buttons or links, you can use the Element States option.

• Click the mouse cursor/box icon and select the element.
• In the Developer Tools pane, right-click on the code, hover over Force state, and click :active:
• Repeat and click :hover:

• Change the “background-color” value to #003b59 to see the new hover color.

Changing Background Images:

• Just copy the link of the image address, i.e. (where the image has been hosted. )

• Open the Inspect Element on the “Power your automation with AI” button.
• Find the “background-color” code and replace the color with url(“image-link”).

Experiment with More Changes:

• You can change text, swap images, and alter colors and styles.
• Try different changes to see how your site could look.

---

4. Test the Website on any screen size or Device

Nowadays, even Google highly recommends that websites should be responsive and easily accessible on any device and screen size. The majority of internet users prefer to access websites on their smartphones rather than laptops and desktops.

Therefore, it has become critical for web admins to make their websites responsive and mobile-friendly while building them.

However, it might not be feasible for any web developer or designer to check the website on every type of device or screen size at once. To solve this issue, the Emulation tool allows you to see and check how your website might appear to different users who are using various devices.

This doesn’t mean you should skip actual testing on different devices, but it can give you a good idea.

This is how you can perform:

• In the Developer Tools pane, click the little phone icon in the top-left corner.
• The page will change into a phone-styled view with a menu at the top to change the size.
• Resize the small browser to see how the page looks on different devices like a tablet, phone, or smaller screen.

• Click the menu at the top to select default device sizes, such as Surface Duo or iPhone 12 Pro.
• The webpage will adjust to the selected device’s size. Use the percentage dropdown next to the dimensions to zoom in.
• Select “Responsive” in the device preset to adjust the view by dragging the right edge of the webpage.
• Toggle between portrait and landscape views by clicking the rotation icon at the end of the top menu.
• Explore different devices to see how the webpage and screen resolution change.
• All other developer tools will also react to the device view.

---

5. Test webpage performance on Emulated mobile networks

Apart from all the visual tests, you can also see how your website performs on different mobile networks such as 5G, 4G, 3G, or slower networks.

To demonstrate this,

• Click the hamburger menu in the top-right corner of the pane.
• Hover over More tools and select Network conditions.

Network Conditions:

• Choose any of the network conditions such as fast 4G, slow 4G, or offline to see how the page works without the internet.

• Click Add… to include your testing speed (e.g., 56Kbps to test dial-up internet).
• Reload the page to see how long it takes to load on a slow connection and how it looks while loading.
• This helps you understand the importance of improving your site’s load time for slow connections.

Changing User Agent:

• In the User-agent field, uncheck Use browser default.
• Select a different user agent (e.g., Firefox, Mac) to see if the site changes its rendering for other browsers.
• This feature lets you see how web pages load even if they claim to work only in a different browser.

---

---

Conclusion

After gaining so much in-depth information about Dev Tools or Inspect Elements, you must have realized that there is a lot of information available about any of your favorite websites in the public domain.

In just a few clicks, you can completely peel down any website, revealing all its secrets of visually stunning features and functionalities without needing to check the original files.

Now you can analyze and view what CSS styles are used, the logic behind complex functionality, how Search engine optimization at the code level is done, and much more.

---