Ember-template-inspector NPM

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)
}