Chrome Developer Tools Addon for Local By Flywheel

Description

Add this addon to Local By Flywheel to access the Chrome Developer Tools while Local is open. This is a useful tool when for developing addons for Local. Also includes a function reload() that can be run in the Developer Tools Console to reload the application.

Quick Start

1. Clone this repo: git clone git@github.com:tpkemme/local-addon-devtools.git local-addon-devtools && cd local-addon-devtools
2. Run npm install
3. Run initial build: npm run-script build
4. Link into Local's addon directory: ln -s "$(pwd)" ~/Library/Application\ Support/Local\ by\ Flywheel/addons
5. Restart Local and activate addon from Settings > Addons

Developing

• To automatically transpile your JS while developing, just start watch task: npm run-script watch.
• The only thing this starter addon currently does is open dev tools in Local and add a reload() function to the window object, type reload() into the dev tools console after you've saved/transpiled to see your changes.

Installing Dev Dependencies

npm install

Folder Structure

All files in /src will be transpiled to /lib using Babel. Anything in /lib will be overwritten.

Transpiling

npm run-script build or npm run-script watch to transpile when source files are saved

Babel, transpiling, ES6, Node.js, what?

Not familiar with some or any of these terms? Here are a few resources to get you up to speed.

• Node.js
  • The Art of Node
• Babel
  • Babel Introduction
  • Source-to-source compiler (Wikipedia)
• ES6/ES2015
  • Learn ES2015
  • JavaScript — Just another introduction to ES6

Dev Dependencies

• babel: Turn ES6 code into readable vanilla ES5 with source maps
• babel-cli: Babel command line.
• babel-preset-es2015: Babel preset for all es2015 plugins.
• babel-preset-react: Babel preset for all React plugins.
• babel-preset-stage-0: Babel preset for stage 0 plugins

License

MIT