Vega Extension Console Tools

Vega Extension Console Tools help Creators debug custom 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 article.

To use extension console tools:

Open an existing module in the Module Builder.
Open (Run) an extension.
Learn how to use extensions in our Module Extension Drawer article.
Open the DevTools Console.
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.

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. 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. 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. 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. 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.