Fronteers — vakvereniging voor front-end developers

Fronteers 2015 workshop "Mastering browser devtools" by Remy Sharp

Maxing out 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.

What you'll learn

  • Workflow: Using the tools you know to simply your daily workflow
  • Mobile: Using the tools you know to debug tiny machines
  • Memory: How to identify and diagnose memory leaks in the wild
  • Console: Power features beyond console.log
  • 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

Preparation

About Remy

Remy Sharp

Remy is the founder and curator of Full Frontal, the UK based JavaScript conference. He also ran jQuery for Designers, co-authored Introducing HTML5 (adding all the JavaScripty bits) and likes to grumble on Twitter.

Whilst he's not writing articles or running and speaking at conferences, he runs his own development and training company in Brighton called Left Logic. And he built these too: Confwall, jsbin.com, html5demos.com, remote-tilt.com, responsivepx.com, nodemon, inliner, mit-license.org, snapbird.org, 5 minute fork and jsconsole.com!