{"id":1323,"date":"2019-02-08T10:36:10","date_gmt":"2019-02-08T10:36:10","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2019\/02\/08\/2152545-how-to-inspect-website-elements-in-your-browser-at-hostinger\/"},"modified":"2019-02-08T10:36:10","modified_gmt":"2019-02-08T10:36:10","slug":"2152545-how-to-inspect-website-elements-in-your-browser-at-hostinger","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/2152545-how-to-inspect-website-elements-in-your-browser-at-hostinger\/","title":{"rendered":"How to Inspect Website Elements in Your Browser at Hostinger"},"content":{"rendered":"<p class=\"no-margin\"><b>Inspect Element<\/b> is a built-in tool found in most web browsers that allows real-time viewing and editing of a website&rsquo;s HTML, CSS, and JavaScript code. It can help you understand how a webpage is constructed and diagnose and debug website issues, such as <b><a href=\"\/support\/2140906-what-to-do-if-your-website-shows-a-not-secure-mixed-content-warning\" target=\"_blank\" class=\"intercom-content-link\">mixed content<\/a><\/b>.<\/p><p class=\"no-margin\">\n<\/p><p class=\"no-margin\">Here&rsquo;s how to use the <b>Inspect Element <\/b>tool on your preferred browser:<\/p><p class=\"no-margin\">\n<details>\n<summary>\n<h2 id=\"h-google-chrome\">Google Chrome<\/h2>\n<\/summary>\n<div class=\"collapsible-section-content\">\n<p class=\"no-margin\">Right-click on an empty website area or an element, and select <b>Inspect<\/b>. Alternatively, use the keyboard shortcut <b>Ctrl+Shift+C<\/b> to open all the development tools. Switch to the <b>Elements<\/b> tab to inspect elements or the <b>Console<\/b> tab to detect errors or warnings.<\/p>\n<\/div>\n<\/details>\n<details>\n<summary>\n<h2 id=\"h-mozilla-firefox\">Mozilla Firefox<\/h2>\n<\/summary>\n<div class=\"collapsible-section-content\">\n<p class=\"no-margin\">Right-click on an empty website area or an element, and select <b>Inspect<\/b>. Alternatively, use the keyboard shortcut <b>Ctrl+Shift+C.<\/b><\/p>\n<\/div>\n<\/details>\n<details>\n<summary>\n<h2 id=\"h-opera\">Opera<\/h2>\n<\/summary>\n<div class=\"collapsible-section-content\">\n<p class=\"no-margin\">Right-click on an empty website area or an element, and select <b>Inspect<\/b>. Alternatively, use the keyboard shortcut <b>Ctrl+Shift+I<\/b>.<\/p>\n<\/div>\n<\/details>\n<details>\n<summary>\n<h2 id=\"h-microsoft-edge\">Microsoft Edge<\/h2>\n<\/summary>\n<div class=\"collapsible-section-content\">\n<p class=\"no-margin\">Right-click on an empty website area or an element, and select <b>Inspect<\/b>. Alternatively, press <b>F12<\/b>, which will open all the development tools. Check the <b>Elements <\/b>tab to inspect elements or the <b>Console <\/b>tab to detect errors or warnings.<\/p>\n<\/div>\n<\/details>\n<\/p><p class=\"no-margin\">\n<\/p><div class=\"intercom-interblocks-callout\" style=\"background-color: #e3e7fa80;border-color: #334bfa33\">\n<p class=\"no-margin\">Make sure the element you&rsquo;re inspecting matches the latest version on the website by <b><a href=\"https:\/\/www.hostinger.com\/tutorials\/clear-browser-cache\" target=\"_blank\" class=\"intercom-content-link\">clearing your browser cache<\/a>.<\/b> &#128161; <\/p>\n<\/div><p class=\"no-margin\">\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inspecting the website elements via different browsers<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[180],"tags":[],"class_list":["post-1323","post","type-post","status-publish","format-standard","hentry","category-website-troubleshooting"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/2152545-how-to-inspect-website-elements-in-your-browser-at-hostinger\/","default":1},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/support\/2152545-como-inspeccionar-los-elementos-de-un-sitio-web-en-hostinger\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/support\/2152545-comment-inspecter-les-elements-du-site-web-chez-hostinger\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/support\/2152545-bagaimana-cara-menginspeksi-elemen-website-di-hostinger\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/br\/support\/2152545-como-inspecionar-elementos-de-um-site-no-hostinger\/","default":0}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/1323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=1323"}],"version-history":[{"count":0,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/1323\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=1323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=1323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=1323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}