hihat - :tophat: local Node/Browser development with Chrome DevTools

  •        22

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.

https://github.com/Jam3/hihat

Dependencies:

browserify : ^11.0.0
concat-stream : ^1.4.8
debounce : ^1.0.0
duplexer2 : 0.0.2
ecstatic : ^0.8.0
electron-prebuilt : ^0.36.3
events : ^1.0.2
find-node-modules : ^1.0.1
getport : ^0.1.0
globby : ~3.0.1
is-dom : ^1.0.5
lodash.defaults : ^3.1.2
minimist : ^1.1.1
normalize-file-to-url-path : ^1.0.0
object-assign : ^3.0.0
once : ^1.3.2
path-is-absolute : ^1.0.0
process : ^0.11.1
routes-router : ^4.1.2
serializerr : ^1.0.1
simple-html-index : ^1.0.1
sliced : ^1.0.1
split2 : ^1.0.0
through2 : ^0.6.5
watchify : ^3.3.0

Tags
Implementation
License
Platform

   




Related Projects

awesome-live-reloading - A curated collection of live-reloading / hot-reloading / watch-reloading tools for different languages and frameworks

  •    

A curated collection of live-reloading tools and libraries associated with different languages and frameworks. "Live reloading" refers to tools that run your compile/build step as you write code. This makes it faster for you to test your work as you write code. This is especially helpful for web development.

node-dev - Zero-conf Node.js reloading

  •    Javascript

Node-dev is a development tool for Node.js that automatically restarts the node process when a file is modified. In contrast to tools like supervisor or nodemon it doesn't scan the filesystem for files to be watched. Instead it hooks into Node's require() function to watch only the files that have been actually required.

budo - :clapper: a dev server for rapid prototyping

  •    Javascript

This is a browserify development server focused on incremental reloading, LiveReload integration (including CSS injection) and other high-level features for rapid prototyping.Then open http://localhost:9966/ to see the content in action.

taiko - A node.js library to automate chrome/chromium browser

  •    Javascript

Taiko is a free and open source browser automation tool built by the team behind Gauge from ThoughtWorks. Taiko is a node library with a clear and concise API to automate the chrome browser. Tests written in Taiko are highly readable and maintainable. Taiko’s smart selectors make tests reliable by adapting to changes in the structure of your web application. With Taiko there’s no need for id/css/xpath selectors or adding explicit waits (for XHR requests) in test scripts.


babel-watch - Reload your babel-node app on JS source file changes. And do it fast.

  •    Javascript

Reload your babel-node app on JS source file changes. And do it fast. If you're tired of using babel-node together with nodemon (or similar solution). The reason why the aforementioned setup performs so badly is the startup time of babel-node itself. babel-watch only starts babel in the "master" process where it also starts the file watcher. The transpilation is performed in that process too. On file-watcher events, it spawns a pure node process and passes transpiled code from the parent process together with the source maps. This allows us to avoid loading babel and all its deps every time we restart the JS script/app.

katon - (use hotel instead)

  •    Javascript

Note except if you need a particular feature in katon, please use hotel. Hotel is cross-platform and doesn't require admin privileges to be installed.katon is a development tool that makes dev servers accessible on beautiful local .ka domains. It also autostarts/stops them for you.

redux-devtools - DevTools for Redux with hot reloading, action replay, and customizable UI

  •    Javascript

Note that the implemention in this repository is different from Redux DevTools Extension. Please refer to the latter for browser extension. Redux DevTools is a development time package that provides power-ups for your Redux development workflow. Be careful to strip its code in production (see walkthrough for instructions)! To use Redux DevTools, you need to choose a “monitor”—a React component that will serve as a UI for the DevTools. Different tasks and workflows require different UIs, so Redux DevTools is built to be flexible in this regard. We recommend using LogMonitor for inspecting the state and time travel, and wrap it in a DockMonitor to quickly move it across the screen. That said, when you’re comfortable rolling up your own setup, feel free to do this, and share it with us.

air - ☁️ Live reload for Go apps

  •    Go

Air is yet another live-reloading command line utility for Go applications in development. Just air in your project root directory, leave it alone, and focus on your code. NOTE: This tool has nothing to do with hot-deploy for production.

webpack-hot-middleware - Webpack hot reloading you can attach to your own server

  •    Javascript

Webpack hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server. This module is only concerned with the mechanisms to connect a browser client to a webpack server & receive updates. It will subscribe to changes from the server and execute those changes using webpack's HMR API. Actually making your application capable of using hot reloading to make seamless changes is out of scope, and usually handled by another library.

webpack-hot-middleware - Webpack hot reloading you can attach to your own server

  •    Javascript

Webpack hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server. This module is only concerned with the mechanisms to connect a browser client to a webpack server & receive updates. It will subscribe to changes from the server and execute those changes using webpack's HMR API. Actually making your application capable of using hot reloading to make seamless changes is out of scope, and usually handled by another library.

webpack-dev-server - Serves a webpack app. Updates the browser on changes.

  •    Javascript

Use webpack with a development server that provides live reloading. This should be used for development only.It uses webpack-dev-middleware under the hood, which provides fast in-memory access to the webpack assets.

react-hot-loader - Tweak React components in real time.

  •    Javascript

Watch Dan Abramov's talk on Hot Reloading with Time Travel. Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal.

redux-devtools-log-monitor - The default monitor for Redux DevTools with a tree view

  •    Javascript

The default monitor for Redux DevTools with a tree view. It shows a log of states and actions, and lets you change their history. Then you can render <DevTools> to any place inside app or even into a separate popup window.

vscode-live-server - Launch a development local Server with live reload feature for static & dynamic pages

  •    TypeScript

Launch a local development server with live reload feature for static & dynamic pages. Open a project and click to Go Live from the status bar to turn the server on/off.

react-transform-hmr - A React Transform that enables hot reloading React classes using Hot Module Replacement API

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. A React Transform that enables hot reloading React classes using Hot Module Replacement API. Hot module replacement is supported natively by Webpack and available in Browserify with browserify-hmr.

react-blessed-hot-motion - A console app demo using React for rendering, animation, and hot reloading

  •    Javascript

This is a demo of a custom React Blessed console renderer (warning: very early preview, many things don’t work) using React Motion for animation, and Webpack for listening to code hot updates. It is based on @jlongster’s amazing Backend with Webpack example that shows how to integrate hot reloading into a Node (server) app.

crossbuilder - Building web, Electron, Cordova and Chrome apps, and cross-browser extensions with React, Redux and Webpack

  •    Javascript

Building web, Electron, Cordova and Chrome apps, and cross-browser extensions that use Redux actions for messaging. Redux states are synced between background, injected page, app window, extension popup and badge.

react-transform-boilerplate - A new Webpack boilerplate with hot reloading React components, and error handling on module and component level

  •    Javascript

React Hot Loader 3 is on the horizon, and you can try it today (boilerplate branch, upgrade example). It fixes some long-standing issues with both React Hot Loader and React Transform, and is intended as a replacement for both. The docs are not there yet, but they will be added before the final release. For now, this commit is a good reference. This is highly experimental tech. If you’re enthusiastic about hot reloading, by all means, give it a try, but don’t bet your project on it. Either of the technologies it relies upon may change drastically or get deprecated any day. You’ve been warned 😉 .

boot-react - A starter application with spring boot and react

  •    Javascript

Be more productive with this simple project that uses the spring dev tools and react transform for hot reloading. Everything: backend, frontend and styles will be hot reloaded automatically.