5 Things you can do with Inspect Element
- What is Inspect Element 00:48
- Different devices 01:41
- Time-saver 02:30
- See all resources 05:15
- 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.
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.
Did you Enjoy this Episode?
- Will you consider sharing it online? Just click one of the share buttons below!
- Will you leave us a review? 🙂
- Have a question, or a topic request? Let us know in the comments below!