vscode-edge-devtools icon indicating copy to clipboard operation
vscode-edge-devtools copied to clipboard

Add live server

Open MehrajHossain opened this issue 3 years ago • 5 comments

Add live server

MehrajHossain avatar Sep 18 '22 19:09 MehrajHossain

Thanks for reaching out. I believe there are plans around doing something like this. Maybe @codepo8 can share some information about this.

captainbrosset avatar Sep 19 '22 08:09 captainbrosset

There are a few things to consider here.

  • If all you want is a product that automatically refreshes the Edge preview when you do any change, you can do that by using a server that watches and refreshes, like reload
  • If you want to use the live server VS Code extension, you can start the server and then start the debugging integration of this extension. There is an excellent blog post explaining this here. Be aware though that the server might soon not be maintained any longer
  • We are currently working on merging the functionality of this extension with the server of live preview but that is currently in investigation.

I suppose using NPM reload is the easiest option to have a continuously loading experience.

codepo8 avatar Sep 19 '22 09:09 codepo8

Hey there, this is already possible, here's how:

  • Right-click the file you want to open and choose "Open with live server"
  • Copy the location from the URL bar of the browser tab that Live server opened
  • Go back to VS Code and right-click the same file, this time choosing "Open with Edge" and either "Open Browser" or "Open browser with DevTools"
  • In the browser panel that opens, paste the URL from earlier
  • … and that's it.

I shot a quick video showing this that you can see on YouTube. Click the preview to see it:

preview of the video

codepo8 avatar Sep 21 '22 16:09 codepo8

You don't get what I'm saying? I'd like to run a live server from within the VSCode edge dev tool. I'm familiar of the browser live server plug-in, but it's inconvenient for me because I need everything in VScode. Is there a way to access the edge dev live server without refreshing? Otherwise, it should be updated.

Get Outlook for Androidhttps://aka.ms/AAb9ysg


From: Christian Heilmann @.> Sent: Wednesday, September 21, 2022 10:30:25 PM To: microsoft/vscode-edge-devtools @.> Cc: Mehraj Hossain @.>; Author @.> Subject: Re: [microsoft/vscode-edge-devtools] Add live server (Issue #1189)

Hey there, this is already possible, here's how:

  • Right-click the file you want to open and choose "Open with live server"
  • Copy the location from the URL bar of the browser tab that Live server opened
  • Go back to VS Code and right-click the same file, this time choosing "Open with Edge" and either "Open Browser" or "Open browser with DevTools"
  • In the browser panel that opens, paste the URL from earlier
  • … and that's it.

— Reply to this email directly, view it on GitHubhttps://github.com/microsoft/vscode-edge-devtools/issues/1189#issuecomment-1253948244, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AUYD72GWSLZSGQF6QB7ECODV7MZ2DANCNFSM6AAAAAAQPSKCJQ. You are receiving this because you authored the thread.Message ID: @.***>

MehrajHossain avatar Sep 21 '22 16:09 MehrajHossain

The VS Code team is working on bundling the live preview server wiith the main editor. Once that is done, we can leverage this one.

codepo8 avatar Sep 22 '22 06:09 codepo8