WordCamp Montreal 2015 Workshop

Yannick LefebvreAuthor and Plugin Developer

@ylefebvre / ylefebvre.caylefebvre.ca/wcmtl15

Discover the power of browser developer tools

About me

● WordPress user since 2004● Released first plugin in 2005

– Link Library● 8 Plugins to date on official

repository● Author of WordPress Plugin

Development Cookbook● Custom plugin development

Most common questions heard by plugin and theme developers

● How can I change the color of a page element?● Why is this element styled a certain way?● How can I reposition this item?● Why is an item not visible in the mobile version of

my site?

Developer tools can resolve all of these questions and more in minutes!

Topics

● What are browser developer tools?● Troubleshooting CSS issues● Mobile device preview● Analyzing site load times● Debugging Javascript● Validating AJAX request● General tips and tricks

What are browser developer tools?

● Started as browser add-on modules (Venkman, Firebug)

● Now integrated in modern browsers (Chrome, Firefox, Safari) … and IE

● Debug multiple web page components– Javascript– CSS– Networking

Troubleshooting CSS issues

Troubleshooting CSS issues

● Right-click on any page element and select option to Inspect Element

Troubleshooting CSS issues

● See the complete CSS stack in reverse order, from first to last styling rule

● Non-applicable or overwritten styles are crossed out

● See complete hierarchy leading to selected element

Troubleshooting CSS issues

● Toggle properties on and off and see the page update live

● Add new properties to an existing CSS rule (with auto-complete)

Troubleshooting CSS issues

● See final computed style information for any element

Troubleshooting CSS issues

● Quickly see the size of selected items including their padding or margin zones by hovering over items with selection tool

Troubleshooting CSS issues

● Temporarily modify HTML content to evaluate text changes before editing site

Troubleshooting CSS issues

● Demo Video

Mobile device preview

Mobile device preview

● Emulates different user agents and screen resolutions in-browser

● Easy access to developer tools instead of resizing whole window

● Can also simulate cell connections of various speeds

Mobile device preview

● Inspect media query list easily in Device Mode

Mobile device preview

● Emulate touch based input (no mouse hover)

Mobile device preview

● Override geolocation data

Analyzing site load times

● Full report detailing how long each page element takes to be requested, received and displayed

● Disable browser cache while dev tools are opened● Simulate slower network on mobile devices

Mobile device preview & Analyzing site load times

● Demo Video #2

Debugging Javascript

Debugging Javascript

● Console outputs all warnings and errors● Not all consoles give messages of equal clarity● When building a site with multiple plugins, can

give a clue of culprit for bad functionality

Debugging Javascript

● Example: using $ instead of jQuery in WordPress$(document).ready(function()

Chrome

Firebug

Internet Explorer

Debugging Javascript

● Add breakpoints and step through code● See variable values in Watch window

Debugging Javascript

● Issue javascript commands in console once page is loaded

Validating AJAX requests

Validating AJAX requests

Validating AJAX requests

● See AJAX variables sent and return response

Validating AJAX requests

● See AJAX response sent back to browser

Debugging Javascript and Validating AJAX requests

● Demo Video #3

General Tips and Tricks

● See full list of resources downloaded by web site

General Tips and Tricks

● “Un-minimize” javascript and style files in Chrome Sources tab

General Tips and Tricks

● Configure Internet Explorer to work like older browser versions

General Tips and Tricks

● Chrome audit tool can make recommendations to improve web site– Combining files, removing unnecessary CSS rules,

resizing images

General Tips and Tricks

● Demo Video #4

Recommendations

● Fire up Browser Developer Tools before contacting plugin or theme author for styling issues

● When you run into issues, try developer tools from multiple browsers, some might be more useful than others

Questions?

● Thank you for your time!

ylefebvre.ca/wcmtl15

@ylefebvre