Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
hihat
Advanced tools
Readme
local Node/Browser development with Chrome DevTools
Runs a source file in a Chrome DevTools process. Saving the file will reload the tab.
This is useful for locally unit testing browser code with the full range of Web APIs (WebGL, WebAudio, etc). It provides access to profiling, debugger statements, network requests, and so forth.
It can also be used to develop typical Node projects, or as a generic Node REPL. For example, instead of using nodemon during development, you can use hihat
to make use of a debugger.
Since it provides Browser and Node APIs, it can also be used for some simple CLI tooling, like saving a Canvas2D to a PNG file.
Under the hood, this uses electron, browserify and watchify.
A lot of new efforts are going toward devtool, a very similar project but without browserify
and watchify
under the hood. In many ways it replaces hihat
, but not all. Both tools will continue to exist, although devtool
will probably receive more regular enhancements and maintenance.
This project is currently best suited as a global install. Use npm
to install it like so:
npm install hihat -g
Simplest case is just to run hihat
on any source file that can be browserified (Node/CommonJS).
hihat index.js
Any options after --
will be passed to browserify. For example:
# transpile ES6 files
hihat tests/*.js -- --transform babelify
You can use --print
to redirect console
logging into your terminal:
hihat test.js --print | tap-spec
The process will stay open until you call window.close()
from the client code. Also see the --quit
and --timeout
options in Usage.
Usage:
hihat [entries] [options] -- [browserifyOptions]
Options:
--port
(default 9541
)
--host
(default 'localhost'
)
--dir
(default process.cwd()
)
--print
console.log
and console.error
will print to process.stdout
and process.stderr
--quit
--frame
(default '0,0,0,0'
)
x,y,width,height
window boundswidth,height
true
is passed, uses the native default size--no-devtool
--raw-output
--node
--no-electron-builtins
--node
is enabled, makes it behave more like Node by ignoring Electron builtins--timeout
(default 0)
--exec
--print
, --no-devtool
and --quit
options. Useful for headless executions--index=path/to/index.html
index.html
file to override the default (see HTML index)--serve
--browser-field
true
or false
to force enable/disable the "browser"
field resolution, independently of the --node
optionBy default, browserify will use source maps. You can change this with --no-debug
as a browserify option:
hihat test.js -- --no-debug
Note: Users seeking the Node.js features may be more interested in devtool – very similar to
hihat
but better architected to deal with large Node applications.
hihat can also be used for developing simple Node modules. The --node
flag will disable the "browser"
field resolution and use actual Node modules for process
, Buffer
, "os"
, etc. It also exposes require
statement outside of the bundle, so you can use it in the Chrome Console while developing.
For example, foobar.js
var fs = require('fs')
fs.readdir(process.cwd(), function (err, files) {
if (err) throw err
debugger
console.log(files)
})
Now we can run the following on our file:
hihat foobar.js --node
By default, enabling --node
will also enable the Electron builtins. You can pass --no-electron-builtins
to disable Electron modules and make the source behave more like Node.
There are some known limitations with this approach.
window.close()
require.resolve
are not yet supported. #21process.stdin
are not possible. #12If you specify hihat
without any entry files, it will not invoke browserify or watchify. For example, you can use this as a generic alternative to the Node REPL, but with better debugging and various Web APIs.
hihat --node
Example:
By default, hihat will serve a simple HTML index.html
file. You can use --index
for an alternative. The path is relative to your current working directory.
hihat test.js --index=foo.html
And the following foo.html
:
<!doctype html>
<head>
<title>FOO</title>
<meta charset="utf-8">
</head>
<body>
<script src="test.js"></script>
</body>
</html>
You can also specify a --serve
option to force a certain entry point for your bundle. For example:
hihat test.js --index=foo.html --serve=bundle.js
With this, your script tag would be:
<script src="bundle.js"></script>
In most cases, --serve
will default to the file name of your entry file. In complex cases, such as absolute paths or '.'
, it may default to 'bundle.js'
.
Some more advanced uses of hihat.
You can use the browserify plugin tap-dev-tool to pretty-print TAP output in the console.
# install it locally
npm install tap-dev-tool --save-dev
# now run it as a plugin
hihat test.js -- -p tap-dev-tool
Files that use tap or tape will be logged like so:
stdout
Using the clipboard
module in Electron, we can write it to stdout like so.
paste.js
:
var clipboard = require('clipboard')
process.stdout.write(clipboard.readText() + '\n')
window.close()
Then run:
hihat paste.js --node --exec > clipboard.txt
This will write the clipboard contents to a new file, clipboard.txt
.
Here is an example which writes a Canvas2D element into a new PNG image, using electron-canvas-to-buffer.
render.js
var toBuffer = require('electron-canvas-to-buffer')
var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
var width = canvas.width
var height = canvas.height
var gradient = context.createLinearGradient(0, 0, width, 0)
gradient.addColorStop(0, '#f39821')
gradient.addColorStop(1, '#f321b0')
context.fillStyle = gradient
context.fillRect(0, 0, width, height)
process.stdout.write(toBuffer(canvas, 'image/png'))
window.close()
Now run the following:
hihat render.js --node --exec > image.png
And the result of image.png
will be:
MIT, see LICENSE.md for details.
FAQs
local Node/Browser development with Chrome DevTools
The npm package hihat receives a total of 16 weekly downloads. As such, hihat popularity was classified as not popular.
We found that hihat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.