iframe compatibility (Context Menu): RFC

[matt-oconnell]

Currently the Vue Devtools do not recognize vue roots within iframes.

There is work being done on storybook to add Vue compatibility but it uses iframes to wrap the root. vue play uses iframes as well so the devtools only recognize the wrapper application (also built in Vue.) It is also incompatible with tools like jsfiddle.

I think a really cool feature would be to introduce a "context" menu like the one in Chrome Dev Tools:

With this, we could select the context in which we want the Devtools to run. The menu options would include the top level window.document and any iframes it detects one level deeper. When a context is selected, the Devtools will reinitialize. If vue is not discovered within the top-level context, it would default to the first iframe in which it finds a Vue root instance.

[nickmessing]

@matt-oconnell, hmm, nice idea, easy way would be to access all iframes from same domain name and check for vue there.

[kedrzu]

I am using an iframe for WYSIWYG purposes, therefore rendering content programatically with Vue.

Here's the deal: when I highlight components inside iframe, they are all shifted:

It seems, that vue tools are taking component coordinates relatively to iframe window, but render relatively to parent window.

[posva]

This is something I'm working on, the basics features are easy to add but there're some complications as well to think of

[gabaum10]

Any timetable for this? It makes the tools unusable on a webapp I'm working on.

[mgesmundo]

Ho @posva there is some workaround to enable today the devtools to work inside a workbook projet.
DevTools and Storybook are awesome!
All' the best.

[davidm-public]

