Debugging techniques

Start with console output for quick runtime checks. Use a temporary dialog only when you cannot keep the debugger visible, then move to the UXP Developer Tool for breakpoints and deeper inspection.

data-src=../_shared/prerequisites.md

Log values to the console

Open the UDT debugger and use the Console panel to inspect messages, warnings, errors, variables, and objects.

console.log("Plugin initialized");
console.warn("This feature is deprecated");
console.error("Failed to load data");

// Log variables and objects
const user = { name: "Jane", role: "Editor" };
console.log("User data:", user);
// Logs: User data: { name: "Jane", role: "Editor" }

const width = 1920;
const height = 1080;
console.log(`Resolution: ${width}x${height}`);

Show a temporary debug dialog

Use alert(), confirm(), or prompt() for a temporary check when console access is inconvenient. Remove these calls after diagnosing the problem so they do not interrupt the user workflow.

data-variant=error

data-slots=text

data-variant=info

data-slots=heading, text

data-slots=heading, code

data-repeat=2

data-languages=JavaScript, JSON

// Simple alert dialog
alert("Plugin loaded successfully");

// Confirmation dialog
const confirmed = confirm("Do you want to continue?");
if (confirmed) {
  console.log("User clicked OK");
} else {
  console.log("User clicked Cancel");
}

// Prompt dialog for user input
const userName = prompt("Enter your name:", "Default Name");
console.log(`User entered: ${userName}`);

{
  "manifestVersion": 5,
  "featureFlags": {
    "enableAlerts": true
  }
}

Open the full debugger

Use the UDT debugging workflow to inspect elements, set breakpoints, step through code, and analyze network requests.