7 ms·

Bringing the browser developer tools to Visual Studio Code

160 points by PretzelFisch 6y ago

tobyhinloopen 6y ago
But why? What’s wrong with having it on a different window?
- zwieback 6y ago
  The second paragraph is titled "Why embed developer tools in an editor?". Answer: "reduce cognitive load"
  - Havoc 6y ago
    The 20 second demo vid literally shows them switching between two tabs in VS (Edge Tools for browser and styles.css for changes). Not sure how that reduces cognitive load vs Alt-tab? As best as I can tell they saved maybe a click or two. At the cost of no longer looking at a full screen stock browser. Interesting but not a clear win in my books
    - wdb 6y ago
      Yeah, that's true. If you have a wide screen monitor, the browser and VS Code fit happily next one another.
jdc 6y ago
Wonder how hard it would be to highlight elements on mouseover of tags in the normal editor.
SomaticPirate 6y ago
This appears to be only for Edge?
- binarycrusader 6y ago
  Edge (Chromium), so shouldn't be a problem in practice given every website has to be Chromium-compatible anyway.
  - city41 6y ago
    I'm guessing the real objection is needing to run Windows to use this. Unless Edge runs on other OSes?
    - vulcan01 6y ago
      The new version of Microsoft Edge can be downloaded for macOS and Windows, but I'm not sure about Linux.
      - abrowne 6y ago
        Preview coming later this month.
    - wmichelin 6y ago
      You could have spent the 2 minutes to google this https://www.microsoft.com/en-us/edge https://www.microsoft.com/en-us/edge (it works on macOS)
      - WorldMaker 6y ago
        And Linux Beta is supposed to arrive this month. https://www.theverge.com/2020/9/22/21449062/microsoft-edge-linux-preview-october-release https://www.theverge.com/2020/9/22/21449062/microsoft-edge-l...
fishtoaster 6y ago
Looks like this requires Edge to be installed on whatever machine you have VS Code installed on. I was kinda hoping that this was a browser properly embedded into VS Code so I could use it in github's Codespaces. No such luck, I'm afraid - trying to install the extension throws an error.
- robenkleene 6y ago
  Interesting, thanks for pointing this out. This contradicts my comment here (https://news.ycombinator.com/item?id=24657613 https://news.ycombinator.com/item?id=24657613) a bit, but I’d be shocked if they didn’t get it working with Codespaces. I do think it’s always going to require Edge though, I don’t see how Microsoft could resist getting tons of developers to install Edge for these features. I’m probably going to today. So a real VS Code strategy starts to emerge...
  - coldtea 6y ago
    >So a real VS Code strategy starts to emerge... Sounds more like premature drama/conspiracy theory atm...
- jameslk 6y ago
  I don't think they need to embed a browser into VSCode considering it's already running in one (Electron). However I wouldn't be surprised to see a browser embedded into a browser these days either.
  - throwaway738 6y ago
    I'm pretty sure the electron browser engine moves slower than Blink. If so, it would be extremely unhelpful for development and debugging since you would rarely have the latest engine on your machine, which would be the engine the majority of your customers would be on. Using an external browser makes a lot of sense in that regards, and also, it separates the testing engine from the application itself, which allows for (although I doubt it's been implemented yet) testing in different browsers, or different versions of browsers, etc.
wilsonnb3 6y ago
FYI you have to enable the network tab in the extension settings for it to show up, it is not enabled by default. They kind of mention this in the article but it wasn't super clear.
galaxyLogic 6y ago
Good development. Debugging in FireFox and Chrome suck, compared to real IDEs.
- deleted 6y ago
  [deleted]
