Debugging Techniques

Use console logs and dialog methods to debug your plugin quickly

While the UXP Developer Tool offers a full debugging experience with breakpoints and the Chrome DevTools, these simple techniques can help you quickly troubleshoot issues during development.

Prerequisites

Before you begin, make sure your development environment uses the following versions:

Console Logging

The simplest way to debug is to log values to the console. Open the UXP Developer Tool console to view output.

// Basic logging
console.log("Plugin initialized");          // 💡 General information
console.warn("This feature is deprecated"); // ⚠️ Warnings (yellow)
console.error("Failed to load data");       // ❌ Errors (red)

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

// Log multiple values using template literals
const width = 1920;
const height = 1080;
console.log(`Resolution: ${width}x${height}`); // Template literals for formatting

Dialog-based Debugging

For quick checks without switching to the console, use dialog methods to display information or input values directly in the UI.

data-variant=error

data-slots=text
The alert(), confirm(), and prompt() methods are not fully supported in Premiere; they will be fixed in a future release.
data-variant=info

data-slots=heading, text
Requires Manifest configuration
To use alert(), confirm(), and prompt(), you must enable the enableAlerts feature flag in your manifest.json.
data-slots=heading, code

data-repeat=2

data-languages=JavaScript, JSON

index.js

// 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}`);

manifest.json

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

Using UXP Developer Tool

For comprehensive debugging using the UXP Developer Tool, please refer to the Plugin Workflows documentation.

Reference Material