The dataSPA Inspector is an attempt to provide some of the functionality of the Inspector found in the Pro version of Datastar.
The inspector will show the current state of dataSPA/datastar signals on the page and also show signal and element patch events received from the server.
Show the current value of the various signals. Mouse over the signal name to highlight the elements where the signal is used. Shift-click on the signal name to scroll the first matching element into view.
Toggle between table and object view.
See the patch event. Send it to the console, copy it to the clipboard, or replay the event.
See the patch event. Send it to the console, copy it to the clipboard, or replay the event.
To use the inspector, include the following script tag in your page <head>:
<script defer type="module" src="https://cdn.jsdelivr.net/gh/dataSPA/dataSPA-inspector@main/dataspa-inspector.bundled.js"></script>Then include the inspector using the following HTML tag anywhere in your page:
<dataspa-inspector></dataspa-inspector>If you want to inject the inspector into an existing application, you can paste the following code into the devtools console:
el = document.createElement("script")
el.src = "https://cdn.jsdelivr.net/gh/dataSPA/dataSPA-inspector@latest/dataspa-inspector.bundled.js"
el.type = "module"
document.head.appendChild(el)
document.body.appendChild(document.createElement("dataspa-inspector"))