How to Change Website Code: A Beginner’s Guide to Inspect Element

If you work in IT, or even just browse websites frequently, the inspect element feature is incredibly useful. Understanding how to inspect elements in your browser allows you to manipulate the front-end area of ​​a website, including HTML, CSS, JavaScript files, and images.

In addition, Inspect Element can also be used to test scripts, debug errors, and find website page metadata.

Almost all major browsers include this feature by default. Therefore, we have prepared this article, which will discuss how to use Inspect Element in Chrome, Safari, and Mozilla Firefox.

We will also discuss the various functions of inspect element, including editing page elements, inspecting CSS classes, and activating Responsive Design Mode. Make sure to read until the end!

What are the Functions of Inspect Element?

There are a number of Inspect Element functions that you can take advantage of, for example:

• Edit CSS Live – You can use this feature to make edits in the CSS panel and see the changes live.
• Test Layouts – This feature can be used to test various website layouts.
• Diagnostic Debugging – Helps perform website maintenance, as this feature can check for broken code on the website.
• Temporarily Edit Page Elements – You can use this feature to change page elements only on your side, without permanently changing the code.

Who Needs to Use Inspect Element?

The usefulness of Inspect Element is actually very broad, especially for:

• Web developers – After writing code, you can test it on a web page using this feature. Inspect Element can also be used to find errors or bugs on a website.
• Content writers – With Inspect Element, you can hide sensitive information from web pages before taking screenshots for content marketing purposes. Manipulating pages with Inspect Element is much faster than using photo editing software.
• Digital marketers – You can check the extent of competitor SEO efforts, website metadata, target keywords, and the Google index status of their websites.
• Customer Support (CS) staff – This feature is useful for CS teams to help show errors to the web developer team and resolve them.
• Designers – You can modify website designs and see the changes before they are implemented. With this feature, you can also preview web pages on desktop computers or mobile devices. Of course, this will save time and make communication with clients more efficient.

How to Inspect Element in Chrome with Developer Tools

Before discussing how to use Inspect Element in Chrome, we will first explain what Developer Tools are. So, this is a panel equipped with the Inspect Tool, and consists of 3 main parts:

• Elements/Document Object Model (DOM) Panel – This panel contains the DOM structure of the page and provides access to the HTML source code. This section is on the top taskbar of Chrome Developer Tools.
• CSS Panel – Here, you can change, add, and remove CSS properties to change the style rules of web pages. The CSS panel is located in the middle of Developer Tools, under Styles.
• Console – Displays messages recorded in the log and runs JavaScript code. This section appears on the Developer Tools button taskbar.

To Inspect Element in Google Chrome, follow these steps:

1. Open a website in Google Chrome. Here, we are using hostinger.co.id.
2. Click the three vertical dots in the Chrome top menu bar, select More tools, then select Developer tools.

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

Alternatively, you can right-click anywhere on the web page, then select Inspect to access the Developer tools panel.

3. After the Elements tab appears in the browser window, you can edit the page source code. Change the size of the inspection tool area by dragging its corners to make it easier to read.

4. 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 its own window, click the three vertical dots in the top right corner of the panel, then select the Dock side you want.

5. To see the mobile version of the web page, click Toggle device toolbar in the top left corner of the panel. Above the preview, you can change variables to test page performance with various screen resolutions or when bandwidth is limited.

Useful Tips

If you want to inspect a specific element, you can inspect element by right-clicking on the element and selecting the Inspect option. The Inspect Element tool will open, directly pointing to the code of the element you selected.

You can use Inspect Element to change, delete, or hide website content and check CSS classes. It is recommended to regularly clear your browser cache to ensure you are seeing the original appearance of the web page.

Okay, next, we will discuss further how to use Inspect Element to perform certain functions.

Changing Elements

To change page elements, you need to change the CSS or HTML source code of the page. This way, you can edit text and element styles, such as font thickness, size, and color.

In the DOM panel, you can edit simple text. Here’s how to do it:

1. Open any website in Google Chrome. We are using hostinger.co.id again in this example.

2. Right-click anywhere on the web page, and select Inspect to open Developer tools.

3. After opening the Elements box, use the Inspect tool in the form of a cursor icon in the top left of the panel to mark the source code element you want to change.

4. Right-click the marked code in the DOM tree and select Edit as HTML. Or, double-click the text you want to change.

5. The editor box will expand, so you can change the text. Text elements are usually in quotation marks.

6. Finish editing the element to see a preview of the changed text.

Now, changing the style of web elements is also similar to the above. But, you will use the CSS panel. In this example, we mainly use element.style, which contains various properties that can be selected and added to the web page.

Follow these steps:

1. Open any website in Google Chrome. As before, we will use hostinger.co.id.

2. Right-click anywhere on the website, then select Inspect.

3. Use the Inspect tool to mark one of the elements.

4. Click the element.style property at the top of the CSS panel, then add the desired style declaration inside the curly braces. In this example, we added an orange background color to the text block:

5. If you want to add another style declaration, select the element.style property again. The web inspector will add another blank line that you can fill in. In this example, we added a second property to display the text in italics:

6. When you hover over the CSS property, a checkbox will appear to the left of each line. Uncheck the box to hide the style that was previously applied. Or, you can click the property or value to replace it.

Hiding or Deleting Elements

Developer Tools also allows you to hide website elements on a web page. With the Hide Element feature, the CSS panel can create visibility properties to hide any content without deleting it.

To do this, follow these steps:

1. Open a website in Google Chrome. Here, we are still using hostinger.co.id.

2. Right-click anywhere on the web page, then select Inspect.

3. Activate the Inspect feature and click the element you want to hide.

4. Right-click the marked code in the DOM tree, then select Hide Element. A new visibility property will appear in the CSS panel. Uncheck the box to undo the changes.

