Need help with hihat?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

Jam3
454 Stars 18 Forks MIT License 123 Commits 15 Opened issues

Description

:tophat: local Node/Browser development with Chrome DevTools

Services available

!
?

Need anything else?

Contributors list

No Data

hihat

hihat

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.


Update: Jan 2016

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.

Install

NPM

This project is currently best suited as a global install. Use

npm
to install it like so:
npm install hihat -g

Basic Examples

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

Usage:

hihat [entries] [options] -- [browserifyOptions]

Options:

  • --port
    (default
    9541
    )
    • the port to host the local server on
  • --host
    (default
    'localhost'
    )
    • the host for the local development server
  • --dir
    (default
    process.cwd()
    )
    • the root directory to serve static files from
  • --print
    • console.log
      and
      console.error
      will print to
      process.stdout
      and
      process.stderr
  • --quit
    • uncaught errors (like syntax) will cause the application to exit (useful for unit testing)
  • --frame
    (default
    '0,0,0,0'
    )
    • a comma-separated string for
      x,y,width,height
      window bounds
    • if only two numbers are passed, treated as
      width,height
    • if
      true
      is passed, uses the native default size
  • --no-devtool
    • do not open a DevTools window when running
  • --raw-output
    • do not silence Chromium debug logs on stdout/stderr
  • --node
    • enables Node integration (see node)
  • --no-electron-builtins
    • when
      --node
      is enabled, makes it behave more like Node by ignoring Electron builtins
  • --timeout
    (default 0)
    • a number, will close the process after this duration. Use 0 for no timeout
  • --exec
    • an alias for
      --print
      ,
      --no-devtool
      and
      --quit
      options. Useful for headless executions
  • --index=path/to/index.html
    • optional
      index.html
      file to override the default (see HTML index)
  • --serve
    • what to serve your bundle entry point as
    • defaults to file name if possible, otherwise 'bundle.js'
  • --browser-field
    • Can specify
      true
      or
      false
      to force enable/disable the
      "browser"
      field resolution, independently of the
      --node
      option

By default, browserify will use source maps. You can change this with

--no-debug
as a browserify option:
hihat test.js -- --no-debug

Node

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

screenshot

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.

Limitations

There are some known limitations with this approach.

  • Modules that use native addons (like node-canvas) are not supported.
  • Unlike a typical Node.js program, you will need to explicitly quit the application with
    window.close()
  • Since the source is run through browserify, the initial build time is slow and features like
    require.resolve
    are not yet supported. #21
  • Some features like
    process.stdin
    are not possible. #12
  • Since this runs Electron instead of a plain Node.js runtime, it may produce some unusual results

REPL

If 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:

repl

HTML index

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
:
  FOO
  


   

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.