Vue devtools

Similar to the React devtools issue with iframes Vue devtools doesn’t recognize the Storybooks components. Seems the solution is also similar using the __VUE_DEVTOOLS_GLOBAL_HOOK__, although I’m actually not sure if that’s up to date.

Anyhow, if finally Vue devtools is not compatible with Storybooks there should be a BIG warning about that.

[gapipro]

Current solution is to use this: https://github.com/vuejs/vue-devtools/blob/master/shells/electron/README.md

And inject script tag into iframe using https://storybook.js.org/configurations/add-custom-head-tags/

By doing so you get a standalone DevTools with working inspection.

[blocka]

the latest versions of storybook have a “pop out” mode, which basically does this for you

On Wed, Dec 4, 2019 at 11:30 AM Frédéric G. MARAND [e-mail] wrote:

In the meantime, zero-code/zero-conf hack: inspect the iframe in devtools, and right-click on “Open in new tab” on its “src” attribute, and you get the inspected component with the working devtools. Of course, you’ll need to do it again every time you want to inspect another component.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/storybookjs/storybook/issues/1708?email_source=notifications&email_token=AAAKROROGQQRKIKWA5ZMKY3QW7LLDA5CNFSM4DXZQUZKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEF5TRXI#issuecomment-561723613, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAKROU32Y6IUMWBS3Z36NTQW7LLDANCNFSM4DXZQUZA .