Hydragon

Extensible multi-platform debugger frontend.

Development

Prerequisites

• Node.js 6.1.x
• NPM 3.x.x
• Bower - npm install bower -g
• Grunt - npm install grunt-cli -g

Setup

After cloning this repository run the following commands:

npm install
npm run build:native-modules

Note that the first time you rebuild the native modules it may take a few minutes (and there won't be any visible indicator that anything is actually happening) because the task is busy downloading the headers and libs needed to rebuild the modules. If anything actually goes wrong during this process errors will be displayed in the console.

Once the native modules have been rebuilt you can build the app itself by executing npm run build:full from the root directory, and once built the app can be launched with npm start or npm run electron.

NPM Scripts

• Launch the Hydragon app:

  npm start

  OR

  npm run electron

• Compile TypeScript source files in app/src:

  npm run build -s

• Run the clean task followed by the build:full task:

  npm run build:clean -s

• Compile TypeScrypt source files, preprocess html templates, vulcanize app/bower_components, and copy custom element templates to app/lib:

  npm run build:full -s

  This task should really only be run on a fresh checkout or after the clean task, otherwise it's probably sufficient to run one of the finer grained tasks.

• Rebuild all native Node module in app/node_modules dir:

  npm run build:native-modules -s

  See also Native NodeJS modules.

• Compile TypeScript source files in tasks dir to JavaScript:

  npm run build:tasks -s

  This task is only used when debugging the tasks.

• Build tests:

  npm run build:test -s

• Delete output generated by the build:full task:

  npm run clean

• Launch the Hydragon app with main process debugging enabled:

  npm run electron:debug

  See also Debugging JavaScript in the main process.

• Run tslint on the TypeScript source files:

  npm run lint -s

• Launch node-inspector for debugging the main process of the Hydragon app:

  npm run node-inspector

  See also Debugging JavaScript in the main process.

• Run the tests:

  npm test -s

  OR with debugging of the main process enabled:

  npm run test:debug -s

• Bundle the contents of app/bower_components:

  npm run vulcanize

  See also Custom Elements.

Directory Layout

• app
  • bower_components - Bower components that are used at runtime by the application.
  • lib - JavaScript files generated by the build process.
  • node_modules - Node modules that are used at runtime by the application.
  • src - Application source.
  • static - Various files that will be loaded by the application at runtime, all files in this directory should be ready to use at runtime (if a file needs any kind of pre-processing it doesn't belong in here).
  • tests - Test harness.
  • typings - TypeScript type definitions for modules in node_modules.
• tasks - Tasks used to build, run, and test the application.
• node_modules - Node modules used by the build system.
• typings - TypeScript type definitions for modules in node_modules.

Debugging JavaScript in the main process

node-inspector can be used to debug JavaScript code running in the main Electron process by following these steps:

1. Start node-inspector by running npm run node-inspector from the project root directory.
2. Start Hydragon by running npm run electron:debug.
3. Open the URL that node-inspector prints out in Chrome, e.g. http://127.0.0.1:8080/?ws=127.0.0.1:8080&port=5858

Native NodeJS modules

Native NodeJS modules used during the build must be built specifically for the NodeJS version used by the build system and the various development packages. However, native NodeJS modules used by Hydragon or any of its dependencies must be built with the same NodeJS SDK version that's integrated into the Electron runtime.

To that end any NodeJS modules used by the build system must be referenced in the package.json file located in this directory, while any NodeJS modules used by Hydragon at runtime must be referenced in the package.json found in the app directory. More background info can be found in the Electron docs on native NodeJS modules.

To download the NodeJS SDK used to build Electron and rebuild any native modules in app/node_modules execute the following command in the terminal:

npm run build:native-modules

Custom Elements

There are a number of build tasks associated with the custom elements in app/src/renderer-process/elements, during development you may need to run some or all of them depending on what which files you're modifying. These tasks can be run in any order.

• npm run vulcanize will bundle up the dependencies in app/bower_components, this needs to be rerun whenever the contents of app/bower_components change.
• npm run preprocess will preprocess some of the element .html files.
• grunt sync will copy all the element .html files to the app/lib directory, this is where the app will load them from at runtime.
• npm run build:renderer will compile all the element .ts files and place the output in the app/lib directory.

DevTools Extensions

Devtron

To install the Devtron DevTools extension launch Hydragon using npm start, then open the Electron DevTools console and run require('devtron').install(). The Devtron extension will now be loaded every time the application is launched, to uninstall the extension run require('devtron').uninstall().

React

To install the React DevTools extension launch Hydragon using npm start, then open the Electron DevTools console and run require('electron-react-devtools').install(). The React extension will now be loaded every time the application is launched, to uninstall the extension run require('electron-react-devtools').uninstall().

License

MIT