{"id":626,"date":"2021-09-01T08:15:00","date_gmt":"2021-09-01T08:15:00","guid":{"rendered":"http:\/\/blog.hostinger.io\/hostinger-tutorials\/uncategorized\/websitehow-to-inspect-and-change-style-using-google-chrome\/"},"modified":"2025-04-13T08:21:42","modified_gmt":"2025-04-13T08:21:42","slug":"how-to-inspect-element-using-google-chrome","status":"publish","type":"post","link":"\/tutorials\/how-to-inspect-element-using-google-chrome","title":{"rendered":"How to inspect element and make temporary changes to any website"},"content":{"rendered":"<p>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&rsquo;s front-end source code, including its HTML, CSS, JavaScript, and image files.<\/p><p>Aside from temporarily changing the appearance of a website, the Inspect Element tool allows users to test scripts, debug errors, and locate a web page&rsquo;s metadata.<\/p><p>All major browsers include the Inspect Element feature. This article will demonstrate how to use and access Inspect Element in Google Chrome, Safari, and Mozilla Firefox.<\/p><p>We&rsquo;ll also go over how to use it, such as how to change a page element, inspect CSS classes, and enable Responsive Design Mode.<\/p><p class=\"has-text-align-center\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Website-Launch-Checklist-EN.pdf\" target=\"_blank\" rel=\"noopener\">Download website launch checklist<\/a><\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/How-to-Speed-Up-Your-Website-EN.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"2048\" height=\"566\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/public\" alt=\"\" class=\"wp-image-69260\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/w=2048,fit=scale-down 2048w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2022\/11\/eBook-Speed-Up-your-website.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 2048px) 100vw, 2048px\" \/><\/a><\/figure><p>\n\n\n\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-what-can-you-do-with-inspect-element\">What Can You Do With Inspect Element<\/h2><p>The <a href=\"https:\/\/support.hostinger.com\/en\/articles\/2152545-how-to-inspect-website-elements\" target=\"_blank\" rel=\"noreferrer noopener\">Inspect Element<\/a> feature offers many benefits to users. Here are several things you can do with it:<\/p><ul class=\"wp-block-list\">\n<li><strong>CSS live-editing<\/strong> &#8210; allows you to make edits in the CSS panel and see the changes in real time.<\/li>\n\n\n\n<li><strong>Layout testing<\/strong> &#8210; lets you test different website layouts.<\/li>\n\n\n\n<li><strong>Debug diagnostics<\/strong> &#8210; helps website maintenance as it can check whether a site contains broken code.<\/li>\n\n\n\n<li><strong>Temporary editing<\/strong> &#8210; allows you to tweak page elements without making permanent changes to the code.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-why-do-you-need-to-inspect-web-elements\">Why Do You Need to Inspect Web Elements<\/h2><p>The Inspect Element feature is valuable for many use cases, especially for:<\/p><ul class=\"wp-block-list\">\n<li><strong>Web developers <\/strong>&ndash; you can test the code you&rsquo;ve written and interact with it on a web page. You can also use Inspect Element to find errors or bugs on a site.<\/li>\n\n\n\n<li><strong>Content writers <\/strong>&ndash; 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.<\/li>\n\n\n\n<li><strong>Digital marketers <\/strong>&ndash; lets you check a competitor&rsquo;s <a href=\"\/tutorials\/what-is-seo\/\" target=\"_blank\" rel=\"noreferrer noopener\">search engine optimization (SEO)<\/a> efforts, website metadata, targeted keywords, and Google index status.<\/li>\n\n\n\n<li><strong>Customer support agents <\/strong>&ndash; helps when assisting web developers in pinpointing and fixing a website error.<\/li>\n\n\n\n<li><strong>Designers <\/strong>&ndash; help modify a site&rsquo;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.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-how-to-inspect-element-using-chrome-developer-tools\">How to Inspect Element Using Chrome Developer Tools<\/h2><p>Before exploring the Inspect Element tool in Google Chrome, it&rsquo;s essential to know about the Developers Tools. It is a panel that comes with the Inspect Tool, and it comprises three main parts:<\/p><ul class=\"wp-block-list\">\n<li><strong>Elements\/Document Object Model (DOM) panel<\/strong> &ndash; contains the page&rsquo;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.<\/li>\n\n\n\n<li><strong>CSS panel<\/strong> &ndash; 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 <strong>Styles<\/strong>.<\/li>\n\n\n\n<li><strong>Console <\/strong>&ndash; displays logged messages and runs the JavaScript code. It appears at the button taskbar of Developer Tools.<\/li>\n<\/ul><p>Here&rsquo;s how to open Inspect Element using Google Chrome:<\/p><ol class=\"wp-block-list\">\n<li>Open a website in <strong>Google Chrome<\/strong>. We will be using <strong>hostinger.com<\/strong> for this tutorial.<\/li>\n\n\n\n<li>Click on the <strong>three vertical dots<\/strong> on Chrome&rsquo;s top menu bar, choose <strong>More tools<\/strong>, then select <strong>Developer tools<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Developer-tools-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"401\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Developer-tools-on-Chrome.png\/public\" alt=\"Accessing Developer tools on Chrome.\" class=\"wp-image-60091\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Developer-tools-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Developer-tools-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Developer-tools-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Developer-tools-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Alternatively, use the keyboard shortcuts &ndash; <strong>Ctrl + Shift + I<\/strong> for Windows or Linux and <strong>Cmd + Option + I<\/strong> for macOS users.<\/p><p>Or, right-click on the web page and choose <strong>Inspect <\/strong>to access the <strong>Developer tools <\/strong>panel.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Inspect-Element-on-Chrome.png\/public\" alt=\"Opening Inspect Element on Chrome.\" class=\"wp-image-60093\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Once the <strong>Elements <\/strong>tab appears on your browser window, you can edit the page&rsquo;s source code. Resize the inspector box by dragging its corners for better readability.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Elements-panel-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"453\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Elements-panel-on-Chrome.png\/public\" alt=\"The Elements panel on Chrome.\" class=\"wp-image-60094\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Elements-panel-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Elements-panel-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Elements-panel-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Elements-panel-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>By default, the <strong>Elements <\/strong>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 <strong>three vertical dots<\/strong> at the upper-right corner of the panel and choose your preferred <strong>Dock side<\/strong> setting.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Elements-panel-location-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"456\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Elements-panel-location-on-Chrome.png\/public\" alt=\"Changing the Elements panel location on Chrome.\" class=\"wp-image-60095\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Elements-panel-location-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Elements-panel-location-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Elements-panel-location-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Elements-panel-location-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>To see how the web page appears on mobile devices, click the <strong>Toggle device toolbar<\/strong> 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.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Preview-of-the-hostinger.com-website-on-a-different-screen-resolution-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"505\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Preview-of-the-hostinger.com-website-on-a-different-screen-resolution-on-Chrome.png\/public\" alt=\"Preview of the hostinger.com website on a different screen resolution on Chrome.\" class=\"wp-image-60096\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Preview-of-the-hostinger.com-website-on-a-different-screen-resolution-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Preview-of-the-hostinger.com-website-on-a-different-screen-resolution-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Preview-of-the-hostinger.com-website-on-a-different-screen-resolution-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Preview-of-the-hostinger.com-website-on-a-different-screen-resolution-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Pro Tip<\/h4>\n                    <p>To inspect a specific element, right-click on it and choose the Inspect option. The <strong>inspect<\/strong> element tools will open and automatically highlight the source code of the selected element.<\/p>\n                <\/div>\n\n\n\n<\/p><p>You can use Inspect Element to change, delete, or hide site content and check <a href=\"\/tutorials\/website\/how-to-create-classes-for-a-responsive-website-on-a-css-file\" target=\"_blank\" rel=\"noreferrer noopener\">CSS classes<\/a>. We recommend <a href=\"\/tutorials\/clear-browser-cache\" target=\"_blank\" rel=\"noreferrer noopener\">clearing the browser cache<\/a> regularly to ensure you&rsquo;re viewing the original appearance of the web page.<\/p><p>The following sections will provide in-depth information on how to perform common Inspect Element tasks.<\/p><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-web-hosting\" href=\"\/web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h3 class=\"wp-block-heading\" id=\"h-change-an-element\">Change an Element<\/h3><p>To change a page element, you need to alter the page&rsquo;s CSS or <a href=\"\/tutorials\/html-cheat-sheet\" target=\"_blank\" rel=\"noreferrer noopener\">HTML<\/a> source code. This way, you can edit text and its style elements, such as font weight, size, and color.<\/p><p>The DOM panel enables simple text modification. Here&rsquo;s how to do it:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Google Chrome<\/strong> and go to a website. In this example, we&rsquo;re using <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click anywhere on the web page and select <strong>Inspect<\/strong> to open the <strong>Developer tools<\/strong>.<\/li>\n\n\n\n<li>After opening the <strong>Elements <\/strong>box, use the <strong>Inspect <\/strong>tool &#8210; the <strong>cursor icon<\/strong> at the top left of the panel &#8210; to highlight the source code element you want to change.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Highlighting-the-source-code-using-the-Inspect-tool-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"371\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Highlighting-the-source-code-using-the-Inspect-tool-on-Chrome.png\/public\" alt=\"Highlighting the source code using the Inspect tool on Chrome.\" class=\"wp-image-60097\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Highlighting-the-source-code-using-the-Inspect-tool-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Highlighting-the-source-code-using-the-Inspect-tool-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Highlighting-the-source-code-using-the-Inspect-tool-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Highlighting-the-source-code-using-the-Inspect-tool-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Right-click on the code highlighted within the DOM tree and select <strong>Edit as HTML<\/strong>. Alternatively, double-click the text you want to alter.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-as-HTML-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"430\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-as-HTML-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Editing a code as HTML using Inspect Element on Chrome.\" class=\"wp-image-60099\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-as-HTML-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-as-HTML-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-as-HTML-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-as-HTML-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>The editor box will expand, allowing you to modify the text. Text elements are usually encased in quotation marks.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editor-box-on-the-Chrome_s-Inspect-Element.png\"><img decoding=\"async\" width=\"1024\" height=\"370\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editor-box-on-the-Chrome_s-Inspect-Element.png\/public\" alt=\"The editor box on the Chrome's Inspect Element.\" class=\"wp-image-60100\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editor-box-on-the-Chrome_s-Inspect-Element.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editor-box-on-the-Chrome_s-Inspect-Element.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editor-box-on-the-Chrome_s-Inspect-Element.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editor-box-on-the-Chrome_s-Inspect-Element.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>Deselect the element to preview the changes.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-texts-are-successfully-edited-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"369\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-texts-are-successfully-edited-using-Inspect-Element-on-Chrome.png\/public\" alt=\"The texts are successfully edited using Inspect Element on Chrome.\" class=\"wp-image-60102\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-texts-are-successfully-edited-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-texts-are-successfully-edited-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-texts-are-successfully-edited-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-texts-are-successfully-edited-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Modifying the style of web elements involves similar steps, but you&rsquo;ll use the CSS panel instead. We&rsquo;ll mainly use <strong>element.style<\/strong>, which comprises different properties to choose from and add to the web page.<\/p><p>Follow these steps:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Google Chrome<\/strong> and access a website. In this example, we&rsquo;re using <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click anywhere on the website and choose <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Use the <strong>Inspect <\/strong>tool to highlight an element.<\/li>\n\n\n\n<li>Click on the <strong>element.style<\/strong> 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:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-a-background-style-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"334\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-a-background-style-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Changing a background style using Inspect Element on Chrome.\" class=\"wp-image-60103\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-a-background-style-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-a-background-style-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-a-background-style-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-a-background-style-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>If you want to put another style declaration, select the <strong>element.style<\/strong> property again. The web inspector will add another empty line to fill. Here, we append a second property to display the text in italics:<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-font-style-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"340\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-font-style-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Modifying a font style using Inspect Element on Chrome.\" class=\"wp-image-60104\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-font-style-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-font-style-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-font-style-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-font-style-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>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.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Unchecking-the-element-style-options-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"355\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Unchecking-the-element-style-options-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Unchecking the element style options using Inspect Element on Chrome.\" class=\"wp-image-60107\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Unchecking-the-element-style-options-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Unchecking-the-element-style-options-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Unchecking-the-element-style-options-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Unchecking-the-element-style-options-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-hide-or-delete-an-element\">Hide or Delete an Element<\/h3><p>The Developer Tools also let you hide site elements on web pages. With the <strong>Hide Element<\/strong> feature, the CSS panel can create a visibility property to hide any site content without deleting it.<\/p><p>Follow these instructions:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Google Chrome<\/strong> and go to a website. Here, we use <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click on any part of the web page and select <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Enable the <strong>Inspect <\/strong>feature and click on the element you want to hide.<\/li>\n\n\n\n<li>Right-click on the code highlighted on the <strong>DOM tree<\/strong> and select <strong>Hide Element<\/strong>. A new visibility property will appear on the <strong>CSS panel<\/strong>. Uncheck it to undo the change.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-an-element_s-style-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"356\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-an-element_s-style-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Hiding an element's style using Inspect Element on Chrome.\" class=\"wp-image-60108\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-an-element_s-style-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-an-element_s-style-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-an-element_s-style-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-an-element_s-style-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>If you want to remove an HTML element instead, right-click on the highlighted code and select the <strong>Delete element<\/strong>. Refreshing the page will restore the removed code.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-a-code-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"374\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-a-code-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Deleting a code using Inspect Element on Chrome.\" class=\"wp-image-60109\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-a-code-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-a-code-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-a-code-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-a-code-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Pro Tip<\/h4>\n                    <p>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.<\/p>\n                <\/div>\n\n\n\n<\/p><h3 class=\"wp-block-heading\" id=\"h-inspect-css-classes\">Inspect CSS Classes<\/h3><p>Inspecting page elements is an excellent way to check web design code. You can also copy them to style your website&rsquo;s sections using CSS classes.<\/p><p>Here&rsquo;s how to do it:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Google Chrome<\/strong> and access a website. Here, we use <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click anywhere on the web page and select <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Activate the <strong>Inspect <\/strong>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.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Checking-an-element_s-CSS-information-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"339\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Checking-an-element_s-CSS-information-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Checking an element's CSS information using Inspect Element on Chrome.\" class=\"wp-image-60112\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Checking-an-element_s-CSS-information-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Checking-an-element_s-CSS-information-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Checking-an-element_s-CSS-information-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Checking-an-element_s-CSS-information-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>You can also find a specific CSS style by pressing <strong>Ctrl+Shift +F<\/strong> on Windows and Linux or <strong>Command+Option+F<\/strong> on macOS.<\/li>\n\n\n\n<li>A search tab will appear on the lower part of the panel. Enter your query, and the inspector will generate the results.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-search-box-using-Inspect-Element-on-Chrome.png\"><img decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-search-box-using-Inspect-Element-on-Chrome.png\/public\" alt=\"Opening a search box using Inspect Element on Chrome.\" class=\"wp-image-60113\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-search-box-using-Inspect-Element-on-Chrome.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-search-box-using-Inspect-Element-on-Chrome.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-search-box-using-Inspect-Element-on-Chrome.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-search-box-using-Inspect-Element-on-Chrome.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-how-to-inspect-element-in-other-browsers\">How to Inspect Element in Other Browsers<\/h2><p>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.<\/p><h3 class=\"wp-block-heading\" id=\"h-inspect-element-in-safari\">Inspect Element in Safari<\/h3><p>Before you can use the Inspect Element tool in Safari, you need to enable the <strong>Develop<\/strong> menu:<\/p><ol class=\"wp-block-list\">\n<li>Select <strong>Safari <\/strong>on the menu bar and choose <strong>Preferences <\/strong>from the menu.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Setting-Safari_s-preferences-on-macOS.png\"><img decoding=\"async\" width=\"487\" height=\"603\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Setting-Safari_s-preferences-on-macOS.png\/public\" alt=\"Setting Safari's preferences on macOS.\" class=\"wp-image-60114\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Setting-Safari_s-preferences-on-macOS.png\/w=487,fit=scale-down 487w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Setting-Safari_s-preferences-on-macOS.png\/w=242,fit=scale-down 242w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Setting-Safari_s-preferences-on-macOS.png\/w=121,fit=scale-down 121w\" sizes=\"(max-width: 487px) 100vw, 487px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"2\">\n<li>Choose <strong>Advanced <\/strong>and tick the box next to <strong>Show Develop menu in menu bar<\/strong> to enable Inspect Element.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\"><img decoding=\"async\" width=\"1212\" height=\"659\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\/public\" alt=\"Enabling the Develop menu on Safari.\" class=\"wp-image-60115\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\/w=1212,fit=scale-down 1212w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Develop-menu-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1212px) 100vw, 1212px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"3\">\n<li>Once you activate the feature, you&rsquo;ll see a <strong>Develop <\/strong>option added to the menu.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Develop-menu-on-macOS.png\"><img decoding=\"async\" width=\"1024\" height=\"43\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Develop-menu-on-macOS.png\/public\" alt=\"The Develop menu on macOS.\" class=\"wp-image-60116\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Develop-menu-on-macOS.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Develop-menu-on-macOS.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Develop-menu-on-macOS.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Develop-menu-on-macOS.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Here&rsquo;s how to use Inspect Element on Safari:<\/p><ol class=\"wp-block-list\">\n<li>Open the <strong>Safari <\/strong>browser.<\/li>\n\n\n\n<li>Right-click anywhere on the page and choose <strong>Inspect Element<\/strong>, or you can use the keyboard shortcut <strong>Command+Option+I<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Inspect-Element-on-Safari.png\"><img decoding=\"async\" width=\"1024\" height=\"535\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Inspect-Element-on-Safari.png\/public\" alt=\"Accessing Inspect Element on Safari.\" class=\"wp-image-60118\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Inspect-Element-on-Safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Inspect-Element-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Inspect-Element-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Inspect-Element-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Alternatively, choose <strong>Develop <\/strong>-&gt; <strong>Show Web Inspector<\/strong> from the menu bar.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Showing-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"808\" height=\"656\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Showing-Web-Inspector-on-Safari.png\/public\" alt=\"Showing Web Inspector on Safari.\" class=\"wp-image-60119\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Showing-Web-Inspector-on-Safari.png\/w=808,fit=scale-down 808w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Showing-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Showing-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Showing-Web-Inspector-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 808px) 100vw, 808px\" \/><\/a><\/figure><\/div><p>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.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\"><img decoding=\"async\" width=\"1056\" height=\"647\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\/public\" alt=\"Changing the Web Inspector panel location on Safari.\" class=\"wp-image-60120\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\/w=1056,fit=scale-down 1056w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Web-Inspector-panel-location-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1056px) 100vw, 1056px\" \/><\/a><\/figure><\/div><p>The Web Inspector panel consists of two columns &ndash; 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.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Web-Inspector-panel-on-Safari.png\"><img decoding=\"async\" width=\"1024\" height=\"392\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Web-Inspector-panel-on-Safari.png\/public\" alt=\"The Web Inspector panel on Safari.\" class=\"wp-image-60121\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Web-Inspector-panel-on-Safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Web-Inspector-panel-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Web-Inspector-panel-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Web-Inspector-panel-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Alternatively, inspect the page directly by clicking the <strong>Inspect <\/strong>tool button on the panel&rsquo;s upper left corner. As you move the cursor, the tool shows the corresponding source code.<\/p><p>Like the Google Chrome Inspect Element tool, Safari allows users to edit, remove, and add web page elements.<\/p><p>Here&rsquo;s how to modify a part of a page:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Go to a website. In this example, we use <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click an HTML code on the <strong>Elements <\/strong>panel and hover over <strong>Edit<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-using-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"1024\" height=\"590\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-using-Web-Inspector-on-Safari.png\/public\" alt=\"Editing a code using Web Inspector on Safari.\" class=\"wp-image-60122\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-using-Web-Inspector-on-Safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-using-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-using-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-code-using-Web-Inspector-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Select an option from the <strong>Edit <\/strong>menu.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editing-options-inside-Safari_s-Web-Inspector.png\"><img decoding=\"async\" width=\"1024\" height=\"390\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editing-options-inside-Safari_s-Web-Inspector.png\/public\" alt=\"The editing options inside Safari's Web Inspector.\" class=\"wp-image-60125\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editing-options-inside-Safari_s-Web-Inspector.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editing-options-inside-Safari_s-Web-Inspector.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editing-options-inside-Safari_s-Web-Inspector.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-editing-options-inside-Safari_s-Web-Inspector.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Web Inspector will prompt you to input the new text and display the changes you&rsquo;ve made in real-time.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-text-using-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"1024\" height=\"591\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-text-using-Web-Inspector-on-Safari.png\/public\" alt=\"Modifying a text using Web Inspector on Safari.\" class=\"wp-image-60127\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-text-using-Web-Inspector-on-Safari.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-text-using-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-text-using-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Modifying-a-text-using-Web-Inspector-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Follow these steps to add a new element to a page:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Access a website. In this case, we&rsquo;re going to use <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click a line of code and select an option from the <strong>Add <\/strong>menu. In this example, we&rsquo;re choosing <strong>Child<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-child-element-to-a-web-page-using-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"738\" height=\"669\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-child-element-to-a-web-page-using-Web-Inspector-on-Safari.png\/public\" alt=\"Adding a child element to a web page using Web Inspector on Safari.\" class=\"wp-image-60128\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-child-element-to-a-web-page-using-Web-Inspector-on-Safari.png\/w=738,fit=scale-down 738w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-child-element-to-a-web-page-using-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-child-element-to-a-web-page-using-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 738px) 100vw, 738px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Specify the element. In this example, we&rsquo;ll add an <strong>&lt;h1&gt;<\/strong>. You can continue writing any code you&rsquo;d like next to it.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-code-using-Web-Inspector-on-macOS-Safari.png\"><img decoding=\"async\" width=\"761\" height=\"610\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-code-using-Web-Inspector-on-macOS-Safari.png\/public\" alt=\"Adding a new code using Web Inspector on macOS Safari.\" class=\"wp-image-60129\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-code-using-Web-Inspector-on-macOS-Safari.png\/w=761,fit=scale-down 761w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-code-using-Web-Inspector-on-macOS-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-code-using-Web-Inspector-on-macOS-Safari.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/a><\/figure><\/div><p>Here&rsquo;s how to delete a page element:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Go to a website. In this example, we&rsquo;re accessing<strong> hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Select any code and press <strong>Delete<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-an-HTML-code-using-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"758\" height=\"623\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-an-HTML-code-using-Web-Inspector-on-Safari.png\/public\" alt=\"Deleting an HTML code using Web Inspector on Safari.\" class=\"wp-image-60130\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-an-HTML-code-using-Web-Inspector-on-Safari.png\/w=758,fit=scale-down 758w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-an-HTML-code-using-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deleting-an-HTML-code-using-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 758px) 100vw, 758px\" \/><\/a><\/figure><\/div><p>Alternatively, right-click on a line of code, and select <strong>Delete<\/strong> -&gt; <strong>Node<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Removing-a-node-using-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"759\" height=\"667\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Removing-a-node-using-Web-Inspector-on-Safari.png\/public\" alt=\"Removing a node using Web Inspector on Safari.\" class=\"wp-image-60132\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Removing-a-node-using-Web-Inspector-on-Safari.png\/w=759,fit=scale-down 759w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Removing-a-node-using-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Removing-a-node-using-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 759px) 100vw, 759px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>To hide an element of the desired web page, simply right-click on the code you want to conceal and choose <strong>Toggle Visibility<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-a-code-using-Web-Inspector-on-Safari.png\"><img decoding=\"async\" width=\"735\" height=\"669\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-a-code-using-Web-Inspector-on-Safari.png\/public\" alt=\"Hiding a code using Web Inspector on Safari.\" class=\"wp-image-60133\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-a-code-using-Web-Inspector-on-Safari.png\/w=735,fit=scale-down 735w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-a-code-using-Web-Inspector-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hiding-a-code-using-Web-Inspector-on-Safari.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 735px) 100vw, 735px\" \/><\/a><\/figure><\/div><p>In addition, Safari has a <strong>Responsive Design Mode<\/strong> that allows you to preview a website across various devices, such as desktop and mobile screens. Here&rsquo;s how to use it:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Safari<\/strong>.<\/li>\n\n\n\n<li>Access a website. In this example, we&rsquo;re using <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Select the <strong>Develop <\/strong>option on the menu bar.<\/li>\n\n\n\n<li>Choose <strong>Enter Responsive Design Mode<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-website-using-Responsive-Design-Mode-on-Safari.png\"><img decoding=\"async\" width=\"817\" height=\"552\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-website-using-Responsive-Design-Mode-on-Safari.png\/public\" alt=\"Opening a website using Responsive Design Mode on Safari.\" class=\"wp-image-60134\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-website-using-Responsive-Design-Mode-on-Safari.png\/w=817,fit=scale-down 817w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-website-using-Responsive-Design-Mode-on-Safari.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-website-using-Responsive-Design-Mode-on-Safari.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-a-website-using-Responsive-Design-Mode-on-Safari.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 817px) 100vw, 817px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>It will show the available device options and screen resolutions for site preview.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Safari.png\"><img decoding=\"async\" width=\"587\" height=\"607\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Safari.png\/public\" alt=\"Using Responsive Design Mode on Safari.\" class=\"wp-image-60137\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Safari.png\/w=587,fit=scale-down 587w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Safari.png\/w=290,fit=scale-down 290w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Safari.png\/w=145,fit=scale-down 145w\" sizes=\"(max-width: 587px) 100vw, 587px\" \/><\/a><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-inspect-element-in-mozilla-firefox\">Inspect Element in Mozilla Firefox<\/h3><p>The Inspect Element panel is also a built-in feature in the Mozilla Firefox browser. Here&rsquo;s how to use it:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Go to a website. In this example, we&rsquo;re using <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click on any part of the page and select <strong>Inspect<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-the-Inspect-Element-tool-on-Firefox.png\"><img decoding=\"async\" width=\"898\" height=\"695\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-the-Inspect-Element-tool-on-Firefox.png\/public\" alt=\"Opening the Inspect Element tool on Firefox.\" class=\"wp-image-60139\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-the-Inspect-Element-tool-on-Firefox.png\/w=898,fit=scale-down 898w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-the-Inspect-Element-tool-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-the-Inspect-Element-tool-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-the-Inspect-Element-tool-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 898px) 100vw, 898px\" \/><\/a><\/figure><\/div><p>Alternatively, click the <strong>three-stripes<\/strong> menu -&gt; <strong>More tools<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-More-tools-on-Firefox.png\"><img decoding=\"async\" width=\"265\" height=\"640\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-More-tools-on-Firefox.png\/public\" alt=\"Accessing More tools on Firefox.\" class=\"wp-image-60141\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-More-tools-on-Firefox.png\/w=265,fit=scale-down 265w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-More-tools-on-Firefox.png\/w=124,fit=scale-down 124w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-More-tools-on-Firefox.png\/w=62,fit=scale-down 62w\" sizes=\"(max-width: 265px) 100vw, 265px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Select <strong>Web Developer Tools<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Web-Developer-Tools-on-Firefox.png\"><img decoding=\"async\" width=\"264\" height=\"375\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Web-Developer-Tools-on-Firefox.png\/public\" alt=\"Opening Web Developer Tools on Firefox.\" class=\"wp-image-60143\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Web-Developer-Tools-on-Firefox.png\/w=264,fit=scale-down 264w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Web-Developer-Tools-on-Firefox.png\/w=211,fit=scale-down 211w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Opening-Web-Developer-Tools-on-Firefox.png\/w=106,fit=scale-down 106w\" sizes=\"(max-width: 264px) 100vw, 264px\" \/><\/a><\/figure><\/div><p>You can also use the keyboard shortcut <strong>Ctrl+Shift+I<\/strong> to access<strong> Inspect Element<\/strong>.<\/p><p>The Firefox inspector appears at the bottom of the window by default. To change its location, click the <strong>three-dots<\/strong> menu on the panel&rsquo;s upper right corner and choose another display option.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Inspector-panel_s-location-on-Firefox.png\"><img decoding=\"async\" width=\"208\" height=\"267\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Inspector-panel_s-location-on-Firefox.png\/public\" alt=\"Changing the Inspector panel's location on Firefox.\" class=\"wp-image-60144\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Inspector-panel_s-location-on-Firefox.png\/w=208,fit=scale-down 208w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Changing-the-Inspector-panel_s-location-on-Firefox.png\/w=117,fit=scale-down 117w\" sizes=\"(max-width: 208px) 100vw, 208px\" \/><\/a><\/figure><\/div><p>This tool allows you to select a specific element to find its code. Click the <strong>Inspect <\/strong>tool on the top-left corner of the panel to enter selection mode.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Inspect-tool-on-Firefox_s-Inspector-panel.png\"><img decoding=\"async\" width=\"499\" height=\"162\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Inspect-tool-on-Firefox_s-Inspector-panel.png\/public\" alt=\"Enabling the Inspect tool on Firefox's Inspector panel.\" class=\"wp-image-60146\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Inspect-tool-on-Firefox_s-Inspector-panel.png\/w=499,fit=scale-down 499w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Inspect-tool-on-Firefox_s-Inspector-panel.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Enabling-the-Inspect-tool-on-Firefox_s-Inspector-panel.png\/w=150,fit=scale-down 150w\" sizes=\"(max-width: 499px) 100vw, 499px\" \/><\/a><\/figure><\/div><p>The Inspector panel in Firefox works similarly to Chrome and Safari. The HTML source code is color-coded &ndash; <strong>blue <\/strong>is content, <strong>yellow <\/strong>is margin, and <strong>purple <\/strong>is padding.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Hovering-a-web-page_s-element-using-the-Inspect-tool-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hovering-a-web-page_s-element-using-the-Inspect-tool-on-Firefox.png\/public\" alt=\"Hovering a web page's element using the Inspect tool on Firefox.\" class=\"wp-image-60147\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hovering-a-web-page_s-element-using-the-Inspect-tool-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hovering-a-web-page_s-element-using-the-Inspect-tool-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hovering-a-web-page_s-element-using-the-Inspect-tool-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Hovering-a-web-page_s-element-using-the-Inspect-tool-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Here&rsquo;s how to modify a page element on Firefox:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Access a website. In this example, we&rsquo;re using <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Right-click on any specific part of the web page and select <strong>Inspect<\/strong>.<\/li>\n\n\n\n<li>Double-click to change the text.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Choosing-a-text-to-modify-using-Inspect-Element-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"312\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Choosing-a-text-to-modify-using-Inspect-Element-on-Firefox.png\/public\" alt=\"Choosing a text to modify using Inspect Element on Firefox.\" class=\"wp-image-60149\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Choosing-a-text-to-modify-using-Inspect-Element-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Choosing-a-text-to-modify-using-Inspect-Element-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Choosing-a-text-to-modify-using-Inspect-Element-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Choosing-a-text-to-modify-using-Inspect-Element-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Alternatively, right-click and choose <strong>Edit as HTML<\/strong> to modify the text. The box will expand to allow you to write the code.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-page-element-as-HTML-using-Inspect-Element-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"310\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-page-element-as-HTML-using-Inspect-Element-on-Firefox.png\/public\" alt=\"Editing a page element as HTML using Inspect Element on Firefox.\" class=\"wp-image-60150\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-page-element-as-HTML-using-Inspect-Element-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-page-element-as-HTML-using-Inspect-Element-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-page-element-as-HTML-using-Inspect-Element-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Editing-a-page-element-as-HTML-using-Inspect-Element-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>To add a new text, select <strong>Create New Code<\/strong>.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Writing-a-new-code-using-Inspect-Element-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"313\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Writing-a-new-code-using-Inspect-Element-on-Firefox.png\/public\" alt=\"Writing a new code using Inspect Element on Firefox.\" class=\"wp-image-60152\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Writing-a-new-code-using-Inspect-Element-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Writing-a-new-code-using-Inspect-Element-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Writing-a-new-code-using-Inspect-Element-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Writing-a-new-code-using-Inspect-Element-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"6\">\n<li>To delete the code, simply double-click and press <strong>Backspace <\/strong>or <strong>Delete<\/strong>.<\/li>\n<\/ol><p>Follow these steps to modify the style of an element:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Go to a website. In this example, we&rsquo;re using <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Open the <strong>Inspector <\/strong>panel and go to <strong>Filter Styles<\/strong> at the bottom section.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Filter-Styles-panel-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"291\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Filter-Styles-panel-on-Firefox.png\/public\" alt=\"The Filter Styles panel on Firefox.\" class=\"wp-image-60154\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Filter-Styles-panel-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Filter-Styles-panel-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Filter-Styles-panel-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-Filter-Styles-panel-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Uncheck the box next to a CSS declaration to deactivate a style.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Deactivating-a-style-using-Inspect-Element-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"294\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deactivating-a-style-using-Inspect-Element-on-Firefox.png\/public\" alt=\"Deactivating a style using Inspect Element on Firefox.\" class=\"wp-image-60155\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deactivating-a-style-using-Inspect-Element-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deactivating-a-style-using-Inspect-Element-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deactivating-a-style-using-Inspect-Element-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Deactivating-a-style-using-Inspect-Element-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"5\">\n<li>Click the section, and the tool will provide a new line to add a new code.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-line-using-Inspect-Element-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"311\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-line-using-Inspect-Element-on-Firefox.png\/public\" alt=\"Adding a new line using Inspect Element on Firefox.\" class=\"wp-image-60160\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-line-using-Inspect-Element-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-line-using-Inspect-Element-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-line-using-Inspect-Element-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Adding-a-new-line-using-Inspect-Element-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><p>Mozilla Firefox also offers <strong>Responsive Design Mode<\/strong> to preview several preset screen resolutions. Here&rsquo;s how to do it:<\/p><ol class=\"wp-block-list\">\n<li>Open <strong>Mozilla Firefox<\/strong>.<\/li>\n\n\n\n<li>Access a website. In this example, we&rsquo;re opening <strong>hostinger.com<\/strong>.<\/li>\n\n\n\n<li>Open the <strong>Inspector <\/strong>panel and click the <strong>Responsive Design Mode<\/strong> icon at the top-right corner.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\"><img decoding=\"async\" width=\"1434\" height=\"561\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\/public\" alt=\"Using Responsive Design Mode on Firefox.\" class=\"wp-image-60163\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\/w=1434,fit=scale-down 1434w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Using-Responsive-Design-Mode-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1434px) 100vw, 1434px\" \/><\/a><\/figure><\/div><p>Alternatively, click the <strong>three-stripes<\/strong> menu -&gt; <strong>More tools<\/strong> -&gt; <strong>Responsive Design Mode<\/strong>.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Responsive-Design-Mode-on-Firefox.png\"><img decoding=\"async\" width=\"267\" height=\"387\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Responsive-Design-Mode-on-Firefox.png\/public\" alt=\"Accessing Responsive Design Mode on Firefox\" class=\"wp-image-60164\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Responsive-Design-Mode-on-Firefox.png\/w=267,fit=scale-down 267w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Responsive-Design-Mode-on-Firefox.png\/w=207,fit=scale-down 207w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/Accessing-Responsive-Design-Mode-on-Firefox.png\/w=103,fit=scale-down 103w\" sizes=\"(max-width: 267px) 100vw, 267px\" \/><\/a><\/figure><\/div><ol class=\"wp-block-list\" start=\"4\">\n<li>Activating the mode lets you check the connection speed and device pixel ratio.<\/li>\n<\/ol><div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"\/tutorials\/wp-content\/uploads\/sites\/2\/2021\/09\/The-site-preview-of-hostinger.com-on-a-different-device-using-Responsive-Design-Mode-on-Firefox.png\"><img decoding=\"async\" width=\"1024\" height=\"470\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-site-preview-of-hostinger.com-on-a-different-device-using-Responsive-Design-Mode-on-Firefox.png\/public\" alt=\"The site preview of hostinger.com on a different device using Responsive Design Mode on Firefox\" class=\"wp-image-60165\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-site-preview-of-hostinger.com-on-a-different-device-using-Responsive-Design-Mode-on-Firefox.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-site-preview-of-hostinger.com-on-a-different-device-using-Responsive-Design-Mode-on-Firefox.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-site-preview-of-hostinger.com-on-a-different-device-using-Responsive-Design-Mode-on-Firefox.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2021\/09\/The-site-preview-of-hostinger.com-on-a-different-device-using-Responsive-Design-Mode-on-Firefox.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><\/div><figure class=\"wp-block-image size-full\"><a class=\"hgr-tutorials-cta hgr-tutorials-cta-web-hosting\" href=\"\/web-hosting\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/public\" alt=\"Hostinger web hosting banner\" class=\"wp-image-98604\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/2\/2023\/11\/Web-hosting_in-text-banner.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h2><p>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.<\/p><p>In this article, we have explained the steps to access Inspect Element and provided its common uses in three web browsers &ndash; Google Chrome, Safari, and Mozilla Firefox.<\/p><p>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.<\/p><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Learn More About Website Maintenance<\/h4>\n                    <p><a href=\"\/tutorials\/hotlinking\">Hotlinking: What Is It and Why Is It Bad?<\/a><br>\n<a href=\"\/tutorials\/cookieless-domain-warning\">How to Use Cookie-Free Domains<\/a><br>\n<a href=\"\/tutorials\/website\/how-to-check-your-website-error-log\">How to Check Your Website&rsquo;s PHP Error Log<\/a><br>\n<a href=\"\/tutorials\/website-speed-test\/\">How to Test Website Speed<\/a><\/p>\n                <\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learning how to inspect elements in a browser is beneficial, especially if you work in IT. Inspect Element lets visitors [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/tutorials\/how-to-inspect-element-using-google-chrome\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":27,"featured_media":64036,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"rank_math_title":"How to Inspect Element: Simple Methods for Editing a Web Page","rank_math_description":"Check out this article to learn how to inspect element to edit its CSS properties and preview your changes using Google Chrome's Developer Tools.","rank_math_focus_keyword":"how to inspect element","footnotes":""},"categories":[22601,22604],"tags":[],"class_list":["post-626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-website","category-website-design"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-inspect-element","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/inspeccionar-elemento-chrome","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/como-inspecionar-elemento-e-alterar-estilo","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/how-to-inspect-element-using-google-chrome","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/how-to-inspect-element-using-google-chrome","default":0}],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/users\/27"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/comments?post=626"}],"version-history":[{"count":46,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/626\/revisions"}],"predecessor-version":[{"id":110303,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/posts\/626\/revisions\/110303"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media\/64036"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/media?parent=626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/categories?post=626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/tutorials\/wp-json\/wp\/v2\/tags?post=626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}