A browser extension for debugging hyperscript
hdb.js is an existing way to debug hyperscripts but it has the following limitations:
- The hdb.js script must be loaded on the page. It would be nice to have an easy way to debug any site that has hyperscript without needing to load a custom script
- currently if you embed any
breakpoints in your code and don't loadhdb.jsyour script will crash. If you have this extension installed it will not crash the page. - It behaves somewhat similarly to the builtin javascript debugger; the breakpoint will
only break if you have the
_hyperscripttab open in the dev console
The extension isn't in any app stores yet, so you'll need to configure your browser to allow unpacked extensions to run.
- go to
about:addonsin the url bar - click the gear icon, then
Debug add-ons - click
Load Temporary Add-on - browse to this directory (
_hyperscript/hdb-devtools) and open themanifest.jsonfile
-
go to
chrome://extensions -
toggle the
Developer modeswitch to the on position -
click
Load Unpacked -
browse to and select this directory (
_hyperscript/hdb-devtools/) -
you should see
hyperscript-debuggerin your extension list. -
you can further confirm this is installed by opening dev console on a web page and verifying there is now a
_hyperscripttab.