mike1o1 6y ago
This looks great. The lack of the network and inspect element is the main reason I end up not using the built-in debugger with VS Code.
robenkleene 6y ago
I wrote a piece that got some discussion here on VS Code (https://blog.robenkleene.com/2020/09/21/the-era-of-visual-studio-code/ https://blog.robenkleene.com/2020/09/21/the-era-of-visual-st...). After writing that piece and reflecting, I decided that VS Code did in fact have one weakness: It doesn't have an embedded browser. I even tried to start a conversation about it on the VS Code Dev Slack here's what I said: > Any thoughts in integrating a browser into VS Code? Panic's just released text editor for macOS, Nova, has this feature. The obvious thing it gets you is a live updating preview of HTML files, but taking it further: With VS Code's development community, this seems like it could be the path forward for features like being able to instantly jump to editing the source file for a CSS rule or an HTML element from the DevTools, or jumping to a component's source file from the React DevTools. I'm aware there a couple of projects that have tried to do integrate a browser into VS Code, but nothing has really come to fruition yet, any thoughts? (Didn’t get much of a response, but obviously no one would talk about this if they knew.) The above summarizes my thoughts, but here’s another one: This is a key component of GitHub Codespaces. One of the weaknesses in remote development is the round trip between the developer server process and the browser is less seamless than when doing local development. The IDE-style debugger integration doesn’t work without running Chrome on the same machine for example. Anyway, VS Code now doesn’t have any weaknesses that I’m aware of anymore.
- identity0 6y ago
  Isn't VS Code literally written in Electron? It would be the easiest thing to implement.
- qppo 6y ago
  The vscode dev slack is just normally quiet, I wouldn't chalk it up to some implicit secrecy about a project with a pretty open team. VSCode extensions can render arbitrary html in web view tabs already. However they're sandboxed from the rest of vscode and communication between the browser page and rest of the ide is tricky. This is actually a bit painful if you want to debug something that uses a webview, since vscode's debugger won't step into the embedded window's runtime. The other obvious win is browsing documentation.
- therealunreal 6y ago
sntran 6y ago
I wonder how this would help with WebView. I develop an extension that loads the page inside the WebView, but having to use the WebView's inspector sucks. If this new tool can let other extension use it's panels, it would be awesome.
- Gehinnn 6y ago
  True! This is why I try to design my webview apps in a way that they also run in a standalone chrome tab and connect through web sockets to vscode!
taeric 6y ago
I've come close to setting up https://github.com/skeeto/skewer-mode https://github.com/skeeto/skewer-mode several times. Things like this always demo better than they actually improve my productivity, though. Especially with modern frameworks that don't let you redefine everything. (Odd that common lisp is still head and shoulders above most languages with how much you can redefine at runtime.)
nojvek 6y ago
When I was part of F12 team, we had proposed this to head is developer tools but he was a bit dismissive at the time. Edge was the future. Chrome was the enemy. Oh how times have turned. IIUC, this is chrome devtools packaged as a vscode extension using chrome remote protocol to talk with the browser. I’m glad this finally landed.
fareesh 6y ago
If this feature boosts productivity to a large extent perhaps it would finally be a reasonable trade-off for having an Electron-based editor?
Gehinnn 6y ago
Next thing would be to bring library specific dev tools to vscode. Like for mobx, react, rxjs and so on. I'd love to explore that area!
robertlagrant 6y ago
Why are Microsoft websites so slow?
NanoWar 6y ago
I heard you like Browsers ... So we put a browser into your browser...

160 points by PretzelFisch 6y ago

tobyhinloopen 6y ago

But why? What’s wrong with having it on a different window?

zwieback 6y ago
The second paragraph is titled "Why embed developer tools in an editor?". Answer: "reduce cognitive load"
- Havoc 6y ago
  The 20 second demo vid literally shows them switching between two tabs in VS (Edge Tools for browser and styles.css for changes). Not sure how that reduces cognitive load vs Alt-tab? As best as I can tell they saved maybe a click or two. At the cost of no longer looking at a full screen stock browser. Interesting but not a clear win in my books
  - wdb 6y ago
    Yeah, that's true. If you have a wide screen monitor, the browser and VS Code fit happily next one another.

jdc 6y ago

Wonder how hard it would be to highlight elements on mouseover of tags in the normal editor.

SomaticPirate 6y ago

This appears to be only for Edge?

binarycrusader 6y ago
Edge (Chromium), so shouldn't be a problem in practice given every website has to be Chromium-compatible anyway.
- city41 6y ago
  I'm guessing the real objection is needing to run Windows to use this. Unless Edge runs on other OSes?
  - vulcan01 6y ago
    The new version of Microsoft Edge can be downloaded for macOS and Windows, but I'm not sure about Linux.
    - abrowne 6y ago
      Preview coming later this month.
  - wmichelin 6y ago
    You could have spent the 2 minutes to google this https://www.microsoft.com/en-us/edge https://www.microsoft.com/en-us/edge (it works on macOS)
    - WorldMaker 6y ago
      And Linux Beta is supposed to arrive this month. https://www.theverge.com/2020/9/22/21449062/microsoft-edge-linux-preview-october-release https://www.theverge.com/2020/9/22/21449062/microsoft-edge-l...

fishtoaster 6y ago

Looks like this requires Edge to be installed on whatever machine you have VS Code installed on. I was kinda hoping that this was a browser properly embedded into VS Code so I could use it in github's Codespaces. No such luck, I'm afraid - trying to install the extension throws an error.

robenkleene 6y ago
Interesting, thanks for pointing this out. This contradicts my comment here (https://news.ycombinator.com/item?id=24657613 https://news.ycombinator.com/item?id=24657613) a bit, but I’d be shocked if they didn’t get it working with Codespaces. I do think it’s always going to require Edge though, I don’t see how Microsoft could resist getting tons of developers to install Edge for these features. I’m probably going to today. So a real VS Code strategy starts to emerge...
- coldtea 6y ago
  >So a real VS Code strategy starts to emerge... Sounds more like premature drama/conspiracy theory atm...
jameslk 6y ago
I don't think they need to embed a browser into VSCode considering it's already running in one (Electron). However I wouldn't be surprised to see a browser embedded into a browser these days either.
- throwaway738 6y ago
  I'm pretty sure the electron browser engine moves slower than Blink. If so, it would be extremely unhelpful for development and debugging since you would rarely have the latest engine on your machine, which would be the engine the majority of your customers would be on. Using an external browser makes a lot of sense in that regards, and also, it separates the testing engine from the application itself, which allows for (although I doubt it's been implemented yet) testing in different browsers, or different versions of browsers, etc.

wilsonnb3 6y ago

FYI you have to enable the network tab in the extension settings for it to show up, it is not enabled by default. They kind of mention this in the article but it wasn't super clear.

galaxyLogic 6y ago

Good development. Debugging in FireFox and Chrome suck, compared to real IDEs.

deleted 6y ago
[deleted]

mike1o1 6y ago

This looks great. The lack of the network and inspect element is the main reason I end up not using the built-in debugger with VS Code.

robenkleene 6y ago

I wrote a piece that got some discussion here on VS Code (https://blog.robenkleene.com/2020/09/21/the-era-of-visual-studio-code/ https://blog.robenkleene.com/2020/09/21/the-era-of-visual-st...). After writing that piece and reflecting, I decided that VS Code did in fact have one weakness: It doesn't have an embedded browser. I even tried to start a conversation about it on the VS Code Dev Slack here's what I said: > Any thoughts in integrating a browser into VS Code? Panic's just released text editor for macOS, Nova, has this feature. The obvious thing it gets you is a live updating preview of HTML files, but taking it further: With VS Code's development community, this seems like it could be the path forward for features like being able to instantly jump to editing the source file for a CSS rule or an HTML element from the DevTools, or jumping to a component's source file from the React DevTools. I'm aware there a couple of projects that have tried to do integrate a browser into VS Code, but nothing has really come to fruition yet, any thoughts? (Didn’t get much of a response, but obviously no one would talk about this if they knew.) The above summarizes my thoughts, but here’s another one: This is a key component of GitHub Codespaces. One of the weaknesses in remote development is the round trip between the developer server process and the browser is less seamless than when doing local development. The IDE-style debugger integration doesn’t work without running Chrome on the same machine for example. Anyway, VS Code now doesn’t have any weaknesses that I’m aware of anymore.

identity0 6y ago
Isn't VS Code literally written in Electron? It would be the easiest thing to implement.
qppo 6y ago
The vscode dev slack is just normally quiet, I wouldn't chalk it up to some implicit secrecy about a project with a pretty open team. VSCode extensions can render arbitrary html in web view tabs already. However they're sandboxed from the rest of vscode and communication between the browser page and rest of the ide is tricky. This is actually a bit painful if you want to debug something that uses a webview, since vscode's debugger won't step into the embedded window's runtime. The other obvious win is browsing documentation.
therealunreal 6y ago

sntran 6y ago

I wonder how this would help with WebView. I develop an extension that loads the page inside the WebView, but having to use the WebView's inspector sucks. If this new tool can let other extension use it's panels, it would be awesome.

Gehinnn 6y ago
True! This is why I try to design my webview apps in a way that they also run in a standalone chrome tab and connect through web sockets to vscode!

taeric 6y ago

I've come close to setting up https://github.com/skeeto/skewer-mode https://github.com/skeeto/skewer-mode several times. Things like this always demo better than they actually improve my productivity, though. Especially with modern frameworks that don't let you redefine everything. (Odd that common lisp is still head and shoulders above most languages with how much you can redefine at runtime.)

nojvek 6y ago

When I was part of F12 team, we had proposed this to head is developer tools but he was a bit dismissive at the time. Edge was the future. Chrome was the enemy. Oh how times have turned. IIUC, this is chrome devtools packaged as a vscode extension using chrome remote protocol to talk with the browser. I’m glad this finally landed.

fareesh 6y ago

If this feature boosts productivity to a large extent perhaps it would finally be a reasonable trade-off for having an Electron-based editor?

Gehinnn 6y ago

Next thing would be to bring library specific dev tools to vscode. Like for mobx, react, rxjs and so on. I'd love to explore that area!

robertlagrant 6y ago

Why are Microsoft websites so slow?

NanoWar 6y ago

I heard you like Browsers ... So we put a browser into your browser...