5. If you want to delete an HTML element, right-click the marked code and select Delete element. Refresh the page if you want to restore the display from the deleted code.

Useful Tips

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

Inspecting CSS Classes

If you are a web designer, inspect element is an effective feature for checking web design code. You can also copy it to style website sections using CSS classes.

Here’s how to do it:

1. Open a website in Google Chrome. Yes, we are using hostinger.co.id again as an example.

2. Right-click anywhere on the web page, then select Inspect.

3. Activate the Inspect tool and hover the cursor over the element you want to check. Basic information such as color, font, and margin will appear, and the DOM panel will highlight its source code.

4. You can also find specific CSS styles by pressing Ctrl+Shift +F on Windows and Linux, or Command+Option+F on macOS.

5. The search tab will appear at the bottom of the panel. Enter your search term, and the inspector tool will display the results.

How to Inspect Element in Other Browsers

Most browsers have features similar to Inspect Element in Google Chrome. Although the workings of the features are almost identical, the steps to activate them will be different.

How to Inspect Element in Safari

Before using the Inspect Element tool in Safari, you must activate the Develop menu:

1. Select Safari in the menu bar and select Preferences from the menu.

2. Select Advanced and check the box next to Show Develop menu in menu bar to activate Inspect Element.
3. Once you activate the feature, the Develop option will be added to the menu.

Here’s how to Inspect Element in Safari:

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

Or, select Develop -> Show Web Inspector from the menu bar.

The Inspect Element tool in Safari will appear at the bottom of the browser window by default. To change its location, click the icon to place the panel on the right side, or open it in its own window.

The Web Inspector panel consists of 2 columns: the first column displays the HTML source code, and the second displays the CSS. Use the cursor to select the interface and see each code and line corresponding to each area.

Alternatively, inspect the page directly by clicking the Inspect tool button in the top left corner of the panel. As you move the cursor, this tool will show the related source code.

Like the Inspect Element tool in Chrome, Safari allows you to edit, delete, and add web page elements.

Follow these steps to change page sections in Safari:

1. Open Safari.

2. Open a website. In this example, we are using hostinger.com.

3. Right-click the HTML code in the Elements panel and hover over Edit.

4. Select an option from the Edit menu.

5. Web Inspector will ask you to enter new text, then this tool will display the changes made in real-time.

To add a new element to the page, follow these steps:

1. Open Safari.

2. Open any website. We are using hostinger.com again here.

3. Right-click on one of the code lines, then select an option from the Add menu. In this example, we selected Child.

4. Specify the element. In this example, we added . You can add any more code next to it.

Here’s how to delete page elements:

1. Open Safari.
2. Open a website. We are accessing hostinger.com in this example.
3. Select any code, then press Delete.

Or, you can also right-click the code line, then select Delete -> Node.

4. To hide the desired web page element, simply right-click the code you want to hide and select Toggle Visibility.

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

1. Open Safari.
2. Access any website. Here, we are still using hostinger.com.
3. Select the Develop option in the menu bar.
4. Select Enter Responsive Design Mode.
5. This mode will display device options and screen resolutions available for website preview.

How to Inspect Element in Mozilla Firefox

The Mozilla Firefox browser also includes this element inspection feature by default. Now, here’s how to use inspect element in Mozilla Firefox:

1. Open Mozilla Firefox.
2. Open a website. We are again using hostinger.co.id in this example.
3. Right-click anywhere on the page, and select Inspect.

You can also click the three lines menu -> More tools.

4. Select Web Developer Tools.

Or, you can use the keyboard shortcut Ctrl+Shift+I to use Inspect Element.

The browser inspector panel will appear at the bottom of the window by default. To change its location, click the three dots menu in the top right corner of the panel and select other display options.

With this tool, you can select specific elements to find their code. Click the Inspect tool in the top left corner of the panel to activate selection mode.

The workings of the Inspector panel in Firefox are similar to Chrome and Safari. HTML source code is color-coded: blue for content, yellow for margin, and purple for padding.

To change page elements in Firefox, follow these steps:

1. Open Mozilla Firefox.
2. Open a website. The example here still uses hostinger.co.id.
3. Right-click on a specific part of the web page, and select Inspect.
4. Double-click to change the text.

Or, right-click and select Edit as HTML to modify the text. The edit area will expand so you can write code.

5. To add new text, select Create New Code.
6. To delete code, just double-click and press Backspace or Delete.

Meanwhile, to change element styles, follow these steps:

1. Open Mozilla Firefox.

2. Open a website. We are still using hostinger.co.id as an example.

3. Open the Inspector panel, then open Filter Styles at the bottom.

4. Uncheck the box next to one of the CSS declarations to disable the style.

5. Click on the section, and the Firefox Inspect Element tool will provide a new line to add new code.

Mozilla Firefox also has Responsive Design Mode for previewing several preset screen resolutions. Here’s how to do it:

1. Open Mozilla Firefox.
2. Access any website. In this example, we are opening hostinger.co.id.
3. Open the Inspector panel and click the Responsive Design Mode icon in the top right corner.

Or, click the three lines menu -> More tools -> Responsive Design Mode.

4. When this mode is activated, you can check the connection speed and device pixel ratio.

Conclusion

Finished! Now you know how to inspect element in Chrome, Safari, and Mozilla Firefox.

Inspect Element is a feature that allows users to manipulate, edit, or add code to web pages from their side, without changing the original code.

This feature is very useful for testing website designs, debugging, excluding sensitive information from screenshots, researching metadata, and finding hidden keywords.

Hopefully, this article has helped you learn how to use Inspect Element and some of its implementations. Do you have any questions or suggestions? Feel free to convey them via the comments below!