Experimental – Experimental – Experimental – Experimental – Experimental
Only works with v5.4.0-prerelease and later
Hi everyone,
I’d like to share the DevTools plugin from the WikiLabs collection. It adds browser-side inspection capabilities to TiddlyWiki — hover tooltips, a context menu, a source viewer, and a variable inspector. It helps you understand how rendered output maps back to wikitext source, across transclusion boundaries, macros, procedures, and list widgets.
Demo & docs: DevTools — For TiddlyWiki developers
Quick Start
-
Install the plugin from the demo page
-
Go to Control Panel → Settings → Source Position Tracking and enable it
-
Save and reload the page
-
Hover any element to see its source position
-
Right-click any element for the full context menu
Features
Hover Tooltip
Hovering over any rendered element shows a tooltip after a short delay (400ms). It displays:
-
Source position — e.g.,
L3 @ GettingStarted -
Transclusion caller chain — traces back through
ViewTemplate,PageTemplate, etc. -
Context — shows
currentTiddlerwhen it differs from the source tiddler (useful for list widgets)
The hovered element gets an orange dashed outline. Parent outlines are hidden when a child is hovered, so only the innermost element is highlighted.
Context Menu
Right-clicking any tracked element opens a custom context menu (use Ctrl+right-click for the native browser menu).
The menu header shows the source position with icon buttons:
-
Pencil — opens the tiddler in edit mode and auto-selects the corresponding source text
-
Eye — appends the source code to the Source Viewer panel
Below the header:
-
Copy tiddler title / Copy source position — clipboard actions
-
Inspect variables — opens the Variable Inspector
-
Open tiddlerTitle — navigates to the source tiddler
-
Open ← callerTitle — one entry per caller in the transclusion chain
Variable Inspector
Shows all variables in scope at a specific element. Open multiple inspectors simultaneously, each with its own colour.
-
Type badges —
var,macro,proc,def,fn,widgetwith colour coding -
Grouping — variables grouped by source tiddler, local scope first
-
Smart filtering — type keywords match the badge; other terms match name/value
-
Previews — eye icon toggles inline previews for tiddler references and definitions
-
Linked panels — filter, size, and previews can be synced across all open inspectors
-
Live updates — variables re-collected after each TW page refresh
-
Macro substitution — evaluated body shown with green (matched) / red (missing) colour coding
Source Viewer
A floating, draggable, resizable panel that accumulates source code entries. Click the eye icon in the context menu to add entries.
Key features:
-
Deduplication — same source from different contexts adds a new header above the existing code block instead of duplicating it
-
Origin highlighting — hover an entry header to blink the origin element 3× in red, then show a steady blue outline
-
Procedure extraction — if the source is inside a
\procedure,\define,\widget, or\function, the entire definition is shown -
Supports up to 100 entries; layout is stored in-memory (no store writes)
How It Works
The plugin uses TiddlyWiki’s hook system — zero overhead when disabled:
-
th-dom-rendering-element— tracks HTML elements -
th-dom-rendering-link— tracks link elements -
th-dom-rendering-codeblock— tracks code blocks -
Monkey-patches the transclude widget to track source context across transclusion boundaries
Line numbers are file-ready — they include the .tid file header offset and macro body offset, so they match exactly what your text editor shows. No core file modifications are required.
Configuration
| Tiddler | Values | Description |
|---|---|---|
$:/config/wikilabs/SourcePositionTracking |
yes / no
|
Master switch (default: yes) |
Status
The plugin is currently marked as EXPERIMENTAL. Feedback, bug reports, and ideas are very welcome!