Needle in a haystack - Advanced DevTools usage
The talk will cover the latest on the Chrome DevTools. The audience can expect an introduction to its the toolset with the help of near real life examples. More specifically, look forward to
- Understanding how to check your app for memory leaks and find out if your app needs memory optimizations.
- How to create your own Chrome DevTools extension and customize it?
- Understanding how you can debug faster. The latest advancements in the Debugger allow it to be used to control the flow of more than just scripts.
The DevTools offer a set of powerful debugging and analysis tools to developers by enabling access to the internals of web pages. While most of us use the browser tools on a day to day basis for styling or basic script debugging, the Chrome DevTools offer much more than just this.
I came across such use of DevTools on a previous project where they helped us in solving a major memory leak due to recurring event bindings. From then on, the DevTools have only gotten powerful and now it is paramount that we incorporate their use in our everyday development process.
Some insights about the talk:
- The talk will be in the form of small examples each corresponding to common problems faced when building front end heavy web applications. Taking each example, the idea would be to apply the available DevTools and see how they allow us to detect and, pin point the source of, performance bottlenecks.
- The talk will discuss the usage of some powerful debugging techniques enabled by the DevTools like Memory snapshot comparisons or the Object allocation tracker.
- Some popular extensions for the Chrome DevTools.
- Optimizing JS Apps to increase performance - https://www.youtube.com/watch?v=bwiPPywbpEg
- Offline in the browser- with IndexedDB, AppCache & LocalStorage - https://www.youtube.com/watch?v=3vXMNsCJ5Yw