Use the CEF/HTML Developer Tools to troubleshoot Designer issues. The designer uses a mix of Windows Forms technology and HTML for rendering elements - HTML elements are built using the Chromium Embedded Framework (CEF). Using the CEF debugger, you can troubleshoot errors with any HTML interface, including things such as:
- Authentication errors when configuring a Connector (in the tool configuration)
- Blank windows/windows not rendering
- Errors connecting to the Gallery from Designer
Note: While the developer tools can be used to debug other Alteryx products, such as Server and Connect, this article focuses on their use within Designer.
Alteryx Designer
Version 2021.1+
- Open Designer.
- Click Options > Advanced Options > Show HTML Developer Tools. You should see a little check next to the option once you select it, to indicate it's on.
- Click on a blank space on the canvas.
- Click on a tool/window that uses HTML. This will pop open the Alteryx HTML Developer Tools window.
Versions prior to 2021.1
Enable the CEF tools
Note: Only needed in versions before 2021.1
To enable Chrome Developer Tools:
-
Type regedit.exe in the command prompt, or search from the Start menu, to open the Registry Editor.
-
Browse to HKEY_CURRENT_USER\Software\SRC\Alteryx.
-
Right-click the folder, point to New, and click Key.
-
Type DebugGui.
-
Right-click the default value and click Modify.
-
Type 1 in the Value data and click OK.
-
Restart Alteryx Designer.
-
In the main menu, click Debug and select Show CEF Developer Tools.
The Alteryx CEF DevTools window automatically opens when you select a tool or window that uses the Chrome Embedded Framework.
Adding this registry key allows for remote debugging on port 9222, allowing CEF to be debugged from any CEF or Chrome browser window. To access the CEF remotely, go to the localhost URL oriented to the debugging port number: http://localhost:9222
Use the debugger in Designer
-
Open Designer
-
Click the Debug menu >Show CEF Developer Tools
-
Click on a blank space on the canvas
-
Click on a tool/window that uses HTML. This will pop open the AlteryxCEF DevTools window
Using the Debugger
You will mainly use the Elements, Console, Sources, and Network tabs for troubleshooting Designer issues.
|
Elements |
This tab lets you see the HTML of the page directly and manipulate and select elements on the page directly. |
|
Console |
This is a javascript debugging console. Here you will see any javascript errors being returned. |
|
Sources |
This tab shows all the scripts the page is using. |
|
Network |
This tab allows you to view the status of network requests and information such as how long the response took and response content. |
Common Uses
Troubleshooting errors with Connectors (i.e. login failures, tables missing)
The Connectors that utilize HTML make the authentication calls from within the GUI when you configure the tool. This means you can use the Network tab to inspect the calls and responses.
Here you can see an error when trying to connect to the Salesforce tool. To debug:
-
Drag the tool onto the canvas
-
Click any blank space on the canvas
-
Click back on the tool - the HTML Debug window should appear.
-
Click the Network tab
-
In the bar right below the Network tab, check the box Preserve log
-
Ensure that the trace is capturing - you will see a red dot to indicate it is capturing
-
Minimize the window and replicate the error in the tool's configuration.
-
Maximize the window to see the traffic trace. This should include a line with the error(s).
-
Click the response to see more details, such as the Headers and Response
-
Save the trace as a .har file.
-
Option 1
-
Right-click on any of the requests in the Network tab
-
Select Copy> Copy all as HAR
-
Paste this into a text file and save as a .har file
-
-
Option 2
-
Click the Export HAR button (looks like a download arrow)
-
-
FAQs
How to modify the way X thing looks - what file do you need to edit?
You can use the Console tab to find the back-end file that can edited. There are two ways to do this:
If you want to look at a particular element in the HTML:
-
To find the HTML file, select an element in the GUI by clicking the Cursor error in the top left
-
Select the element you want to modify. You will notice it jumps you to the line in the HTML where that element is.
-
Click the Sources tab. On the left you can see the file structure and the name of the file itself.
If you have a Javascript error on the Console tab and you want to find the corresponding Javascript file, the filename is found at the end of the error/message in the Console tab
I'm clicking on X and nothing is happening
Clicking on an object will run a Javascript function, so use the Console tab to see any errors being returned. For example, if you click on the Save button to publish a workflow to the Gallery and nothing happens, see what is being returned in the Console:
What windows in Designer can I debug?
Note: Relevant as of 2021.3-
Any tool that has an HTML interface)
-
File
└── Save As (and select a Gallery)
├── Select a Gallery (for uploading workflows)
└── Open Workflow (from a Gallery)
└── Add a Gallery
-
Options
├── Schedule Workflow
├── Export Workflow
├── Manage Connect Credentials
├── Add Promote Connection
└── Advanced Options > Manage Data Connections -
Global Search
What windows in Designer can I debug? How can I easily export the responses from the Network tab so I can investigate further?
The easiest way to export the responses is to create a HAR file. To do this:
Option 1
-
Right-click on any of the requests in the Network tab
-
Select Copy> Copy all as HAR
-
Paste this into a text file and save as a .har file
Option 2
-
Click the Export HAR button (looks like a download arrow)
To open the HAR file:
-
Open a web browser.
-
Hit F12 to open the Chrome Developer tools panel.
-
Click the Network tab.
-
Drag and drop the HAR file onto a blank space in the Network tab.