vue-devtools work just fine with vue-play (https://github.com/vue-play/vue-play),
which uses iframes. So, presumably that's not the reason why vue-devtools won't work with storybook/vue.

[posva]

hey @mgesmundo, no there isn't yet. At the end, I couldn't advance more on this but others are working on it

[mgesmundo]

Hi @posva I found a simple workaround:

1. choose a story to play
2. reload the page
3. copy the iFrame address from the chrome dev tools
4. put this address into another browser tab (when story is named <badge/> inside a Badge group: http://localhost:6006/iframe.html?selectedKind=Badge&selectedStory=%3Cbadge%2F%3E)
5. Now the Vue DevTools works with the story.

What do you think about adding a button (or a shortcut) to perform this operation?

[tuomassalo]

The workaround above by @mgesmundo is not sufficient in a situation where the framed document must be framed to function properly, e.g. it uses something from window.top. The best solution would probably be something like what @matt-oconnell originally suggested in this issue.

[posva]

as @tuomassalo said it doesn't always work so adding a button for a workaround that doesn't always work is a bit too much 😄 . An md with the instructions to do it could be useful though

[onlinelaser]

+1 To add another use case where this is required - using Vue with any Google App Script development.

Now that google has released the clasp CLI tool (https://github.com/google/clasp) for app script development using vue and components in an app script environment has just got a million times better. However they sandbox all user javascript and as such vue-devtools doesn't work as it can't detect the user code iframe.

So this makes a widespread and popular production environment where vue-devtools could start working with this change.

[StefanFeederle]

+1 This also applies to Office 365/office.com addins that are executed in iframes.

[OriginalEXE]

I would also find this useful in browsers extensions development. I am using Vue in my browser extension and devtools are not recognizing it.

[fjswhl]

couldn't wait for the iframe compatibility +1

[onlinelaser]

Another Use case - possibly a new issue? possibly related?

Allow Vue dev tools to connect to CEF applications.

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework

For example, using Vue in a Adobe Photoshop Extension.
Chrome devtools connects as a remote debugger to the photoshop extension which runs an embedded HTML app. Vue devtools however don't start up.

[nothingismagick]

In a conversation with @brian-mann at Cypress, he wrote this:

React dev tools has a hook that enables you to point to the correct window. We use it in our own Cypress tests. Likely Vue has this same thing, but if not, could borrow from the same concept as react dev tools.

Vue isn't finding it because it's looking at window.top which is Cypress -> not your App. Instead you can just use your app itself (or cypress code) to point vue to window.top so that the extension finds it. It may be as simple as window.top.vue = window.vue but I'd have to dig in.

Whatever it is, I don't think you need anything in Cypress core to facilitate this. You have native access to everything in Cypress so you just have to look at how the vue dev tools works and then connect whatever it is from your app to the extension.

[glittle]

The @vue/devtools package worked with an Outlook IFrame.

Took me a while to understand the instructions... here's a quick recap:

1. Install the tool. Run anywhere on the dev computer: npm install -g @vue/devtools
2. Run the tool. Run anywhere on the dev computer: vue-devtools This opens a new program (A) that gives instructions. When the next step is completed, the Vue devtool view appears here.
3. Add the correct <script> tag (displayed in the program A just started) to the element of the main html file (outside of the vue root). Reload the web page.
4. In the program A, screen should now show the Vue DevTools. May need to click the "Refresh" icon in the top right corner to get it to see your content.

Thanks for the great application!

[areyes-ut]

A workaround for some cases with Cypress: Cypress allows you to click on the pseudo URL bar, and this opens a new tab with that URL (i.e. not in an iframe), and your Vue Dev Tools becomes usable in there. Obviously, if you need to work with the very specific DOM state seen in the running test, this probably won't help you, but if you just need to get at the current Vuex data, this should do the trick.

[humorHan]

@posva When can i use this? use vue-devtools in iframe

[posva]

FYI this might not be necessary anymore since we support remote devtools (https://github.com/vuejs/vue-devtools/blob/dev/packages/shell-electron/README.md)

[westhom]

If feasible, I think an iframe context dropdown inside the Vue browser addon is a much better user experience.

In my case, I have multiple Vue iframes so that means managing multiple port settings, and opening multiple vue-devtools instances. Additionally, you must keep vue-devtools updated manually with npm instead of relying on the browser's plugin system.

Also, vue-devtools has trouble detecting Vuex if the script connecting to it is not inside the root window. So I can only debug state in the top-most Vue instance.

Lastly, vue-devtools of course has to be running before your page loads, or else the script inside the page cannot download. This is a minor annoyance but I just wanted to point it out as another downside from a user perspective.

Vue-devtools is great for hard-to-reach contexts outside of a normal browser window, but I think if technically feasible, the context switcher in the addon is a big plus and removes some headaches from specific scenarios.

[fgilio]

The context switcher would be immensely useful for me and my team.

[suterma]

I have described the solution of @gabaum10 in on stackoverflow: https://stackoverflow.com/a/59823141/79485

[DinsmoreDesign]

Ran into this the other day - we've been trying to make the developer experience building extensions in our LOS (Loan Origination System) better, so our teams can work more efficiently. The way the (vendor) system works, is we build our Vue apps in our IDE, run the build and copy and paste the minified output into the system - it inserts the code into the DB and then anytime that "script" is called from the UI, it loads the JavaScript from the DB and dumps it into an iFrame with inlined script tags. Weird, I know.

The DX on this is terrible, it's a bunch of:

1. Change a line of code, put a ton of console logs in it
2. Build the app
3. Copy and paste it in
4. Run the script, check the console
5. Repeat 10,000 times until it's right

Well, the vendor released a new feature, where we can use external JS files, which turns out, also works with local files, so I can run Vue in development and see the app running in the system. This gets rid of all of the above steps and makes it so we can actually build these apps like a real Vue app should be... except for the fact that I can't use Vue DevTools, because the LOS injects the JS into an iFrame ;'(

As it stands, the new solution is a huge upgrade to what we've been doing previously, but being able to use the Vue DevTools would be a HUGE win, as well. I was hoping that figuring out how to proxy to the localhost instance, or adding the development build would allow this, but the iFrame seems to be the limitation.

I might play around with @suterma 's solution and see if I can get it working for us in the meantime by just injecting that localhost script into the iFrame on load. It's definitely not ideal, but it's a start. The unfortunate part for us is that, the system takes the current state of the local script and injects it into the iFrame, so Hot Module Reloading doesn't work. Still, we're pretty excited that with a few workarounds we don't have to resort to a bunch of dumb hacks.

[JessicaSachs]

This is an issue for all methods of using Vue Devtools. I created a write up + reproduction for Vue 2.x, Vue 3.x, and Vue External devtools.

Main repo
https://github.com/JessicaSachs/vue-iframe-devtool-issue

Branches

• 2.x
• 3.x
• external (the @vue/devtool electron app)

Should we split out this issue into the version-specific bugs? IIRC the 3.x devtools are a major rewrite.

[sethidden]

On beta 13 in Firefox I don't get the option to switch contexts to storybook iframe.
Repro: https://github.com/3nuc/vue-devtools-issue-353 (this is just vue cli vue 2 default template + vue add storybook)
Repro script

git clone https://github.com/3nuc/vue-devtools-issue-353
cd vue-devtools-issue-353
yarn install && yarn storybook:serve

When on http://localhost:6006/?path=/story/button--with-text (view that uses iframe and doesn't show devtools, but since the fix for iframes is in beta 13 it should show the vue app in iframe):

But when I open iframe in new tab:

it's ok (this works even with Vue 2 devtools)

[tpodom]

We just tried out the 6.0.0-beta14 with Cypress component testing and the problem we're seeing is that the VUE_DEVTOOLS_GLOBAL_HOOK exists on the app iframe but when you click on a spec to run it, it looks like the iframe is reloaded or recreated and then when the code is actually running VUE_DEVTOOLS_GLOBAL_HOOK is undefined.

[shshaw]

Worth noting that with the Vue Devtools beta extension installed, there's a lot of issues with Content Security Policy and Next.js (yes, Next.js, the React framework) apps. Might want to include an option to prevent the iframe injection.

[wallslide]

I setup the stand alone dev tools to work with cypress like @gabaum10 mentioned. In my case, I'm using cypress's recent vue component testing capabilities. I added this to my test code:

const vuejsDevToolsScript = document.createElement('script')
  vuejsDevToolsScript.setAttribute('src', 'http://localhost:8098')

  if (document.head) {
    document.head.appendChild(vuejsDevToolsScript)
  }

And the dev tools were connecting, but no vue components were being listed in the dev tools. Eventually I stumbled upon needing this code to get everything to work:

import Vue from 'vue'
// other imports...
Vue.config.devtools = true

Once I set the devtools property to true, everything started working for me.

[pm-zr]

@wallslide where did you put the vue devtools setting? I am also having that issue. Neither including that in the supportFile or the cypress test seems to work for me.

[wallslide]

@wallslide where did you put the vue devtools setting? I am also having that issue. Neither including that in the supportFile or the cypress test seems to work for me.

In my cypress/support/index.js file I have

import { setup } from './setup'

before(function() {
  setup()
})

And in that setup file I have:

export function setup() {
   // various setup stuff....

    const vuejsDevToolsScript = document.createElement('script')
    vuejsDevToolsScript.setAttribute('src', 'http://localhost:8098')

    if (document.head) {
      document.head.appendChild(vuejsDevToolsScript)
    }
}

[pm-zr]

@wallslide thanks for the fast reply. That seems to get me to the same spot that I was in. I think perhaps the devtools config setting is the issue, where are you setting that? If that's not the issue then it must be something bigger like package versions or specific setup.

[jcupps]

@pmourer-zaneray I was seeing the same thing when I had Vue.config.devtools = true in the cypress/support/index.js file, but then I tried moving it to my .spec file where I was also importing Vue and suddenly it worked. It seems that something is switching it off in between the execution of support/index.js and the spec.

EDIT: Moving Vue.config.devtools = true inside the before callback seems to work.

[pm-zr]

Unfortunately, still didn't work for me -

Vue 2.5.18 / devtools 6.0.12 / node 12.22.7

I am not importing vue anywhere already, not sure if that would be related.

[magersoft]

Didn't work for me on storybook/vue3, devtools v6.2.1

[JasonLandbridge]

I found a pretty simple work-around!

So the trick is to install Vue dev tools natively in the browser, that is used for testing, and then open the tested url in a new tab.
Installing extensions is persistent, see: https://docs.cypress.io/guides/guides/launching-browsers#Cypress-Profile, so you only need to do this once.

The following example is for Chrome, or chromium based browsers:

1. Temp install CRX Extractor/Downloader because we need an unpacked version of Vue Dev Tools.
2. Go to Vue.js Dev Tools and click on the CRX Extractor/Downloader extension, choose "Download Zip" and unpack the zip somewhere in a folder.
3. Start the Cypress browser and go to extensions
4. Toggle "Developer mode" and click on "Load Unpacked"
5. Select the unpacked Vue Dev Tools and install
6. No go to the Cypress broweser tab and click on the url
7. This new tab has Vue Dev Tools working and maintains the state of the e2e test,