Please Meet Chrome Developer Tools!

Facebooktwittergoogle_plusredditpinterestlinkedinmail

In reference to:

Aurora WordPress Meetup – April 5, 2017

In this session of the Aurora WordPress Meetup, I briefly introduced you to Chrome Developer Tools.  Let me begin by saying that Chrome has won the Browser Wars!  Chrome not only updates unaided and unobtrusively, but Google absolutely gets it in helping Webmasters and Developers make their jobs easier by giving us a large array of Tools right inside the Browser.

Let’s start with a picture, which is worth a thousand words!  You can click on the picture to open it full-size in a separate tab.

Chrome Developer Tools using Inspect

So what are we looking at?  We first navigated to http://mdwsc.com/different-wordpress-pages/ by clicking on Whassup on the Menu.  We then scrolled down a little to put the title of the page near the top.  We then right-clicked on the title “What Is Different Between These WordPress Pages” and then left-clicked on Inspect in the pop-up Context Menu.  You can get to the same place by using F12, but it easier to remember to right-click on any element and choose Inspect from the Context Menu.

 

 

We then experimented with turning the color of the title from black (the default) to red by changing the actual CSS of that element.  In the right-pane when you are in the Elements Tab of Chrome Developer Tools there is the listing of all of the CSS applied to that specific element along with where it is being applied.  At the top of this pane is:

element.style {
}

Between the opening curly bracket and the closing curly bracket, we typed:
color: red;

This caused the title to become red, as you can see in the picture, instead of the default of black.  Of course, this is a “real-time change only in the Browser”.  As soon as you refresh the page, or navigate away from the page, the change is lost.  However, with the use of a Child Theme, you can publish these changes to the style.css file of your Child Theme and have it override the default behavior of your Theme.  You can even target the specific page where you want this change to occur.  GeneratePress has a class on the body element of every page in the form of page-id-[number] that allows you to target specific pages.  For Posts, it is in the form of postid-[number].

Chrome Developer Tools has a lot of other helpful tabs and information.  One of the tabs can even help you identify specifically why a page is loading slowly.  There is a way to discover exactly which file is causing JavaScript errors.  And so much more!  We will dive into the other tabs in other Meetup sessions.

We discussed a myriad of other topics including the basic structure of Internet.  We discussed how remarkable it is that in the packet architecture that is the Internet, the fact that packets can all take different routes back to the requesting Server, and still all get assembled in the right order to be displayed on the Webpage.  However, today’s low-attention-span and impatient End User expects all of this intricate technology to happen in 3 seconds or less!

 

We also discussed specific issues of some of the session attendees.  One of the attendees, Bruce, was having a problem with his Admin panel Menu suddenly “disappearing” on him by collapsing.  He was at a loss, as was I the first time it happened to me, to figure out how to get it back.  The secret is what I call the play button when it is in the collapsed state.  When it is not collapsed it clearly says, “Collapse menu”, but, seriously, have you ever really paid attention to that?!  I know I certainly didn’t and was stumped on how to get my Admin Menu back to its normal glorious size.

This is actually a WordPress feature to give you more real-estate on the page when you need it.  Yes, I know …  Features can be annoying when you don’t understand them!  Just saying …

When the Admin Menu is collapsed, if you hover over the icons, the Icon Identity and its Sub-Menu open as a fly-out menu, on most icons, but, of course, not on all of them!  If you don’t recognize the icon, that can be very annoying.  In the menu pictured, the two icons: Comments and Enlighter do not have a fly-out menu.

In further discussion, it was asked, how can you find out what Theme a page/site that you like is using?  The two tools that I use are WP Theme Detector and What WP Theme Is That.  They are not always successful, but most of the time I can discern the Theme.  What WP Theme Is That also will list the plugins in use on the site.

To see more Show Notes click here!

See you at the next Aurora WordPress Meetup!

Facebooktwittergoogle_plusredditpinterestlinkedinmail

Leave a Comment