devtools icon indicating copy to clipboard operation
devtools copied to clipboard

Published 20 hours ago • verified publisher icon vuejs

Conflict with React Dev Tools

Open clicktodev opened this issue 3 years ago • 4 comments

Version

6.1.3

Browser and OS info

Chrome 99 / Windows 10

Steps to reproduce

Haven't had time to test confirm this yet but I'm fairly certain that there's a conflict between React Dev Tools and Vue dev tools, I noticed this after installing vue dev tools a few days ago.

What is expected?

React dev tools should open up and function normally.

What is actually happening?

When clicking on the react devtools chrome extension: "This is a restricted browser page. React devtools cannot access this page." Also when inspecting the pages of the chrome extension, the tabs components and profiler are NOT shown.

clicktodev avatar Mar 21 '22 03:03 clicktodev

Closing this for now until I'm completely sure.

clicktodev avatar Mar 21 '22 18:03 clicktodev

Observed something similar. Ever since we introduced React in our Vue codebase that showed VueJS devtools normally, it shows this

Vue.js is detected on this page. Devtools inspection is not available because it's in production mode or explicitly disabled by the author.

ninofiliu avatar Sep 05 '22 14:09 ninofiliu

The behavior seemed inconsistent to me, doesn't always happen but I'm reopening this for further investigation.

clicktodev avatar Sep 06 '22 09:09 clicktodev

Over here at @ToucanToco we found out that explicitly enabling vue devtools remove the error mentionned above

if (isDevEnvironment()) Vue.config.devtools = true;

ninofiliu avatar Sep 06 '22 13:09 ninofiliu