Skip to content

Latest commit

 

History

History
180 lines (158 loc) · 15.8 KB

README.md

File metadata and controls

180 lines (158 loc) · 15.8 KB

DevTools Learning List of resources to learning this amazing tools

DevTools site

Table of Contents

Tutorials in Gifs

  1. DevTools port forwarding allows localhost URLs to work on mobile
  2. DevTools Triggering of pseudo classes
  3. DevTools - replay a network request in cURL
  4. DevTools - Run predefined snippets of code on any web page
  5. DevTools - Local Modifications
  6. DevTools - Easy timeline recording
  7. DevTools - DOM tree search by CSS selector
  8. DevTools - Copy image as data URI
  9. DevTools - Go to a line number at a specific column
  10. DevTools - Cycle through editing locations
  11. DevTools - Copy the response of a network resource to your clipboard
  12. DevTools - Command click to add multiple cursors in the Sources Panel
  13. DevTools Perform a column selection by by dragging
  14. DevTools Quickly monitor events from the Console Panel
  15. Console shortcut to get the currently selected DOM node
  16. See unfinished network requests with the is:running network filter
  17. Quick-edit the HTML Element tag
  18. Alt + Click to expand all child nodes
  19. Toggle the DevTools dock state with a keyboard shortcut
  20. Reveal DOM nodes in the Elements panel from the Console
  21. See the exact statement which executed with granular highlighting
  22. Some UI and feature enhancements to the Colour Picker tool
  23. 15 Must-Know Chrome DevTools Tips and Tricks
  24. Set a breakpoint and navigate through the call stack with keyboard shortcuts
  25. Select an easing to get a visual animated preview for how it behaves
  26. 5 tricks to use in the Console Panel
  27. DevTools Tip: View and change your DOM breakpoints with the breakpoints pane
  28. DevTools Tip: Get and debug event listeners with Console commands
  29. DevTools Tip: Automatically pause on uncaught exceptions
  30. DevTools Tip: Expand shorthand properties
  31. DevTools Tip: See matching selectors
  32. DevTools Tip: The new Network Filmstrip and timeline
  33. Sublime Text: Fuzzy search
  34. DevTools Tip: Quickly change CSS values (keyboard or mousewheel)
  35. DevTools Tip: Scroll elements into the viewport
  36. Node: Try out JavaScript ES6 locally
  37. DevTools Tip: View/edit resources from the Elements panel into the Sources Panel

⬆ back to top

Articles & Tutorials

  1. Introducing Chrome DevTools for Mobile
  2. Secrets of the Browser Developer Tools
  3. Responsive Web Design with DevTools' Device Mode
  4. Chrome DevTools upcoming features
  5. Chrome 41 Beta: New ES6 Features and Improved DevTools for Service Workers and Web Animations
  6. DevTools Timeline: Now Providing the Full Story
  7. DevTools answers: What font is that?
  8. Using Chrome DevTools to Debug JavaScript in Any Browser with Ghostlab 2
  9. Using Your Terminal From The DevTools
  10. Chrome DevTools November Digest
  11. Chrome DevTools Revolutions 2013
  12. DevTools Digest - Chrome 35
  13. DevTools Digest
  14. Debugging Asynchronous JavaScript with Chrome DevTools
  15. Canvas Inspection using Chrome DevTools
  16. Profiling Long Paint Times with DevTools' Continuous Painting Mode
  17. Auditing Your Web App For Speed
  18. Accelerated Rendering in Chrome
  19. Profiling Mobile HTML5 Apps With Chrome DevTools
  20. Taking Chrome DevTools outside of the browser.
  21. Chrome DevTools Overview
  22. Authoring & development workflow
  23. Using the Console
  24. Tips And Tricks
  25. Editing Styles And The DOM Introduction
  26. Debugging JavaScript
  27. Device Mode & Mobile Emulation
  28. Remote Debugging on Android with Chrome
  29. Workspaces - Persistent authoring in the DevTools
  30. Evaluating network performance
  31. Performance profiling with the Timeline
  32. Timeline demo: Diagnosing forced synchronous layouts
  33. Timeline demo: Diagnosing forced synchronous layouts
  34. Profiling JavaScript Performance
  35. JavaScript Memory Profiling
  36. Remote debugging protocol
  37. Settings
  38. Keyboard Shortcuts
  39. Extending DevTools
  40. Integrating with DevTools
  41. Command Line API Reference
  42. Console API Reference
  43. Advanced Performance Audits With DevTools
  44. Working With LESS and the Chrome DevTools
  45. Chrome DevTools Features You May Have Missed
  46. Developing With Sass and Chrome DevTools
  47. Chrome Dev Tools: JavaScript and Performance

⬆ back to top

Screencast

  1. Frame Viewer in Chrome DevTools Timeline
  2. Paint Profiler in Chrome DevTools Timeline
  3. background v background color CSS Performance investigation
  4. Redefining a function as you debug it in Chrome DevTools - LiveEdit recompilation in action
  5. Answered: Do animated gifs still animate while in a background tab?
  6. Devtools experiments
  7. Debugging and fixing Canadian Jank
  8. 2D transform's translate() vs absolute positioning: Performance evaluation with Chrome DevTools
  9. Chrome DevTools - Live Edit CSS, Save to Disk
  10. Chrome DevTools - Live Edit CSS, Save to Disk
  11. Chrome DevTools Live Edit + Breakpoints
  12. Outlined DOM elements in the Chrome Dev Tools
  13. Viewing Painting Behavior w/ Chrome DevTools
  14. 15 tricks to master Chrome Developer Tools Console
  15. Chrome DevTools for CSS - Better CSS Coding & CSS Debugging with Developer Tools
  16. The Breakpoint

⬆ back to top

Talks

  1. Advanced performance tooling in Chrome DevTools - Paul Irish @ Velocity 2014
  2. Chrome Developer Tools for Speed
  3. Google I/O 2013 - Chrome DevTools Revolutions 2013
  4. Advanced Debugging Techniques with Chrome - @Scale 2014 - Web
  5. Wait, Chrome Dev Tools could do THAT
  6. DevTools State of the Union
  7. Wait, Chrome Dev Tools could do THAT?
  8. Wait, Chrome DevTools can do THAT? (JQueryUK 2013)
  9. Improving Your 2013 Productivity With The Chrome DevTools
  10. Optimizing network performance - Chrome Dev Summit 2013
  11. []

⬆ back to top

Courses

  1. Website Optimization
  2. Explore and Master Chrome DevTools
  3. Mastering the Google Chrome Developer Tools
  4. Chrome Developer Tools

⬆ back to top

Extension

  1. PageSpeed Insights (by Google)
  2. WebGL Shader Editor
  3. Web Audio API Editor Extension for Google Chrome
  4. Yez - Chrome extension that acts as terminal and task runner
  5. React Developer Tools
  6. Grunt Devtools

⬆ back to top

Who to follow

Ilya Grigorik Addy Osmani Paul Irish Paul Bakaus Umar Hansa ChromeDevTools
Ilya Grigorik Addy Osmani Paul Irish Paul Bakaus Umar Hansa ChromeDevTools
⬆ back to top