paoloalmeida / 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

⬆ 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](Using Your Terminal From The DevToolshttp://www.html5rocks.com/en/tutorials/developertools/devtools-terminal/)
10. Chrome DevTools November Digest
11. Chrome DevTools Revolutions 2013

⬆ 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

⬆ 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

⬆ back to top

Courses

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

⬆ back to top

Extension

1. PageSpeed Insights (by Google)

⬆ back to top

Who to follow

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