Regular Developer Tools is a Chrome Extension that allows real-time inspection of Regular components.

Regular Developer Tools is under active development, any feedback is welcome 👏

Some GIFs to show you how Regular Devtools works. You can:

View component tree structure, and select a component to get its data, computed data, filters and directives

Data changes are synchronized in a bi-direction way

Select a component, and inspect its instance by evaluating `$r` in the console

Inspecting mode allow user to select a DOM node and view its corresponding component in Devtools Panel

New in v0.9
Now you can enter the brand new inspecting mode by the hitting the "target" button in navbar.

• Inspecting Regular components hierarchy tree in element view.
• Inspecting data, filters, directives, animations of selected component in sidebar.
• Data changes made with Regular components will be reflected in both element view and sidebar in real-time.
• Sidebar data is editable, changes will be applied to the corresponding component in page.
• Searching component in element view.
• Included contents will be annotated with #inc.
• Click inspect button in the sidebar to inspect DOM node of selected component in Elements tab.
• Inspecting mode allow user to inspect DOM node, and the corresponding component will be focused in Developer Tool.
• Pro Tip One: When inspecting DOM node in Elements tab, switch to Regular tab, if the DOM node you are inspecting is rendered from a Regular component, the Regular Devtools will automatically focus on that component. It's like the reverse version of the last feature.
• Pro Tip Two: When selecting component in element view, the component instance is available as $r in your console.

Require regularjs v0.5.0+.

Install from Chrome Web Store

• Step 1 Clone this repo.
• Step 2 run npm i && npm run build in command line, you will get dist folder in current working directory
• Step 3 Open Google Chrome and navigate to chrome://extensions/.
• Step 4 Check Developement mode checkbox in right corner.
• Step 5 Click Load unpacked extension and load the dist folder.

# Install dependencies
$ npm install
# Build and watch file changes
$ npm run watch
# Build for production
$ npm run build

CHANGELOG

MIT