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.

of

Discover the power of browser developer tools Slide 1 Discover the power of browser developer tools Slide 2 Discover the power of browser developer tools Slide 3 Discover the power of browser developer tools Slide 4 Discover the power of browser developer tools Slide 5 Discover the power of browser developer tools Slide 6 Discover the power of browser developer tools Slide 7 Discover the power of browser developer tools Slide 8 Discover the power of browser developer tools Slide 9 Discover the power of browser developer tools Slide 10 Discover the power of browser developer tools Slide 11 Discover the power of browser developer tools Slide 12 Discover the power of browser developer tools Slide 13

YouTube videos are no longer supported on SlideShare

View original on YouTube

Discover the power of browser developer tools Slide 15 Discover the power of browser developer tools Slide 16 Discover the power of browser developer tools Slide 17 Discover the power of browser developer tools Slide 18 Discover the power of browser developer tools Slide 19 Discover the power of browser developer tools Slide 20

YouTube videos are no longer supported on SlideShare

View original on YouTube

Discover the power of browser developer tools Slide 22 Discover the power of browser developer tools Slide 23 Discover the power of browser developer tools Slide 24 Discover the power of browser developer tools Slide 25 Discover the power of browser developer tools Slide 26 Discover the power of browser developer tools Slide 27 Discover the power of browser developer tools Slide 28 Discover the power of browser developer tools Slide 29 Discover the power of browser developer tools Slide 30

YouTube videos are no longer supported on SlideShare

View original on YouTube

Discover the power of browser developer tools Slide 32 Discover the power of browser developer tools Slide 33 Discover the power of browser developer tools Slide 34 Discover the power of browser developer tools Slide 35

YouTube videos are no longer supported on SlideShare

View original on YouTube

Discover the power of browser developer tools Slide 37 Discover the power of browser developer tools Slide 38 Discover the power of browser developer tools Slide 39 Discover the power of browser developer tools Slide 40 Discover the power of browser developer tools Slide 41

5

Share

Download to read offline

Discover the power of browser developer tools

Download to read offline

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.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • BuckITservices

    Jul. 7, 2015
  • danyricher

    Jul. 6, 2015
  • ChialiTsai

    Jul. 5, 2015
  • geraldinejippe

    Jul. 5, 2015
  • guyebouchard

    Jul. 4, 2015

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.

Views

Total views

1,002

On Slideshare

0

From embeds

0

Number of embeds

51

Actions

Downloads

14

Shares

0

Comments

0

Likes

5

×