lzhwweb / devtools-learning

List of resources to learn Chrome DevTools

List of resources to learning this amazing tools

DevTools site

Table of Contents

• Tutorials in Gifs
• Articles & Tutorials
• Screencast
• Talks
• Courses
• Extension
• Who to follow

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

• The Breakpoint Ep. 1: Chrome DevTools with Addy Osmani and Paul Lewis
• The Breakpoint Ep. 2: Chrome DevTools with Paul Irish and Addy Osmani
• The Breakpoint Ep 3: The Sourcemap Spectacular with Paul Irish and Addy Osmani
• The Breakpoint Ep. 4 The Tour De Timeline
• Breakpoint Episode 5: DevTools Grab bag
• The Breakpoint Ep. 6: Accelerating Load Time, Run Time, and JS tooling
• The Breakpoint Ep. 7: Profiling a mobile site with Chrome DevTools and Android
• The Breakpoint Ep. 8: Memory Profiling with Chrome DevTools

⬆ 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
   • [Slide] DevTools: State Of The Union 2015
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
⬆ back to top