Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Discover the power of browser developer tools

906 views

Published on

Accompanying videos to these slides can be found here:
Video 1: https://youtu.be/8K4xNn5eWqg
Video 2: https://youtu.be/Ho4eXvFBqlE
Video 3: http://youtu.be/RMqkjnl2v-M
Video 4: https://youtu.be/AyYvJMotPNw

Hidden just beneath the surface of most modern browsers are a multitude of developer tools that can simplify any web developer’s life. Whether you’re just trying to install and customize the look of a theme and plugins on your own site or developing larger projects, learning how to work with developer tools will greatly help you with CSS troubleshooting, creating new CSS styling rules, performance analysis, mobile rendering, testing browser compatibility and even tackle more advanced tasks like javascript debugging and analyzing AJAX requests. This presentation will walk through concrete examples showing how developer tools can be used to solve various issues.

Published in: Technology
  • Login to see the comments

Discover the power of browser developer tools

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

×