Chrome Dev Tools Basics For WordPress Walkthrough (Chrome Inspect) - Best Webhosting

ULTRAFAST, CHEAP, SCALABLE AND RELIABLE! WE STRONGLY RECOMMEND ACCU WEB HOSTING COMPANY

Watch Wordpress WPLearningLab Video: Chrome Dev Tools Basics For WordPress Walkthrough (Chrome Inspect).
You don't have to be a hard-core developer to use the Chrome dev tools! You can use only the subset you need to manage your WordPress site. I'm going to show you all the tools I use for manage WordPress sites. There are quite a few so this will be a long-ish post. So buckle in!

Chrome Developer Tools Basics For WordPress Walkthrough (Chrome Inspect) https://youtu.be/tP_kXBJWPhQ

Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist

You can either watch the detailed video tutorial below or scroll below that to read the image/text version of the tutorial.

Different Inspectors

You'll find different versions of this tool in different browsers. They are basically the same, but in the two most developer friendly browsers (Firefox and Google Chrome) these tools are called Firebug and Inspector, respectively.

In this tutorial I'll be focusing on the Google Chrome Inspector or Google Chrome Developer Tools.

A great benefit of using these tools is that you see all the changes you make right away in your browser which makes front-end development and troubleshooting very easy. Front-end just means HTML, CSS and Javascript.

The Google Chrome Dev Tools

First, open any page on your site in Google Chrome.

Then right click anywhere on the page and in the context menu that appears click on "Inspect". It may not appear if you click on this like videos, audio files or other specialized elements. So you're almost always better off right-clicking on white-space, text or images.

The highlighted item would be any item you clicked Inspect on.

What's important to know here that there are nested elements inside this code. And most of the elements in this code have other nested elements and it. The nested elements can be opened by clicking on the little arrows to left of the element.

Next thing you need to know is that when you hover over any element in the inspector code, that element will be highlighted on the page. This is only true if the element is not hidden from the page and is within the scroll frame where the browser is at that time.

For example, if you are scrolled to bottom of the page and try to highlight a paragraph at the top of the page you won't see the highlighting.

The blue colour is the colour of the highlighted content, the green colour signifies padding and if there is margin, it would show up as orange. Finally, if you add a border, it would show up in yellow.

So you can quickly see what is contributing to the positioning of the elements on you page.

Changing The CSS Code Inside The Inspector

This is a real time saver and I use it every single day.

Before actually editing CSS in a stylesheet, you can change the CSS of any element inside the Google Chrome Inspector. Do that by clicking on the element and going to the element style in the right section of the Inspector.

For example, if you want to add a margin, you can type in margin-top: 10px; As you change the margin, you can see how it influences the page in real time which is a REALLY useful.

Read the full post on the blog: https://wplearninglab.com/chrome-developer-tools/

Subscribe to this awesome channel here: http://www.youtube.com/subscription_center?add_user=wplearninglab

Published: Saturday, August 10, 2019 8:44 AM
Category: Wordpress WPLearningLab

85 Views

Related Videos

Basics of Inspect Element With Your WordPress Site

by Best Webhosting Added 4 years ago 73 Views / 0 Likes

Most modern browsers have helpful and powerful tools like inspect element to figure out common problems. The inspect element tool can be opened with your right click or using the buttons control, shift, and I together. In this article we will show you the basics of inspect element and how to use it with your site. Text version of this tutorial: http://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/ If you liked this
Opera vs. Chrome | I'm DUMPING Google Chrome?

by Best Webhosting Added 1 year ago 18 Views / 0 Likes

I revisited Opera vs. Chrome to see what both browsers have to offer today. Surprisingly, I may be dumping Google Chrome? Download Opera: https://craylor.co/opera 💬 Join the Craylor Community on Discord (it's free!): https://craylor.co/discord 📞 Book a consultation (we can chat about anything!): https://craylor.co/consultation 🎥 Gear I use: https://craylor.co/kit ☕️ Like my content? You can buy me a coffee! https://craylor.co/coffee Connect with me: ➞
Brave vs. Chrome: I'm DELETING Google Chrome!

by Best Webhosting Added 1 year ago 13 Views / 0 Likes

Download Brave: https://craylor.co/brave Chrome vs. Safari: https://youtu.be/25-oHlbHGzs It's official. I'm deleting Google Chrome! Here's why I prefer Brave. 🌐 Learn how to build a WordPress website for FREE: https://craylor.academy 💬 Join the Craylor Community on Discord (it's free!): https://craylor.co/discord 📞 Book a consultation (we can chat about anything!): https://craylor.co/consultation 🎥 Gear I use: https://craylor.co/kit ☕️ Like my content
Safari vs. Chrome | I'm DITCHING Google Chrome?

by Best Webhosting Added 1 year ago 16 Views / 0 Likes

