dev-tips-tracker
dev-tips-tracker copied to clipboard
umaar
DevTools Video Course: What do you want to see?
Please 'thumbs up' the relevant comment below, or add your own suggestions:
Update: You can now sign up for the course ▶ ModernDevTools.com
Performance (Basic) - Network perf, how to use your build system to output optimised resources etc.
Performance (Advanced) - Rendering perf, using the Timeline Panel to diagnose jank. Understand what layout thrashing is. Using Chrome Tracing Tools. Collecting traces in a CI environment.
DevTools as an IDE - What you need to know in order to keep your development environment within the browser.
Building a DevTools extension - Enhance your dev workflow by building extensions to automate.
Accessibility - Carry out Accessibility audits on your own website and learn how to fix issues.
Chrome DevTools Source Code - Learn to navigate your way around the DevTools source itself (it's all a web application). Become a contributor by landing your own bug fix or feature.
Performance Audits of other popular websites - improving the front-end perf of other existing websites.
Security - Explore and discover security exploits of other websites with the aid of DevTools and a few other tools.
Workflows - Modern workflows to adopt in your web development and web debugging journeys.
Node.js - How to develop, debug and solve problems with Node.js and DevTools.
Mobile - Advanced remote debugging techniques and everything you need to know about responsiveness and how DevTools can help with this.
DevTools Experiments - Everything you need to know about the available experiments (e.g. like the Terminal one) and how to stay up to date with them and learn when new ones arrive.
JavaScript ES6 & ES7 - How to use brand new features of JavaScript effectively and discovering hidden debugging options for bleeding edge features.
DevTools for Designers - How a designer, or someone with little programming knowledge can effectively use DevTools to improve websites, discover potential performance bottlenecks, and then feed this back to a developer.
DevTools for DevOps - How someone responsible for the infrastructure side of websites can fully utilise hidden DevTools features (along with a few Command Line Tools) to diagnose and solve network related performance issues. Learn how to expose server side debugging and logging directly in DevTools. Also debug caching issues.
Debugging Third Party Services and APIs - Understand bugs caused by third party code like ad trackers, plugins etc. Also work with external APIs efficiently and effectively.
Paint Profiling - Deeper insights into how a browser paints your page, how to read and explore draw calls executed by the browser renderer.
Visualising Performance Metrics with continuous integration - Record and study performance metrics of your website into a dashboard which updates with each code check-in.
Using HTTP2 - Learn how to implement HTTP2 with your Node.js website, also understand the performance benefits of doing so.
Would be nice to include TLS concerns when talking about service workers. How to, LetsEncrypt, that stuff.
If it's not too far off topic, I'd love to see a discussion of the various levels of caching (database, web server, in-browser,) how to use them effectively, and how to take them into account when optimizing your application for speed.
Regarding using devtool as IDE, I wondering how to properly customize the CodeMirror that we can have features such as code folding, showing indent guides, emmet support...
Is it me or can no one else add reactions? Maybe it's just the mobile site?
