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.

Using Chrome Dev Tools

830 views

Published on

Chrome is not just a great browser for viewing websites, but also an invaluable tool for building websites. Out of the box, Chrome ships with “developers tools”. Many web developers are aware of this and make use of some of the tools it provides. However, most developers only scratch the surface of what the browser can do.

Join in as we take a deep-dive into the Chrome developer tools and learn, among other things, how to:

– Quickly test styling fixes
– Emulate handheld devices to test responsive designs
– Easily navigate and debug JavaScript
– Use the JavaScript console
– View form submissions
– Monitor AJAX requests
– Check for performance issues
– Troubleshoot caching issues
– Create and use your own snippets

Published in: Technology
  • Be the first to comment

Using Chrome Dev Tools

  1. 1. Micah Wood @wpscholar https://wpscholar.com/wcraleigh2016 Using Chrome Developer Tools
  2. 2. Open from Menu
  3. 3. Open by Right Clicking
  4. 4. Elements Panel
  5. 5. Navigating the DOM
  6. 6. Searching the DOM
  7. 7. Editing the DOM
  8. 8. Toggle Classes
  9. 9. Add / Edit Attributes
  10. 10. Edit Elements
  11. 11. Delete Elements
  12. 12. Locating Styles
  13. 13. Filter Styles
  14. 14. Computed Styles
  15. 15. Editing Styles
  16. 16. Toggle Specific Styles
  17. 17. Edit Units
  18. 18. Create New Style Rules
  19. 19. Toggle Element State
  20. 20. View Rendered Fonts
  21. 21. Network Panel
  22. 22. Waterfall View
  23. 23. Table View
  24. 24. Filtering Table View
  25. 25. Detail View
  26. 26. Disable Cache
  27. 27. Network Throttling
  28. 28. Replay AJAX Requests
  29. 29. Device Toolbar
  30. 30. Responsive Breakpoints
  31. 31. Emulate Devices
  32. 32. Sources Panel
  33. 33. Find and Open Files
  34. 34. Pretty Print
  35. 35. Breakpoints
  36. 36. Persisting Changes
  37. 37. Edit Source Files in the Browser
  38. 38. Stage Persisted Changes
  39. 39. Snippets
  40. 40. Console
  41. 41. document.querySelector()
  42. 42. document.querySelectorAll()
  43. 43. $0, $1, $2, $3, $4
  44. 44. inspect()
  45. 45. Application Panel
  46. 46. Clear Cookies
  47. 47. View Local Storage
  48. 48. More Tools
  49. 49. Emulate Print Media
  50. 50. User Agent Spoofing
  51. 51. Search Everything
  52. 52. Settings
  53. 53. Resources • Chrome Snippets - http://bgrins.github.io/devtools-snippets/ • Chrome Tips - https://wpscholar.com/?s=chrome • 25 Tips and Tricks - https://www.keycdn.com/blog/chrome-devtools/ • Chrome Command Line API - http://developer.telerik.com/content- types/tutorials/easier-web-application-debugging-command-line-api/
  54. 54. Micah Wood @wpscholar https://wpscholar.com/wcraleigh2016 Using Chrome Developer Tools

×