Vue-devtools: Devtools popup suddenly opening

[Christilut]

So I'm using the vue-youtube-embed plugin on one of my pages. When I navigate away from that page (back button or routerlink) then a Chrome dev tools popup appears. It has no content at all (DOM empty, sources empty). This happens every time and it will happily open more and more popups while the old ones are still open.

I disabled my Chrome extensions one by one and turned out that disabling vue dev tools stopped this behavior.

[posva]

Hey, can you boil down the error and provide a repro using this template or providing a simple HTML page? Also, please provide the detailed steps to reproduce the behaviour
Thanks!

[Christilut]

https://github.com/innovadis/vue-devtools-bug

Recreated the bug in the webpack template.

Steps:
npm install && npm run dev
Click "Youtube"
wait for video to load
press browser back button

it should open a devtools popup

[posva]

I tested with different setups on Chrome by disabling other extensions but nothing happens. It seems to be something with your setup. In any case it may be related to the youtube plugin, which btw should be installed in main.js. Tell me if you find the culprit 🙂

[Christilut]

I tried it in main.js but it has the same effect.

It seems to be a combination of dev tools and the youtube plugin but I have no idea what it could be. I figured it must be something in dev tools since it opens a new dev tools popup and I doubt youtube code would (accidentally) do that.

Anyways, bizarre bug and I'll update if I ever find out more about it

[kevinlaw91]

Searched google and found this issue. Was using React anyway. I believe this is bug/feature related to Chrome devtools. If you check the network tab there's one request called sw.js which is from https://www.youtube.com/sw.js. I think you need to have devtool open to reproduce the behavior.

[phoenixweiss]

+1 — I have the same bug and I totally confused. That happens absolutely random.

[alexanderpivanov]

Same thing here ....

[belgarad]

its very very annoying. i have that bug too...

[aldroydzito]

Had the same issue. If you get the embed link direct from YouTube, it comes with a encrypted-media property on the allow attribute.

<iframe ... allow="autoplay; encrypted-media"></iframe>

Just remove it.

Example:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay" allowfullscreen></iframe>

[salguerooo]

👍