ember-template-inspector 
An ember add-on which opens the template file in the code editor while inspecting an element. To open the file, Press ALT(Option) + SHIFT and Click on the element.
Demo Video
How this works ?
File locations are added to the html elements during development build and on clicking the element, an api is initiated to the express server which opens the file. This package adds the dev server url to the index.html.
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Supported editors
| Value | Editor | Linux | Windows | OSX |
|---|---|---|---|---|
appcode |
AppCode | ✓ | ||
atom |
Atom | ✓ | ✓ | ✓ |
atom-beta |
Atom Beta | ✓ | ||
brackets |
Brackets | ✓ | ✓ | ✓ |
clion |
Clion | ✓ | ✓ | |
code |
Visual Studio Code | ✓ | ✓ | ✓ |
code-insiders |
Visual Studio Code Insiders | ✓ | ✓ | ✓ |
emacs |
Emacs | ✓ | ||
idea |
IDEA | ✓ | ✓ | ✓ |
notepad++ |
Notepad++ | ✓ | ||
pycharm |
PyCharm | ✓ | ✓ | ✓ |
phpstorm |
PhpStorm | ✓ | ✓ | ✓ |
rubymine |
RubyMine | ✓ | ✓ | ✓ |
sublime |
Sublime Text | ✓ | ✓ | ✓ |
vim |
Vim | ✓ | ||
visualstudio |
Visual Studio | ✓ | ||
webstorm |
WebStorm | ✓ | ✓ | ✓ |
Usage
Create a file 'template-inspectorrc.json' in root project folder with the following config to use ember-template-inspector
template-inspectorrc.json (Please add this to your .gitignore file as this is a developer preference)
{
editor: any preferred editor mentioned above, this addon will automatically open a running editor if this is not specified,
enabled: true | false (true by default)
}
Installation
ember install ember-template-inspector
Development
git clone <repository-url>this repositorycd ember-template-inspectoryarn
Works with
- Ember.js v3.12 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
Contributing
See the Contributing guide for details.
License
This project is licensed under the MIT License.