1.
WordCamp Montreal 2015 Workshop
Yannick Lefebvre
Author and Plugin Developer
@ylefebvre / ylefebvre.ca
ylefebvre.ca/wcmtl15
Discover the power of browser developer tools

2.
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

3.
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!

4.
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

5.
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

6.
Troubleshooting CSS issues

7.
Troubleshooting CSS issues
● Right-click on any page element
and select option to Inspect
Element

8.
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

9.
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)

10.
Troubleshooting CSS issues
● See final computed style
information for any element

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

12.
Troubleshooting CSS issues
● Temporarily modify HTML content to evaluate text
changes before editing site

13.
Troubleshooting CSS issues
● Demo Video

14.
Mobile device preview

15.
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

16.
Mobile device preview
● Inspect media query list easily in Device Mode

17.
Mobile device preview
● Emulate touch based input (no mouse hover)

18.
Mobile device preview
● Override geolocation data

19.
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

20.
Mobile device preview & Analyzing site load
times
● Demo Video #2

21.
Debugging Javascript

22.
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

23.
Debugging Javascript
● Example: using $ instead of jQuery in WordPress
$(document).ready(function()
Chrome
Firebug
Internet
Explorer

24.
Debugging Javascript
● Add breakpoints and step through code
● See variable values in Watch window

25.
Debugging Javascript
● Issue javascript commands in console once page is
loaded

26.
Validating AJAX requests

27.
Validating AJAX requests

28.
Validating AJAX requests
● See AJAX variables sent and return response

29.
Validating AJAX requests
● See AJAX response sent back to browser

30.
Debugging Javascript and Validating AJAX
requests
● Demo Video #3

31.
General Tips and Tricks
● See full list of resources downloaded by web site

32.
General Tips and Tricks
● “Un-minimize” javascript and style files in Chrome
Sources tab

33.
General Tips and Tricks
● Configure Internet Explorer to
work like older browser
versions

34.
General Tips and Tricks
● Chrome audit tool can make recommendations to
improve web site
– Combining files, removing unnecessary CSS rules,
resizing images

35.
General Tips and Tricks
● Demo Video #4

36.
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

37.
Questions?
● Thank you for your
time!
ylefebvre.ca/wcmtl15
@ylefebvre