discover the power of browser developer tools
TRANSCRIPT
![Page 1: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/1.jpg)
WordCamp Montreal 2015 Workshop
Yannick LefebvreAuthor and Plugin Developer
@ylefebvre / ylefebvre.caylefebvre.ca/wcmtl15
Discover the power of browser developer tools
![Page 2: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/2.jpg)
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
![Page 3: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/3.jpg)
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!
![Page 4: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/4.jpg)
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
![Page 5: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/5.jpg)
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
![Page 6: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/6.jpg)
Troubleshooting CSS issues
![Page 7: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/7.jpg)
Troubleshooting CSS issues
● Right-click on any page element and select option to Inspect Element
![Page 8: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/8.jpg)
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
![Page 9: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/9.jpg)
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)
![Page 10: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/10.jpg)
Troubleshooting CSS issues
● See final computed style information for any element
![Page 11: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/11.jpg)
Troubleshooting CSS issues
● Quickly see the size of selected items including their padding or margin zones by hovering over items with selection tool
![Page 12: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/12.jpg)
Troubleshooting CSS issues
● Temporarily modify HTML content to evaluate text changes before editing site
![Page 13: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/13.jpg)
Troubleshooting CSS issues
● Demo Video
![Page 14: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/14.jpg)
Mobile device preview
![Page 15: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/15.jpg)
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
![Page 16: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/16.jpg)
Mobile device preview
● Inspect media query list easily in Device Mode
![Page 17: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/17.jpg)
Mobile device preview
● Emulate touch based input (no mouse hover)
![Page 18: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/18.jpg)
Mobile device preview
● Override geolocation data
![Page 19: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/19.jpg)
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
![Page 20: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/20.jpg)
Mobile device preview & Analyzing site load times
● Demo Video #2
![Page 21: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/21.jpg)
Debugging Javascript
![Page 22: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/22.jpg)
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
![Page 23: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/23.jpg)
Debugging Javascript
● Example: using $ instead of jQuery in WordPress$(document).ready(function()
Chrome
Firebug
Internet Explorer
![Page 24: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/24.jpg)
Debugging Javascript
● Add breakpoints and step through code● See variable values in Watch window
![Page 25: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/25.jpg)
Debugging Javascript
● Issue javascript commands in console once page is loaded
![Page 26: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/26.jpg)
Validating AJAX requests
![Page 27: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/27.jpg)
Validating AJAX requests
![Page 28: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/28.jpg)
Validating AJAX requests
● See AJAX variables sent and return response
![Page 29: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/29.jpg)
Validating AJAX requests
● See AJAX response sent back to browser
![Page 30: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/30.jpg)
Debugging Javascript and Validating AJAX requests
● Demo Video #3
![Page 31: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/31.jpg)
General Tips and Tricks
● See full list of resources downloaded by web site
![Page 32: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/32.jpg)
General Tips and Tricks
● “Un-minimize” javascript and style files in Chrome Sources tab
![Page 33: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/33.jpg)
General Tips and Tricks
● Configure Internet Explorer to work like older browser versions
![Page 34: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/34.jpg)
General Tips and Tricks
● Chrome audit tool can make recommendations to improve web site– Combining files, removing unnecessary CSS rules,
resizing images
![Page 35: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/35.jpg)
General Tips and Tricks
● Demo Video #4
![Page 36: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/36.jpg)
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
![Page 37: Discover the power of browser developer tools](https://reader030.vdocuments.net/reader030/viewer/2022032506/55c983abbb61ebeb058b4848/html5/thumbnails/37.jpg)
Questions?
● Thank you for your time!
ylefebvre.ca/wcmtl15
@ylefebvre