Art of Debugging and optimising Front End using Chrome Dev Tools.

Every front end developer relies on chrome dev tools, yet few exploit it fully for debugging and optimising front end performance. This session aims to go beyond inspect element and network tab to provide tips/tricks/pointers on advance front end debugging and optimisation. We will employ devtools on real world front end issues and applications to show its power and talk about concepts that would help a front end developer deconstruct a front end problem and to use it effectively. Below is a brief outline of the talk:

• Chrome dev tools Introduction

  • Popular features

  • Less known features

• Exploring Chrome Dev Tools for debugging

  • Hands-on Debugging

  • Various settings and tools available

• Performance audits using RAIL Model

  • Js Profiling

  • Input Latencies

• Browser Rendering painting and Compositing

• Response Latency of web apps

• Mobile Performance Audits

• Analysis and Optimisation suggestions for a live application

• Other Chrome Extensions for developer productivity