TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Bringing the browser developer tools to Visual Studio Code

160 pointsby PretzelFischover 4 years ago

15 comments

nojvekover 4 years 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.<p>Oh how times have turned. IIUC, this is chrome devtools packaged as a vscode extension using chrome remote protocol to talk with the browser.<p>I’m glad this finally landed.
fishtoasterover 4 years 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&#x27;s Codespaces. No such luck, I&#x27;m afraid - trying to install the extension throws an error.
评论 #24657668 未加载
评论 #24657995 未加载
robenkleeneover 4 years ago
I wrote a piece that got some discussion here on VS Code (<a href="https:&#x2F;&#x2F;blog.robenkleene.com&#x2F;2020&#x2F;09&#x2F;21&#x2F;the-era-of-visual-studio-code&#x2F;" rel="nofollow">https:&#x2F;&#x2F;blog.robenkleene.com&#x2F;2020&#x2F;09&#x2F;21&#x2F;the-era-of-visual-st...</a>). After writing that piece and reflecting, I decided that VS Code did in fact have one weakness: It doesn&#x27;t have an embedded browser. I even tried to start a conversation about it on the VS Code Dev Slack here&#x27;s what I said:<p>&gt; Any thoughts in integrating a browser into VS Code? Panic&#x27;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&#x27;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&#x27;s source file from the React DevTools. I&#x27;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?<p>(Didn’t get much of a response, but obviously no one would talk about this if they knew.)<p>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.<p>Anyway, VS Code now doesn’t have any weaknesses that I’m aware of anymore.
评论 #24657806 未加载
评论 #24658900 未加载
评论 #24657740 未加载
评论 #24659166 未加载
评论 #24662909 未加载
galaxyLogicover 4 years ago
Good development. Debugging in FireFox and Chrome suck, compared to real IDEs.
评论 #24660770 未加载
mike1o1over 4 years 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.
taericover 4 years ago
I&#x27;ve come close to setting up <a href="https:&#x2F;&#x2F;github.com&#x2F;skeeto&#x2F;skewer-mode" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;skeeto&#x2F;skewer-mode</a> several times. Things like this always demo better than they actually improve my productivity, though. Especially with modern frameworks that don&#x27;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.)
wilsonnb3over 4 years ago
FYI you have to enable the network tab in the extension settings for it to show up, it is not enabled by default.<p>They kind of mention this in the article but it wasn&#x27;t super clear.
sntranover 4 years 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&#x27;s inspector sucks. If this new tool can let other extension use it&#x27;s panels, it would be awesome.
评论 #24660605 未加载
NanoWarover 4 years ago
I heard you like Browsers ... So we put a browser into your browser...
fareeshover 4 years 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?
Gehinnnover 4 years ago
Next thing would be to bring library specific dev tools to vscode. Like for mobx, react, rxjs and so on.<p>I&#x27;d love to explore that area!
robertlagrantover 4 years ago
Why are Microsoft websites so slow?
jdcover 4 years ago
Wonder how hard it would be to highlight elements on mouseover of tags in the normal editor.
SomaticPirateover 4 years ago
This appears to be only for Edge?
评论 #24656915 未加载
tobyhinloopenover 4 years ago
But why? What’s wrong with having it on a different window?
评论 #24656684 未加载