--- title: "Vega Extension Console Tools" slug: "vega-extension-console-tools" description: "Discover what browser console tools are available for debugging your extension." updated: 2025-10-28T13:47:16Z published: 2025-10-28T13:47:16Z canonical: "docs.unqork.io/vega-extension-console-tools" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.unqork.io/llms.txt > Use this file to discover all available pages before exploring further. # Vega Extension Console Tools **Vega Extension Console Tools** help Creators debug [custom extensions](/v1/docs/introduction-to-extensions) in the Module Builder. Extension console tools function the same way as Vega console tools, but use the `EXTENSION` prefix instead of the `UNQENG` prefix. > To learn more about the Vega Console, see our [Vega Console](/v1/docs/vega-console) article. To use extension console tools: 1. Open an existing module in the Module Builder. 2. Open (Run) an extension. > Learn how to use extensions in our [Module Extension Drawer](/v1/docs/module-extensions) article. 3. Open the DevTools Console. 4. In the Console command line, enter `EXTENSION.tools.{toolname}`, where `{toolname}` is the specific function you want to achieve. ## Extension Commands List Below is a list of extension console tools available to Creators: ### Fields There's one Fields function you can use to determine the component state. | Syntax | Description | | --- | --- | | EXTENSION.tools.ComponentState | Returns the state of all components currently rendered in the extension modal. | ### Methods To invoke a method, you'll append parentheses to the end of the function. Some methods let you add arguments in parentheses to specify the information you want. > [!NOTE] > Arguments must be added as a string in single quotes. For the following functions, the `key` value refers to a component's **Property ID**. Below is a list of all available Methods functions. | Syntax | Description | Example | | --- | --- | --- | | EXTENSION.tools.getRuntimeData() | Returns all data currently present. This data includes persisted and non-persisted values. | | | EXTENSION.tools.getSubmissionData() | Returns all data currently present that will be persisted when the next extension submission save occurs. | | | EXTENSION.tools.getComponentValue(key) | Returns the current component value for the specified component Property ID. | `EXTENSION.tools.getComponentValue('firstName')` | | EXTENSION.tools.getComponentState(key) | Returns the current component state for the specified component Property ID. | `EXTENSION.tools.getComponentState('firstName')` | | EXTENSION.tools.getAllValidationErrors() | Returns all validation errors for components rendered in the extension modal. | | | EXTENSION.tools.getLastSavedSubmission() | Returns the most recently loaded submission data for the extension. For example, if you reopen the extension, this function retrieves the submission data from that initial load. You won't see any other changes made on the page since that time. | | | EXTENSION.tools.getCurrentUser() | Returns the current extension user data. | | | EXTENSION.tools.logChangesByKey$(key) | Returns log changes for the specified component Property ID. This function is useful when you only want a filtered view of what changed. This function looks for changes in the specified component and logs a new message in the Console each time the component state changes. Only logs of the changed fields display. > [!NOTE] > This is a dynamic function. After entering the function in the Console, changes in the component populate in the Console as they occur. | `EXTENSION.tools.logChangesByKey$('textField')` | | EXTENSION.tools.logObjectByKey$(key) | Returns log changes for the specified component Property ID. This function is useful when you only want to see the entire state object for a component that's changed. This function looks for changes in the specified component and logs a new message in the Console each time the component state changes. > [!NOTE] > This is a dynamic function. After entering the function in the Console, changes in the component populate in the Console as they occur. | `EXTENSION.tools.logObjectByKey$('textField')` | | EXTENSION.tools.watchDomChanges$() | Returns all DOM changes rendered in the application. The changes log as arrays of `MutationRecords`, from the `MutationObserver` browser API. > [!NOTE] > This is a dynamic function. After entering the function in the Console, changes in the component populate in the Console as they occur. | | | EXTENSION.tools.profile() | Reloads the page and profiles the engine. After running this syntax, the page reloads and begins collecting module performance data. After collecting performance data, use `EXTENSION.tools.profileEnd()` to end the profiling session and load the data into the DevTools Performance tab. | `EXTENSION.tools.profile('Sample1')` | | EXTENSION.tools.profileEnd() | Use after starting a profile session with `EXTENSION.tools.profile()`. After running this command, the performance data loads into the DevTools Performance tab. > [!NOTE] > The Input Label string must match the value used to start the profiling. For example, start a profiling with `EXTENSION.tools.profile('Sample1')`, and end it with `EXTENSION.tools.profileEnd('Sample1')`. | `EXTENSION.tools.profileEnd('Sample1')` | | EXTENSION.tools.help() | Returns the most recently loaded submission data in the extension. For example, if you refresh the page, this function retrieves the submission data from the initial extension load. You won't see any other changes made on the page since that time. | | | EXTENSION.tools.updateComponentState() | Update a component's state with a partial or complete component definition. For example, to change a Text Field component's Hidden setting value from false to true, run `EXTENSION.tools.updateComponentState('propertyID', { display: { hidden: true }})`. | `EXTENSION.tools.updateComponentState('firstName', { display: { hidden: true }})` | | EXTENSION.tools.getComponentTree() | Returns an object representing the state of all components and how they are nested. If a component contains another component, its data contains a `childIds` property with the contained component. | | Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. Debugging is the process of finding and resolving errors or bugs in an application. To debug an application in Unqork, use UNQENG tools in Express View. The DevTools Console helps you securely store, build, test, and deploy your software. A modal is a window that appears on top of the content you are currently viewing. A string is an object that represents a sequence of characters. Strings typically hold data represented in text form. Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections. An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity. The DevTools Console helps you securely store, build, test, and deploy your software. ## Related - [Introduction to Extensions](/introduction-to-extensions.md) - [Module Extensions Drawer](/module-extensions.md)