Mastering browser devtools

Sure, you've moved past alert debugging and discovered console.log, but did you know you can replay XHR requests instead of having to repeat your steps to make the request? Or that you can proxy your local server through a browser configuration so your mobile phone can see it? This workshop is dedicated to learning the native developer tools baked in to the browser to make our life a little more bearable.

We will primarily look at the debugging features of Chrome DevTools and those concepts that apply to other browsers. We'll also look at remote mobile debugging using native tools and also look at the alternative tools where native support isn't available.

The workshop will mostly be about the foundation of debugging techniques, which apply way beyond just a single browser's debugger tool, but will raise your expectation of all web debugging environments.

"Solid pragmatic immense knowledge about...like anything you would throw at him. Easy to change his plans to respond to the audience interests."

- Booking.com

"Learnt a ton in @rem's debugging workshop yesterday. Eager to put it into use!"

- Mark Perkins

What you'll learn

• Workflow: How to make DevTools your development IDE
• Console: Power features beyond console.log
• Memory: How to identify, diagnose and remediate memory leaks in the wild
• Mobile: Using the tools you know to debug tiny machines
• Network: What's slow, why and the detail behind a request
• Performance: How to read and investigate rendering issues
• Application: You'll apply these new skills directly to live websites

What do I need for this workshop?

• A laptop with a decent code editor (Sublime, VS Code, etc)
• Google Chrome and Google Canary
• Node installed (make sure it's a recent version)