Chrome developer tools local modifications broken

Question

Am i missing something or did i manage to break it somehow?

Iv set a breakpoint and would like to do some debugging there without having to edit the js code each time and reloading the whole page. The "local modifications" options only opens new drawer with empty history tab and nothing else.

While console does show most variables - it does not help if a structure similar to this is used:

rate += Number(oldRates[key]) / 100;

Without logging or assigning it to a variable, i do not know what oldRates[key] actually returns (besides looking at what value this key has).

This is where a local modification to separately log this part out or assign to a variable would be useful.

Answer 1

Local Modifications appear in the History tab and show when you make a changes to the Sources and Save them. It allows you to revert those changes without reloading the application. See Demo.

You can use a Watch Expression to view the current state of an object during execution.

In the example above, I paused after I created the object. I added a watch on the obj variable and now I can see all keys and values in the watch Panel. I don't have to constantly log it to the console.