Regular Developer Tools

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 👏

Overview

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

Features

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.

Prerequisition

Require regularjs v0.5.0+.

Installation

Install from Chrome Web Store

Manual Installation

• 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.

Development

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

Changelog

CHANGELOG

License

MIT