search

microsoft / vscode-edge-devtools

A VSCode extension that allows you to use browser devtools from within the editor. The devtools will connect to an instance of Microsoft Edge giving you the ability to alter CSS styling, perform diagnostics, and debugging. Get it now at http://aka.ms/devtools-for-code
https://docs.microsoft.com/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension
MIT License
744 stars 249 forks source link

Support for DevTools extensions like React and Vue in vscode-edge-devtools? #1039

Open mengxiangyue opened 2 years ago

mengxiangyue commented 2 years ago

I want to use React devtools in vscode together with vscode-edge-devtools, but i don't find the way, could you help give some suggestions, thanks.

codepo8 commented 2 years ago

Right now there is no way to use extensions within the extension. We're looking into ways to make that happen and would love to know what exactly you use from the React DevTools that we could add to ours. We're already supporting sourcemapped files as you can see in Issue 965. Could you give that a go?

mengxiangyue commented 2 years ago

@codepo8 thanks your response, I want to use the React devtools Components panel function like this, hope I can use this in edge extension soon.

image
captainbrosset commented 2 years ago

Having your React component tree directly within VS Code would, indeed, be pretty cool! @codepo8 already mentioned that the team is looking into ways to make this happen. But another way would be for the Elements panel of DevTools to do this natively too.

Chris, if this is already tracked elsewhere, should we close this issue as a duplicate?

TechWatching commented 1 year ago

I have the same question for Vuejs dev tools. There are many features in Vue DevTools that just can't be found in vscode-edge-devtools (not only the component tree but also vuex and pinia stores, routing, i18n, ...). So the ability to add extension to vscode-edge-devtools is a must have.

codepo8 commented 1 year ago

@TechWatching we hear you, and will put that on the backlog.

stephanjohnson commented 1 year ago

I would like to add my +1 for vuejs dev tooling support

mabuelhagag commented 1 year ago

+1

eachann1024 commented 1 year ago

vue +1

r1zwan-alam commented 1 year ago

react dev tool +1

gaievskyi commented 1 year ago

React devtools +1

dutchigor commented 1 year ago

+1 for react devtools

vapouryh commented 11 months ago

+1 for react dev tools

v-v-belikov commented 10 months ago

+1 for react dev tools

eladcandroid commented 10 months ago

Any news?

What about using userDataDir with the current user profile? I tried and it didn't help

captainbrosset commented 10 months ago

Sorry, we don't have any news to share on this right now. Competing priorities mean that this particular issue isn't currently at the top of our list. We'll make sure to update this thread if anything changes.

lopugit commented 2 months ago

Yes please this would be awesome :(

Can't you just attach to a standard install of edge browser with your user profile? :O

captainbrosset commented 2 months ago

I don't think finding the profile and launching the instance of Edge based on it is the challenge here. I think embedding a DevTools extension's panel into VSCode is what needs to be solved.

ivbrajkovic commented 2 months ago

+1 for react dev tools

yume-chan commented 1 month ago

I'm trying to add React DevTools to my custom Chrome DevTools project, sadly, it won't work, unless both of Chrome DevTools and your React project are modified.

React requires its DevTools to initialize before loading any React renderer (react-dom or react-native). React DevTools extension uses a content script to do that. Without the extension, you need to do that in each of your projects: https://github.com/facebook/react/tree/main/packages/react-devtools#usage-with-react-dom

React Refresh makes loading React DevTools in your project more difficult. Its Webpack plugin patches React DevTools at the beginning of all your bundled code, so you need to break out of it by using a separate script tag to load React DevTools first: pmmmwh/react-refresh-webpack-plugin#680

After that, you just need to polyfill the chrome.runtime API (https://developer.chrome.com/docs/extensions/reference/api/runtime) (only the messaging part) over Chrome DevTools Protocol, to get most of React DevTools to work:

image

I didn't check how this extension loads Edge DevTools. If it just loads the bundled version in Edge, it's essentially impossible to add React DevTools or other extensions from this extension's side.