5 Things You Can do with Inspect Element | EP 625

 5 Things you can do with Inspect Element

1. What is Inspect Element 00:48
2. Different devices  01:41
3. Time-saver  02:30
4. Check for JavaScript  04:35
5. See all resources  05:15
6. Learning 06:18

Read the full episode transcript below:

00:28 David Blackmon: Hey everybody welcome to another episode of WP The Podcast brought to you by WP Gears. I’m David Blackmon.

00:34 Tim Strifler: And I’m Tim Strifler.

00:37 David Blackmon: Today in episode 6 twenty five we’re gonna talk about five things you can do with Inspect Element. Tim won’t you get us kicked off and tell us first of all what the heck is Inspect Element? 

00:48 Tim Strifler: Yeah absolutely.  So it’s built into every major browser. There’s basically the same, there’s some differences and some  are better than others. In my opinion chrome works the best and so that’s what I use for development purposes. But basically you can right click and just click Inspect and it’s going to pull up the inspector as I call it. And then you can basically click on in the arrow and then click on any part of the page and then it’s going to show you the HTM. It’s going to show you the CSS that goes with it, and you can you basically are pulling back the layer, the top layer of the website to see what’s underneath. And so it can be a really really effective tool for web development purposes.

01:37 David Blackmon: All right. What’s the first reason Tim? What’s the first thing you can do with Inspect Element?

01:41 Tim Strifler: Yeah the first thing you can do is you can view the website on different devices without actually having. To open up those  devices and so for example when you’re building a website you want to make sure it looks good on mobile right? But you also want to make sure it looks good on the individual different mobile’s right? And so there’s the mobile settings built in and they have presets for iPhone 10 for iPhone six seven and eight plus for the Google pixel two and so it’s basically going to show you the dimensions of the page that are in that for that specific device. And so you can see like “hey something isn’t looking right on this specific size” which is you know the iPhone 10 for example and  so super effective way to be able to do mobile responsive web design. 

02:30 David Blackmon: And second thing on our list which I absolutely love and is a huge time saver. Is you can absolutely love and is a huge time saver. If you can CSS changes and view in real time on the website now this won’t save it but if you’re developing websites as opposed to you know say “I want to try out this color to see if this color looks good on my website homepage”, you know… I can open up Inspect Element and edit the color real time within the Inspect Element window and see it live, happening right there as opposed to changing the color on the back end of the WordPress website. Hitting save hitting preview going to the front-end then going back to the backend and doing this back and forth thing over and over and over again. You can actually make CSS changes and view it in real time on the front-end of the website using the Inspect Element and that’s huge not only for colors but styling any type of styling. Whatsoever can be done and it’s just a huge Time-saver.

03:33 Tim Strifler: Yeah and when I learned what David just described, I think it was maybe 2012, it was a absolute GameChanger!  Yeah it honestly it was a a game-changer,  because yes I knew about CSS and I remember like getting technical support from you know different you know theme companies whatever, and they like hand me a little CSS snippet that would do what I wanted to do, and it’s like okay. I understood the concept but it’s like I don’t know how to write it from scratch. Well when you can right-click and view the CSS and make the changes as David described and then you can copy it and put it in your Divi theme options, if you’re using Divi or whatever theme you’re using, whatever they are actually WordPress has it built in, now in the theme customizer your little CSS box. Well the way that CSS works is the browser reads CSS from top to bottom whatever is loaded last gets priority and overrides everything above it. And so  you can make those changes in the inspector copy it paste it and boom you just made CSS changes to your site without actually having knowing how to write CSS from scratch. So the next one on the list is of the five things you can do with inspect element is check for JavaScript error and warning. So when you’re trying to troubleshoot something something’s not quite working, you installed a new plugin and all of a sudden it’s conflicting with another, and you’re not sure what’s going on you’re not sure what plugin is it is conflicting.. Well you can open up the browser inspector and go over to the console yeah the console and I so used to clicking on it and then it’s gonna show you what JavaScript errors or warnings are happening, and they can give
you a better idea of where the issue lies so that’s super super helpful.

05:15 David Blackmon: All right next on our list number four is the ability to see all the resources a website is loading, and from where. Tim you’re more of our technical guy so you’re gonna have to talk about that too..

05:31 Tim Strifler: Yeah absolutely. So when you right click and click on sources it’s going to show you all the different resources that it’s loading. So all the images that it’s loading if it’s pulling in scripts from other sites you know maybe like Facebook or YouTube and stuff like that and so if you want to see you know how a website doing a certain thing and you’re trying to get to the bottom of it, will loading up the sources. And all the the resources that are being loaded that the browser’s are loading can be a really effective way of doing that, and so there’s not you know one necessarily one use case for this it kind of depends on what you’re trying to do, but it’s basically gonna show you all the different  places that a website’s actually loading stuff from. So like Google Fonts for example would be an external resource and that’s going to show up there.

06:18 David Blackmon: And last but not least number five on our expect element is learning. It allows you to see how a web page is compiling  you know, how the CSS affects things. So it’s a great learning tool like Tim was talking about in a couple of points back it was eye-opening and life-changing whenever he realized that you know he could utilize the CSS that was you know from Inspect Element put it in make exchanges and put it into his website it’s a great learning tool. Because I remember the same thing it was like “a aha moment” it was like “oh my god the holy grail of web development” and the good news is I didn’t have to be a CSS expert to feel comfortable with making styling changes with CSS. Because It’s element gave me that confidence to do it and stuff. So learning is huge it’s really important and it’s a great thing. So there you go yeah are five things you can do with Inspect Element. 

07:16 Tim Strifler: Yeah… Well the last thing I want to act quickly the last point David, is if you’re a visual learner like me, and I think like you too David like it doesn’t get any more visual than that when you’re able to click around the page and see how different things are made and the CSS like. I’m that’s how I learn is getting writing in there getting my hands dirty so it’s a perfect learning tool.

07:37 David Blackmon: Awesome! Tomorrow in episode 626 how to use WordPress user roles to manage website accounts. Tim?

07:45 Tim Strifler: Take care bye bye.

07:47 David Blackmon: Until tomorrow we’ll see you then.