Use the Chrome Debugger to pause execution of your application as it runs to see what’s happening in slow-motion. The debugger is an advanced tool that allows you to examine every change that happens in your application so that you can understand how and why your application state evolves over time.
Using the Snippets tab in the source devtool you can define and run arbitrary pieces of code in your browser against whatever website you’re looking at. This is a great way to store commonly used pieces of code that you rely on for debugging or customization.
There are a variety of ways to trigger the debugger in Chrome's DevTools. You can set breakpoints on line numbers, break on XHR requests or DOM changes, break on specific events or even manually break by using the special
debugger keyword in your code.