Serve it, add it, debug it

Run your extension inside a real dashboard and open Chrome DevTools against it — the loop you will live in for every extension you build.

beginner8 min2 steps

Why it matters

The gap between 'I have two files' and 'it is running in my dashboard' is where most people stall, because the failure mode is silent: a blank zone, no error anywhere. The loop is mechanical once you have run it end to end — serve the folder on localhost, drop an Extension object onto the dashboard, point it at the .trex. And the payoff for wiring up remote debugging is enormous: full Chrome DevTools — console, breakpoints, network tab — attached to code running inside Tableau Desktop. Every extension developer who skips this step debugs by alert(); every one who does it debugs like it is a normal web page. Because it is one.

Prompt Recipehand this to your AI

Give me the exact terminal commands and click-path to run a local Tableau dashboard extension on Windows: serve the current folder at http://localhost:58072 using npx http-server, add it to a Tableau Desktop dashboard via the Extension object and Access Local Extensions, and enable remote debugging by launching Tableau Desktop with the --remote-debugging-port=8696 flag so I can open DevTools from a Chromium browser at http://localhost:8696. Include how to reload the extension after a code change without rebuilding the dashboard, and the two most common causes of a blank extension zone.

Step 1 — Serve the folder, add the object

Tableau fetches your page over HTTP, so something has to serve it — any static server works, and http-server from npm is the zero-config choice. Then, in a dashboard: drag the Extension object from the Objects palette into the canvas, choose Access Local Extensions, and open your .trex file. Tableau reads the manifest, fetches the URL, and your page appears in the zone.

If the zone is blank, it is almost always one of two things: the server is not actually running on the port the manifest names, or the manifest URL does not match the server’s address character for character. Both are diagnosable in ten seconds once DevTools is attached — which is the next step.

bash

# From the folder holding index.html and hello-dashboard.trex:
npx http-server -p 58072

# No Node? Python ships the same thing:
python -m http.server 58072

# Then in Tableau Desktop:
#   Dashboard -> drag "Extension" object into the canvas
#   -> Access Local Extensions -> open hello-dashboard.trex

Step 2 — Debug it like a browser — because it is one

Tableau Desktop is a Chromium host, and Chromium ships a remote-debugging protocol. Launch Desktop with the flag below, then open http://localhost:8696 in Chrome or Edge: you get a list of every page Tableau is rendering, your extension among them. Click it and you are in full DevTools — console.log output, breakpoints in your source, the network request behind every data call.

Your edit loop from here: change the code, then right-click the extension zone and choose Reload from its context menu. No re-adding, no restarting Tableau.

bash

# Windows — launch Tableau Desktop with debugging enabled
# (adjust the year.release to your install):
"C:\Program Files\Tableau\Tableau 2024.2\bin\tableau.exe" --remote-debugging-port=8696

# Then in Chrome or Edge, open:
#   http://localhost:8696
# and click your extension's entry to attach DevTools.

Got what you came for? Mark the stop and the line fills in beneath you.