Sunday, January 25, 2015

Detect window metric changes using Highlight changed properties enhancement

May times it is not clear which window metrics properties are affected when you move, resize or scroll windows. I found the Highlight changed properties enhancement to Chrome Devtools very useful here. For example I loaded up the enhancement into Chrome Devtools App, started debugging, suspended the Javascript execution, added a watchpoint on window,expanded the watchpoint, resumed the debugger, moved, resized the window and suspended the Javascript execution again, and looked at the highlighted properties. Viola.

BTW if you like the Highlight changed properties enhancement then Star or comment on the Chrome Devtools issue 441374. The patch is being reviewed at the moment and hopefully the enhancement will become available in Chrome Browser soon.

NOTE: Now the Highlight changed properties enhancement is coded as an experiment. You will have to turn on the behavior by selecting the Setting (Gear) > Experiments > Highligh changed properties checkbox.

Make sure to load this devtools:

URL in Chrome Devtools App,

No comments: