How to Hide & Show a region’s TIMING during development

You may be familiar with the handy Substitution String #TIMING# in Oracle Application Express (read more about TIMING and other Substitution Strings).
When you add it to the footer (or header) of a region you get to see how long it took to run.

It’s pretty nice, but you may not want to display that value all the time. It’s sure nice during development. So why not make it optional? Or toggle it on or off?

Use the following CSS:

.timing {display: none;}
body.grid-debug-on .timing {
  display: inline;
}
.legend {
 font-size: .8em;
 color: #767676;
}

Add this line on a region footer:

#TIMING# s.

Then the “Show Layout Columns” button on the APEX Developer Toolbar can be used to toggle the visibility of your timing entry.

Maybe this gives you other creative ideas, share them in the comments.

Keep in mind, as Peter mentions on Twitter (https://twitter.com/PeterRaganitsch/status/961727699667517440)
The #TIMING# value only makes sense for report regions and it couldn’t measure AJAX process.

Looking at the TIMING Substitution String is not a replacement for the Debug information generated by APEX.