vuejs / vue

This is the repo for Vue 2. For Vue 3, go to https://github.com/vuejs/core
http://v2.vuejs.org
MIT License
207.69k stars 33.67k forks source link

Support DOM element to source mappings for VS Code's Browser preview #10093

Open auchenberg opened 5 years ago

auchenberg commented 5 years ago

What problem does this feature solve?

Hi 👋

I'm the author of https://github.com/auchenberg/vscode-browser-preview/, which is an extension for VS Code that allows users to preview web content inside the editor.

Browser Preview also supports "inspect component" which enables people to select a DOM element and go directly to the component source inside the editor.

ezgif com-optimize

Details: https://mobile.twitter.com/auchenberg/status/1133178573773164545

I'd love to be able to support Vuejs for this feature, and I'm wondering if Vue already exposes element to source mappings when running in development mode?

/k

What does the proposed API look like?

Browser Preview is using https://github.com/auchenberg/element-to-source to do the mapping.

psimyn commented 5 years ago

Dupe of https://github.com/vuejs/vue/issues/8034 ?

The outputSourceRange compiler option adds start/end tags to errors (added in https://github.com/vuejs/vue/pull/7127 mentioned on that issue)