You don’t have to be a hard-core developer to use the Chrome developer 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!
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 Developer 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.
What you’ll see after you click on inspect is the Inspector panel which looks like this:
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.
You can do anything you like using just the Inspector. Nearly any CSS rule you can apply in a stylesheet you can apply and test and tweak in the Inspector first.
When you’re done, you can highlight the rule or the rule block and then copy and paste it into your stylesheet.
Sometimes the hardest part is finding where in the stylesheet you put upload the CSS because you don’t want to create conflicting styles and you want to keep your stylesheet lean.
Where you are playing with the CSS in the Inspector you will see links to the stylesheet. If you click on any of those it will take you to where those styles are found in the stylesheet including the row number.
That’s how I found where in the stylesheet to update the CSS.
Deleting Elements In Chrome Developer Tools
To delete any element just click on it to highlight it in the Chrome Inspector. Then press delete on or backspace on your keyboard.
These changes you make in the inspector are only in your browser.
If you refresh the page, it will load the live version of the page.
So, if you want the changes to be permanent, you must change the css code by copying the changes you made in the inspector and pasting them to your stylesheet.
Changing The Box Model
Scrolling down the elements style box in the inspector, you’ll find a box model of your page. This will show you the margin, padding and border of your page.
The element’s size is represented by the numbers in the middle. In this case, the element is 795.156 pixels wide by 184 pixels tall.
The dashes in the top, right, bottom and left positions for margin, border and padding means zero. Except for the bottom of the padding, which means 14 pixels of padding are on the bottom of that element.
You won’t use this every day, but if you find things aren’t lining up properly on your site then this is a great place to start troubleshooting.
Tool For Manipulating Links
Another interesting tool you can use in the Google Chrome Inspector is changing the state of the element. In this case, changing the state of the link. The link can be in the hover, active, focus or visited state.
To begin, right click on any link on your page and choose “Inspect” from the context menu that pops up.
This will open the link element inside the Inspector where you can change all sorts of things. What we’ll do is that we’ll change the state of the element.
To do that, click on the :hov button as shown on the screenshot below
A slide out will appear as in the image below:
If you check the hover box, the Inspector and the page above will show how does this element looks when hovered over. Now, you can change the colour of the link when it’s hovered, visited etc.
Remember: If you like the way it looks like, you must copy the changes you’ve made and paste them into the stylesheet. Making changes inside the inspector won’t change anything in the stylesheet. The inspector is as its name would suggest just for inspecting the changes.
Setting the Device Size – Responsiveness settings
Another great option I use often is the device size settings. You do that by clicking on the little button in the top left of the inspector (see the screenshot below).
Your page will now have a device size settings at the top.
You can choose the size manually or you can pick one of the preset sizes. The preset sizes differ depending on the version but the menu will look something like this:
Changing Device Size Manually
There are two ways to do it. You can just type in the dimensions in the two fields at the top or you can drag on the corners to set the width and height.
Resizing the Width
To exit this tool, click on the same button you clicked to get in.
Console Tool
Another useful tool which will enable you to see the output from JavaScript is called the Console. Here, you can see the errors if your JavaScript isn’t working which is priceless for debugging your code.
Other Useful Developer Tools
Performance Tab
This is a useful tool to inspect how well is your page working. To check this, click on the Performance tab.
Next, you need to check the screenshot box to allow screenshots.
Then, click on the record button.
Finally click on the refresh button and wait until the page reloads. After the page is fully loaded the results will appear or you can click on Stop at any time to see partial results.
You’ll be presented with a timeline showing how long it took each element on your page to load. On top of the timeline, you can see the screenshots made at different times of your page loading.
This is very useful for helping you find elements or scripts that are slowing down your website.
Audit Tab
Finally, we come to the audit tab. Here, you can get more information on which elements slow down your site and it gives you more information about your site’s performance.
First, select the Audits tab and check all boxes.
Next, run the audit when the Reload Page and Audit on Load option is selected.
You will be shown how your site performs during different tests. This information is VERY similar to what GTMetrix or the Pingdom Speed Test will give you.
The benefit of using in the Inspector is you don’t have to go anywhere. You can do everything right there in your browser.
Final Summation
Chrome Developer tools can get pretty hardcore. So if you’re a beginner, it’s desirable for you to stay inside the borders of tutorial.
If you’re not dealing with major WordPress development or creating your own themes, stick to the four tools I showed you (elements, responsiveness, console and the audits).
It’s all you’ll need to improve your WordPress site. Once you’ve mastered those tools you can experiment with the others.
That’s it for this tutorial. If you have any questions or comments leave them in the comments section below and I’ll try to answer them as soon as possible. Till next time, kind greetings from the WPLL team!
For customizing your WordPress site further, make sure you subscribe to my WordPress Tutorials – WPLearningLab channel and click on the bell notification not to miss any of the useful WordPress tutorials.