Tips for new TMS Web Core developers and in particular for seasoned Delphi developers

Browser debugging tip.

Scenario: You have a dynamically displayed control on the page that only appears after some kind of user action. Like a popup menu or a combobox dropdown or something like that. And you want to use the browser DevTools to look at or test the CSS properties of the control in its activated state. But when you click on the element in the DevTools node tree, the state of the control reverts back and you can't see the properties you're after.

One option is to use the DevTools console to trigger a debug event after a short delay. Just paste this into the console and hit enter. You'll have a three second delay before the debugger pauses, giving you enough time to bring up the menu or click on the combobox to show the dropdown. You can then look at that element's properties, adjust settings, and so on, without it reverting back to its normal state.

setTimeout(function() { debugger; }, 3000);

Of course you can also adjust that 3000 to something larger if you need more time to select the appropriate control.

2 Likes