Edit JavaScript inside Source
To use this feature, go to the Sources-Tab and switch to Overrides-Tab on the left menu. Here you have to enable the checkbox Enable Local Overrides and select a folder to store them locally.
Now you can start editing files on the fly in your Chrome. To edit files, select the file you want to edit and save the changes.
Note: Obviously this is only for debugging purpose and it does not commit these files to your server ;)
This is a feature I recently started using. Because I work with CI, I normally debug websites in my local development environment. Occasionally I either don’t have my workstation at hand or don’t want to spin up my local environment. In that case, I will use this feature to test solutions.
Debugging Breakpoints and Listeners
This feature lives in the Sources-Tab. You can find it on the right-hand side. Here you have an overview of tools for debugging a site. With XHR/fetch Breakpoint it is possible to react to XHR-Requests this helps to find the origins of a request. In here you can also manage your global listeners, or create breakpoints for event listeners.
This frequently comes in handy if you don’t know what exactly is going on and want to find out where things originate from.
Using the Console
The console helps with testing scenarios on the fly. You can type JavaScript statements directly into it. The console can trigger events to test your event listeners.
Another smart feature of the console is the option to create live expressions. A live expression displays the effect of the expression you create. You can create them by using the eye button on top of the console.
Element Browser
The element browser has some nifty features, like creating a selector for an element or enforcing a state on one.
The most useful feature I think is the possibility to create breakpoints on modification or removal. Chrome sets these breakpoints on the state change, which allows for debugging the full process. With the addition of the callstack, you can easily figure out what is happening.