Protecting your personal data doesn’t have to be hard. Try 14 days for free: https://aura.com/craylormade Thank you to Aura for sponsoring this video Is it time to stop ignoring Safari? In this comparison of Chrome vs. Safari, I'm on a mission to see if I can finally ditch Chromium. Need a VPN? Comparison here: https://youtu.be/ZX0ETTUymjw Need domain names? Comparison here: https://youtu.be/kSucdMuCbRg 💬 Join the Craylor Community on Discord (it's fr
Google Chrome Developer Tools Crash Course

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

Add MailTag to your browser (it's free) • https://goo.gl/qZf5Pj Thank you MailTag for sponsoring this video In this video we will be taking an intermediate look at the Google Developer Tools. You will learn how to do things such as... Inspect & Examine HTML/CSS Edit HTML/CSS Enable/Disabled styles Move & Delete Elements Console Logs & Other Commands Special Console Symbols Examine Network & Resources Use Snippets Workspaces & Permanent Changes View &
Clear Chrome Cache Automatically With Cache Killer - Free Google Chrome Add-on

by Best Webhosting Added 4 years ago 86 Views / 0 Likes

Clear Chrome Cache Automatically With Cache Killer - Free Google Chrome Add-on https://youtu.be/CegkzTkcQq0 Download your exclusive 10-Point WP Security Checklist: http://bit.ly/10point-wordpress-hardening-checklist To clear chrome cache automatically you just need to install a free add-on called Cache Killer. When that add-on is turned "on", it will clear the Google chrome cache every time a page is reloaded. This is a great way to get around the chr
Popular
Top 15 Best Wordpress Chrome Extensions

by Best Webhosting Added 4 years ago 106 Views / 0 Likes

Wordpress has tons of great extensions, most of you are most likely using google chrome. So heres a list of some nice wordpress chrome extensions to help you with your wordpress web design business! 1. WhatFont - https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en 2. ExpressCurate - https://chrome.google.com/webstore/detail/expresscurate/nldipdepdfjilejlpeeknodkpiajhfkf?hl=en 3. BuiltWith - https://chrome.google.c
10 Great Chrome Extensions For All Type Of WordPress Users

by Best Webhosting Added 4 years ago 97 Views / 0 Likes

If you’re like most people, you build your websites with WordPress and browse the web with Chrome. New video: WordPress.com vs WordPress.org → https://youtu.be/zpzVYVHEL9w But did you know that these two market leaders can actually team up to help you be even more productive? In this video, we’ll share some of the best WordPress chrome extensions for all types of WordPress users. These extensions can help you quickly test out plugins, find which theme
How To Use Google Chrome Web Inspector

by Best Webhosting Added 4 years ago 82 Views / 0 Likes

This tutorial is going to show you how to use Google Chrome web inspector. Choose your template now: http://www.templatemonster.com/templates.php?utm_source=youtube&utm_medium=link&utm_campaign=generaltuts29 More Tutorials: http://www.templatemonster.com/help/ Subscribe Our Channel: https://www.youtube.com/user/TemplateMonsterCo/ Follow us: Facebook https://www.facebook.com/TemplateMonster/ Twitter https://twitter.com/templatemonster Instagram @templa
How To See Any Hidden Password In Chrome

by Best Webhosting Added 1 year ago 13 Views / 0 Likes

Find out what the password is when you see a group with bullets to hide the password. Sometimes you are logged in for ages on a website and you want to login on to a different computer and you need the password. When you log out to see what the password is you only see the bullets. I will show you how to make the password appear using a simple technique using Chrome and the inspection option. When you do the right mouse click on the password and Inspe
9 Best Chrome Extensions for SEOs

by Best Webhosting Added 3 years ago 46 Views / 0 Likes

Find out how to build the perfect SEO setup on Google Chrome with our list of must-have Chrome extensions. Subscribe • https://www.youtube.com/AhrefsCom?sub_confirmation=1 *************************************** Additional SEO Resources The Best WordPress SEO Plugins (It’s Not Yoast) • https://www.youtube.com/watch?v=cFI_jRVOQZk SEO For Beginners: A Basic Search Engine Optimization Tutorial for Higher Google Rankings • https://www.youtube.com/watch?v=
Popular
My 4 Favourite Chrome Extensions

by Best Webhosting Added 4 years ago 106 Views / 0 Likes

In this video I show you my 4 favourite Chrome Extensions and what they do. The first one is HideRec. Why? Because it gets rid of all the distractions on Youtube. When I go to Youtube to search a Wordpress related video and I see Justin Bieber has a new videoclip then 50 minutes and 10 Justin Bieber videos later I start to wonder why I did go to Youtube. Since I use this plugin Justin Bieber has millions of view (from me) less. The second one is Full