{"id":16428,"date":"2020-11-23T15:00:25","date_gmt":"2020-11-23T14:00:25","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16428"},"modified":"2020-11-26T10:25:33","modified_gmt":"2020-11-26T09:25:33","slug":"browser-inspect-element-tool-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/browser-inspect-element-tool-in-wordpress\/","title":{"rendered":"7 Tips and Tricks for Using Your Browser&#8217;s Inspect Element Tool in WordPress"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]Can we ever have enough ways to manipulate all the various elements of our websites? We can do it with themes, website builders, and by adding custom CSS and custom code. Do we really need another way to see the code that makes our web pages and mess with it?<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Yes, if by that we mean using the browser inspect element tool in WordPress. It\u2019s not like any of the regular ways to manipulate the website, and it offers some really fun and unique features.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article, we\u2019ll show you:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#what-is-inspect-element\">What Is the Inspect Element Tool?<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#change-content-and-appearance-of-headers\">How to Change the Content and Appearance of Headers<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#simulate-different-network-speeds\">How to Simulate Different Network Speeds<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#drag-and-drop-elements\">How to Drag-and-Drop Elements<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#responsive-design-mode\">How to Use the Responsive Design Mode<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#image-viewer\">The Image Viewer<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#cookie-jar\">The Cookie Jar<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#inspect-element-tool-settings\">Inspect Element Tool\u2019 Settings<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"what-is-inspect-element\"><\/a>What Is the Inspect Element Tool?<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Inspect Element tool is a feature commonly found in modern browsers such as Firefox and Chrome. It\u2019s also known by the name Developers Tools, or simply DevTools. <strong>They are, as their name says, a group of tools built into the browser that lets you do some pretty great stuff \u2013 but mostly view and change the contents and the appearance of a web page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Bringing up the tools is as easy as pressing the F12 key on a keyboard if you have a PC &#8211; it works in any browser. You can also right-click and choose \u201cInspect Element.\u201d <strong>If you\u2019re using a Mac and the Safari browser, you first need to enable the Developer menu<\/strong>. Go to <em><strong>Safari &gt; Preferences &gt; Advanced<\/strong><\/em>, and then click the Show Develop menu in the menu bar box. After that, either use the right-click + Inspect Element or the option+cmd+i shortcut to bring up the tool.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Right-Click.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Right Click\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Right-Click.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Right-Click-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Right-Click-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]The subwindow that opens is where all the magic happens. It\u2019s generally divided into two parts, the Elements panel where you can see and edit page HTML, and the other where you can see and edit CSS.<strong> There\u2019s also a JavaScript Console you can access, as well as the Debugger.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Window.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Window\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Window.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Window-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Window-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>Now, you must know that different browsers might have different options in their DevTools.<\/strong> There\u2019s a heated discussion whether it\u2019s Firefox or the Chromium-based browsers that have the edge, but either way, <strong>it\u2019s important to remember that occasionally you\u2019ll need specific browsers for specific things<\/strong>. For example, if you need a Console where you can toggle errors and warnings but also CSS and logging messages, you should use Firefox. Neither Chrome nor Edge has the option.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>The other important thing to remember is that the changes you make in DevTools don\u2019t create permanent changes to the website.<\/strong> The beauty of using them is that you can make real-time changes to your web pages without having to worry that you\u2019ll accidentally break something.<strong> It\u2019s a giant sandbox where you can try out things and, occasionally, find fixes to some issues<\/strong>. Now, let\u2019s see some of the things you can do with this set of tools.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]<strong>We\u2019ll be using Firefox\u2019s Inspect Elements tool<\/strong>, but that doesn\u2019t mean you can\u2019t do these tricks and tips in other browsers, too. They just might be available under different names or in different places.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;81px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"change-content-and-appearance-of-headers\"><\/a>Change the Content and Appearance of Headers on a Page<\/h2>\n<p>[\/vc_column_text][vc_column_text]Let\u2019s start with something simple. Go to your website, open any of its pages, highlight one of the headings you have on it, and then click the Inspect Element tool option. <strong>DevTools should open with the heading in question highlighted in the HTML inspector tool.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-HTML.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element HTML\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-HTML.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-HTML-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-HTML-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Even from there, you can start changing the contents of the website simply by changing the words in the header. <strong>But it might be even more fun to change the font, size, letter spacing, and even the color of the heading, and you can do all of that from the CSS editor part<\/strong>. Remember, none of the changes you make here are permanent.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Scroll down the Filter Styles window until you find the options for colors and fonts and have your fun. <strong>You can even use an eyedropper tool to color the subheading into another color you have on your website but you\u2019re not sure what it is.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Color-Picker.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Color Picker\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Color-Picker.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Color-Picker-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Color-Picker-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"simulate-different-network-speeds\"><\/a>Network Speed Simulation<\/h2>\n<p>[\/vc_column_text][vc_column_text]Do you want to see how quickly your website would load on different network speeds? Inspect Elements tool lets you do it. <strong>If you\u2019re wondering how quickly your webpage would load over a 2G network, simply navigate away from the Inspector over to Network, find the No Throttling menu.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-1.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Network\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-1.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-1-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-1-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;60px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-2.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Network\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-2.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-2-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Network-2-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Open the menu and choose 2G. Reload the page and you\u2019ll notice the sudden crawl. The option is present in Chrome, too &#8211; <strong>you can even create custom throttling profiles from the settings and bring them up when in the Network tab.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"drag-and-drop-elements\"><\/a>Drag-and-Drop Elements<\/h2>\n<p>[\/vc_column_text][vc_column_text]Don\u2019t let all the code confuse you \u2013<strong> you can drag and drop elements in the Elements panel to change their place on the page.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Drag-and-Drop.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Drag and Drop\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Drag-and-Drop.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Drag-and-Drop-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Drag-and-Drop-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"responsive-design-mode\"><\/a>Responsive Design Mode<\/h2>\n<p>[\/vc_column_text][vc_column_text]Every website developer needs a way to see how their website appears and behaves on a small-screened device. <strong>But as it\u2019s still more practical to develop and design on a bigger screen, we have to rely on device emulators of sorts to help us see how it all would look on a smartphone, for example.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]With the Inspect Elements tools, Responsive Design Mode is built in. <strong>You can switch to it easily by pressing the button next to the button that closes the Inspect Elements tool.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Responsive Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You\u2019ll see your page as it looks on mobile devices. You can adjust the size of the screen, as well as throttling and touch simulation.<strong> In Chrome, you\u2019ll find the Device Toolbar toggle &#8211; which lets you do the same thing &#8211; on the left hand side of the Inspector window.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode-Preview.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Responsive Mode Preview\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode-Preview.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode-Preview-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Responsive-Mode-Preview-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"image-viewer\"><\/a>The Image Viewer<\/h2>\n<p>[\/vc_column_text][vc_column_text]A neat little feature you\u2019ll see in Firefox\u2019s DevTools is the image viewer \u2013 <strong>hover over any image in the CSS inspector and the image will pop up.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Image.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Image\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Image.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Image-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Image-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"cookie-jar\"><\/a>The Cookie Jar<\/h2>\n<p>[\/vc_column_text][vc_column_text]Wondering what cookies are created by your page or the iframes inside of it? <strong>The easiest way to find out would be to go to the Storage Inspector part of DevTools and see a full list.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Cookie-Jar.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Cookie Jar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Cookie-Jar.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Cookie-Jar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Cookie-Jar-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]<strong>In Chrome, you can go to the Application window, and under the storage options find Cookies.<\/strong><br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"inspect-element-tool-settings\"><\/a>Inspect Element Tool Has Settings<\/h2>\n<p>[\/vc_column_text][vc_column_text]In case you\u2019ve missed it, the tool has settings of its own. <strong>You can access them by pressing the F1 key and choose the default developer tools, toolbox buttons, themes, inspector options, editor preferences, and advanced settings.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"700\" height=\"374\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Settings.jpg\" class=\"attachment-full size-full\" alt=\"Inspect Element Settings\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Settings.jpg 700w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Settings-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2020\/11\/Inspect-Element-Settings-620x331.jpg 620w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]You should spend some time getting familiar with the options you have here. They range from the ability to switch between a dark and a light theme, to adding a screenshot button and disabling JavaScript.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]WordPress already gives you more than enough power when it comes to shaping a website and its pages. But occasionally, or even more often, it\u2019s good to have a way to try all kinds of things or find solutions to problems in a safe environment.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The browser Inspect Element tool does that for developers. DevTools lets you enjoy on a playground where you can completely change how a page looks or what it contains, without any consequence. Whether you\u2019d do it to exercise creativity or make your website safer, you\u2019d have to agree that the feature is more than useful.<br \/>\n[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Want to know what you can do with your browser&#8217;s Inspect Element tool in WordPress? Here are seven tips and tricks that should give you some ideas.<\/p>\n","protected":false},"author":9295,"featured_media":16511,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[4,39,13],"class_list":["post-16428","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-tips","tag-tools","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/9295"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16428"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16428\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16511"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}