Description
What problem does this feature solve?
I'm developing an all-in-one editor for webdevs that runs inside Chrome DevTools.
Just by replacing npm start with [name-not-finalized] start, users can have a fully featured text editor right inside Chrome DevTools shell, automatically pointing at their project directory.
It comes with DOM inspector, where you pick an element and it'll literally take you to file:line:col where that element was defined. So you don't have to look through files to figure out where that button below the header is coming from. Useful when a new dev joins a project or you're revisiting your work after a very long time.
▶ Watch 30 sec demo w/ a React project
And of course, it also works with Vue projects, just as awesome.
▶ Watch 20 sec demo w/ a Vue project
Above demos were shot using locally tinkered compilers (just not clean enough to be a PR)
The goal is to deliver the ultimate developer experience ever. Other features are in development as we speak, like CSS QuickEditing, built-in image editor and a SVG editor so devs don't have to fire up Illustrator or Photoshop to make minor tweaks to their stuff.
The only hurdle in me releasing the app is getting external players to participate in revolutionizing how we write web.
So to wrap up I have only two requests:
-
Please have the template compilers add metadata to each tag (either as data attribute, or property on DOM node itself), that contains path to
*.vuefile (can be relative to project root),line:col/offset where the tag opens and lastline:col/offset where the tag closes. -
Please star this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=811036
What does the proposed API look like?
Something like this:
console.log(someElement.__vue__._debugSource)
// > { file: 'src/components/Header.vue', line: 12, col: 4, lineEnd: 16, col: 8 }
// or
// > { file: 'src/components/Header.vue', start: 241, end: 352 }