This document summarizes a WordCamp Montreal 2015 workshop about using browser developer tools. The workshop covers what developer tools are, how to use them to troubleshoot CSS issues like element styling and positioning, preview mobile device views and load times, debug Javascript, validate AJAX requests, and general tips. The speaker is an experienced WordPress plugin author who commonly helps with styling, layout, and debugging questions. Live demos are included to show how developer tools can resolve common plugin and theme developer questions.

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