Here I have scrapped together a few simple tips for when your inspecting a site your working on.
When you update styles remember to delete caches on both your WordPress site (via a dev mode or something similar) and your browser (on Google Chrome I often go to delete history and select “cached images and files”).
This will prevent you looking at an outdated version of your site not knowing how your recent changes have affected it.
The Basics
Right click and select “inspect” to find out what styles are applied.
If the inspect window is in your way then “dock side” options are your friend!
Next check your site’s layout on various widths!
First by clicking “restore down” on your chrome window (the button between close and minimise) and simply dragging the window back and forth to see how things change as you make it narrower and wider
Then you can go further by using “Toggle device toolbar”
When inspecting a link, menu or something else that changes when you hover or click right click the class and select “Force state > :hover” or “Force state > :active” to see how the styling changes!
The “Computed” tab shows how things are styled at the moment rather than all the different conditional and conflicting styles.
Helpful Tricks
Feel free to toggle styles off and on to see how things change, then simply refresh the page to reset to normal.
This is useful for checking for redundancies (like three different styles all making the same text bold).
If your looking for where/how a style was applied try clicking the link next to it and get a peek at the CSS.
If you toggle a style off and nothing changes, try scrolling down to see if a previously overwritten similar style has become active (these redundancies are usually caused by developers simply forgetting they had already set a style as the default only to later override it with the same style for a specific class).
Always check styling on multiple browsers because Chrome, Edge, Internet Explorer and Firefox don’t all work the same!
Similarly Android and iPhone mobiles make things more complicated!
Speed Testing
Also if your testing page speed these tools are very useful:
