Discover the power of browser developer tools

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


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


● 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


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

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


● See final computed style information for any element


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


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


● Demo Video

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


● Inspect media query list easily in Device Mode


● Emulate touch based input (no mouse hover)


● 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


● 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


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

Chrome

Firebug

Internet Explorer


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


● Issue javascript commands in console once page is loaded

Validating AJAX requests



● See AJAX variables sent and return response


● 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


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


● Configure Internet Explorer to work like older browser versions


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

resizing images


● 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

Discover the power of browser developer tools

Technology

page element

css issues demo video

css issues toggle properties

plugin developer

complete css stack

mobile version

mobile devices

existing css rule