JavaScript Console Debugging Tricks for APEX Developers

Your Best Friend During Development

The browser console is the most powerful debugging tool for APEX JavaScript. These techniques help you inspect APEX’s internal state, trace Dynamic Action execution, and diagnose issues without modifying your application.

Inspecting Page Items

// In the console, check any item's value
apex.item("P10_STATUS").getValue()
apex.item("P10_STATUS").isEmpty()
apex.item("P10_STATUS").isDisabled()

// List all page items and their values
$("[id^='P10_']").each(function() {
    if (apex.item(this.id).node) {
        console.log(this.id + " = " + apex.item(this.id).getValue());
    }
});

Inspecting Interactive Grid State

// Get the IG model and inspect data
var model = apex.region("myGrid").widget().interactiveGrid("getViews","grid").model;

// Count total rows
var count = 0; model.forEach(function() { count++; }); console.log("Rows:", count);

// Check for unsaved changes
var changes = model.getChanges();
console.log("Inserted:", changes.inserted.length);
console.log("Updated:", changes.updated.length);
console.log("Deleted:", changes.deleted.length);

Tracing AJAX Calls

// Monitor all APEX AJAX calls
$(document).ajaxSend(function(e, xhr, options) {
    console.log("AJAX Request:", options.url, options.data);
});
$(document).ajaxComplete(function(e, xhr, options) {
    console.log("AJAX Response:", options.url, xhr.status, xhr.responseText.substring(0,200));
});

Tracing Dynamic Action Execution

// Enable APEX debug mode from the console
apex.debug.setLevel(apex.debug.LOG_LEVEL.INFO);

// Or add ?debug=YES to the URL for server-side debug
// The developer toolbar shows DA execution sequence

Performance Profiling

// Time a specific operation
console.time("gridRefresh");
apex.region("myGrid").refresh();
// In the After Refresh handler:
console.timeEnd("gridRefresh"); // Outputs: gridRefresh: 342ms

// Profile memory usage
console.log("Memory:", performance.memory);

Useful Bookmarklets

// Bookmarklet: Show all hidden items on the page
javascript:void($("[type='hidden']").each(function(){console.log(this.id+"="+this.value)}));

// Bookmarklet: Highlight all regions with their Static IDs
javascript:void($(".t-Region").each(function(){var s=$(this).attr("id");if(s){$(this).css("outline","2px solid red").attr("title",s)}}));