Vs code браузер внутри
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Open with Desktop
- View raw
- Copy raw contents Copy raw contents
Copy raw contents
Copy raw contents
This extension has been deprecated in favor of the Live Preview extension.
The Live Preview extension is under active development and has much of the same functionality, including an embedded preview and external browser debugging. You can install the Live Preview extension and safely uninstall or disable this Browser Preview extension. Please file any issues you encounter in the Live Preview repository.
Browser Preview for VS Code
A real browser preview inside your editor that you can debug.
Browser Preview for VS Code enables you to open a real browser preview inside your editor that you can debug. Browser Preview is powered by headless Chromium, and works by starting a headless Chromium instance in a new process. This can either be Google Chrome or Microsoft Edge. This enables a secure way to render web content inside VS Code, and enables interesting features such as in-editor debugging and more!
- Grab extension from marketplace
- Click the new "Browser Preview" button in the Side Bar to the left or run the command Browser View: Open Preview
Make sure you have Google Chrome installed on your computer.
How to change the default start url / start page?
Go to your settings, search for "browser preview" and set browser-preview.startUrl to your desired url.
Launch and Debugging
You can enable in-editor debugging of Browser Preview by installing Debugger for Chrome, and configure VS Code's debugger to either attach or launch to the browser previews by using the following configuration:
Watch an animated gif showing how to open the preview and debug a browser app.
Visual Studio Code includes a built-in debugger for Edge and Chrome. There are a couple ways to get started with it.
- Use the Open Link command to debug a URL.
- Clicking a link in the JavaScript debug terminal.
- Use a launch config to launch a browser with your app.
We also have more detailed walkthroughs to get started with React, Angular, Vue, and Ember, as well as other debugging recipes.
Open Link command
The simplest way to debug a webpage is through the Debug: Open Link command found in the Command Palette ( ⇧⌘P (Windows, Linux Ctrl+Shift+P ) ). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached.
If your default browser is Edge, VS Code will use it to open the page. Otherwise, it will try to find an installation of Chrome on your system instead.
Launch configuration
Launch configs are the traditional way to set up debugging in VS Code, and provide you the most flexibility for running complex applications.
In this section, we'll go into more detail about configurations and features for more advanced debugging scenarios. Instructions for Node.js debugging with source maps and stepping over external code also apply to browser-based debugging.
Note: If you are just getting started with VS Code, you can learn about general debugging features and creating launch.json configuration files in the Debugging topic.
Launching browsers
In most cases, you'll want to start a new instance of the browser to debug your webpage or file. To do this, you can create a file named .vscode/launch.json that looks like this:
You can also debug a single file without running a server, for example:
Attaching to browsers
To attach to a running browser, it needs to be launched in a special debug mode. You can do this using the following command, replacing edge.exe with the path to your Edge or Chrome binary:
Setting the --remote-debugging-port tells the browser to listen on that port for a debug connection. Setting a separate --user-data-dir forces a new instance of the browser to be opened; if this flag isn't given, then the command will open a new window of any running browser and not enter debug mode.
Next, add a new section to the vscode/launch.json file as below:
Now, you can press F5 or the Start button in the Debug view to attach to the running browser. You can even add a host property to debug a browser running on a different machine.
Launch configuration attributes
Debugging configurations are stored in a launch.json file located in your workspace's .vscode folder. An introduction into the creation and use of debugging configuration files is in the general Debugging article. You can either "launch" a browser with your application, or "attach" to an existing browser that you started in debug mode.
Below is a reference of common launch.json attributes specific to browser debugging. You can view the complete set of options in the vscode-js-debug options documentation.
- webRoot - The root directory for your source code. Most often, and by default, the webRoot is your workspace folder. This option is used for sourcemap resolution.
- outFiles - An array of glob patterns for locating generated JavaScript files. See the section on Source maps.
- smartStep - Try to automatically step over source code that doesn't map to source files. See the section on Smart stepping.
- skipFiles - Automatically skip files covered by these glob patterns. See the section on Skipping uninteresting code.
- trace - Enable diagnostic output.
These attributes are only available for launch configurations of request type launch :
- url - The URL to automatically open when the browser is launched.
- runtimeExecutable - Either an absolute path to the browser executable to use, or the version of the browser to use. Valid versions include stable (default), canary , beta , and dev .
- runtimeArgs - Optional arguments passed when launching the browser.
These attributes are only available for launch configurations of request type attach :
VS Code for the Web has many of the features of VS Code desktop that you love, including search and syntax highlighting while browsing and editing, along with extension support to work on your codebase and make simpler edits. In addition to opening repositories, forks, and pull requests from source control providers like GitHub and Azure Repos (in preview), you can also work with code that is stored on your local machine.
VS Code for the Web runs entirely in your web browser, so there are certain limitations compared to the desktop experience, which you can read more about below.
Relationship to VS Code desktop
VS Code for the Web provides a browser-based experience for navigating files and repositories and committing lightweight code changes. However, if you need access to a runtime to run, build, or debug your code, or you want to use platform features such as a terminal, we recommend moving your work to the desktop application or GitHub Codespaces for the full capabilities of VS Code. In addition, VS Code desktop lets you run extensions that aren't supported in the web version, and use a full set of keyboard shortcuts not limited by your browser.
When you're ready to switch, you'll be able to "upgrade" to the full VS Code desktop experience with a few clicks.
Opening a project
To work with both GitHub and Azure Repos, VS Code for the Web supports two routes, vscode.dev/github and vscode.dev/azurerepos :
GitHub Repositories is the core component that provides the ability to remotely browse and edit a repository from within the editor.
Rather than cloning your work, GitHub Repositories creates a virtual file system to access repositories and pull requests, allowing you to become productive quickly without needing to pull code onto your local machine. You can learn more about the extension in our GitHub Repositories guide.
Note: The GitHub Repositories extension works in VS Code desktop as well to provide fast repository browsing and editing.
You can create a new file in the web just as you would in a desktop VS Code environment, using File > New File from the Command Palette ( F1 ).
Azure Repos (preview)
Support for Azure Repos (part of Azure DevOps) in Visual Studio Code for the Web is in preview, and the experience will continue to grow and evolve over time.
You can open any repository, branch, or tag from Azure Repos in VS Code for the Web by prefixing vscode.dev to the Azure Repos URL.
Current limitations
Azure Repos support is currently read-only. Commit, branch, fork, and PR actions are disabled in the Source Control view and Command Palette.
More custom URLs
Like in the desktop, you can customize VS Code for the Web through a rich ecosystem of extensions that support just about every back end, language, and service. Unlike in the desktop, it's easy for us to deliver customized experiences with pre-installed extensions through unique vscode.dev URLs (like vscode.dev/github and vscode.dev/azurerepos described above).
Themes
Note: The color theme URL scheme works for themes that are fully declarative (no code).
An extension can define multiple themes. You can use the schema /theme/extensionId/themeName . If no themeName is specified, VS Code for the Web will take the first theme.
As a theme author, you can add the following badge to your extension readme to allow users to easily try out your theme in VS Code for the Web (replacing with your theme extension's unique identifier):
Visual Studio Live Share
Continue working in a different environment
In some cases, you will want to access a different environment that has the ability to run code. You can switch to working on a repository in a development environment that has support for a local file system and full language and development tooling.
The GitHub Repositories extension makes it easy for you to clone the repository locally with the GitHub Repositories: Continue Working on. command available from the Command Palette ( F1 ) or by clicking on the Remote indicator in the Status bar.
Safe exploration
VS Code for the Web runs entirely in your web browser's sandbox and offers a very limited execution environment.
When accessing code from remote repositories, the web editor doesn't "clone" the repo, but instead loads the code by invoking the services' APIs directly from your browser; this further reduces the attack surface when cloning untrusted repositories.
When working with local files, VS Code for the Web loads them through your browser's file system access APIs, which limit the scope of what the browser can access.
Saving and sharing work
When working on a local file in the web, your work is saved automatically if you have Auto Save enabled. You can also save manually as you do when working in desktop VS Code (for example File > Save).
When working on a remote repository, your work is saved in the browser's local storage until you commit it. If you open a repo or pull request using GitHub Repositories, you can push your changes in the Source Control view to persist any new work.
Run anywhere
Similar to GitHub Codespaces, VS Code for the Web can run on tablets, like iPads.
Language support
Language support is a bit more nuanced on the web, including code editing, navigation, and browsing. The desktop experiences are typically powered by language services and compilers that expect a file system, runtime, and compute environment. In the browser, these experiences are powered by language services running in the browser that provide source code tokenization and syntax colorization, completions, and many single-file operations.
Generally, experiences fall into the following categories:
You can determine the level of language support in your current file through the Language Status Indicator in the Status bar:
Limitations
Since VS Code for the Web runs completely within the browser, some experiences will naturally be more constrained when compared to what you can do in the desktop app. For example, the terminal and debugger are not available, which makes sense since you can't compile, run, and debug a Rust or Go application within the browser sandbox.
Extensions
Only a subset of extensions can run in the browser. You can use the Extensions view to install extensions in the web, and extensions that cannot be installed will have a warning icon and Learn Why link. We expect more extensions to become enabled over time.
When you install an extension, it is saved in the browser's local storage. You can ensure your extensions are synced across VS Code instances, including different browsers and even the desktop, by enabling Settings Sync.
When an Extension Pack contains extensions that do not run in the browser sandbox, you will get an informational message with the option to see the extensions included in the pack.
When extensions are executed in the browser sandbox, they are more restricted. Extensions that are purely declarative, such as most themes, snippets, or grammars, can run unmodified and are available in VS Code for the Web without any modification from the extension authors. Extensions that are running code need to be updated to support running in the browser sandbox. You can read more about what is involved to support extensions in the browser in the web extension authors guide.
There are also extensions that run in the browser with partial support only. A good example is a language extension that restricts its support to single files or the currently opened files.
File system API
Edge and Chrome today support the File System API, allowing web pages to access the local file system. If your browser does not support the File System API, you cannot open a folder locally, but you can open files instead.
Browser support
You can use VS Code for the Web in Chrome, Edge, Firefox, and Safari.
Webviews might appear differently or have some unexpected behavior in Firefox and Safari. You can view issue queries in the VS Code GitHub repo to track issues related to specific browsers, such as with the Safari label and Firefox label.
There are additional steps you can take to improve your browser experience using VS Code for the Web. Review the Additional browser setup section for more information.
Mobile support
You can use VS Code for the Web on mobile devices, but smaller screens may have certain limitations.
Keybindings
Certain keybindings may also work differently in the web.
Issue | Reason |
---|---|
⇧⌘P (Windows, Linux Ctrl+Shift+P ) won't launch the Command Palette in Firefox. | ⇧⌘P (Windows, Linux Ctrl+Shift+P ) is reserved in Firefox. As a workaround, use F1 to launch the Command Palette. |
⌘N (Windows, Linux Ctrl+N ) for new file doesn't work in web. | ⌘N (Windows, Linux Ctrl+N ) opens a new window instead. As a workaround, you can use Ctrl+Alt+N ( Cmd+Alt+N on macOS). |
⌘W (Windows, Linux Ctrl+W ) for closing an editor doesn't work in web. | ⌘W (Windows, Linux Ctrl+W ) closes the current tab in browsers. As a workaround, you can use Ctrl+Shift+Alt+N ( Cmd+Shift+Alt+N on macOS). |
⇧⌘B (Windows, Linux Ctrl+Shift+B ) will not toggle the favorites bar in the browser. | VS Code for the Web overrides this and redirects to the "Build" menu in the Command Palette. |
Additional browser setup
There are additional browser configuration steps you can take when working with VS Code in a browser.
Opening new tabs and windows
In certain cases, you may need to open a new tab or window while working in VS Code for the Web. VS Code might ask you for permission to access the clipboard when reading from it. Depending on your browser, you may grant access to the clipboard or otherwise allow for pop-up windows in different ways:
I am writing a visual studio code extension and I'd like to be able to open a browser window with a specific url in response to a command. I know that Electron has a BrowserWindow class but it appears that the Electron API is not accessible from a vscode extension.
I'd prefer the browser window to open within the tool but I'd be ok with opening the web page in my default browser if it is not possible.
How does one open a web page from an extension?
Yes, the answer referenced by @Steffen will open a browser outside of VS Code. This is my backup plan. However, it would be slightly better for my extension if the browser window was in VS Code. Is it possible to open a browser within the tool itself?
@MattBierner Your first suggested duplicate covers what Mark addresses, above: He wants to open in VS Code, not an external browser like that question details. The second would likely more rightfully be marked as a duplicate of this question, since Mark's predates it by over a year.
3 Answers 3
- Open the pallet (Ctrl + Shift + P)
- Select "Simple Browser: Preview"
- Enter web address
wow! this combined with live server extension (@^0^@)/ is the only side-by-side HTML preview solution that actually works.
This worked for me, once, and then afterwards I only see a white screen. Tried reloading/restarting Code, doesn't resolve :( Code's Developer Console shows a warning: main.js [Violation] Avoid using document.write(). Then I tried again with a simple site (e.g. milosophical.me) which works, but a site with frames (e.g. stackoverflow.com) does not. Error: Refused to frame 'stackoverflow.com' because an ancestor violates the Content Security Policy "frame-ancestors 'self'"
To open a browser window inside VS Code you can use the WebView API, though you need to supply HTML content rather than a URL:
Depending on your specific use case, there's also the Browser Preview extension which registers a command browser-preview.openPreview that you could use (you'd probably want to list browser-preview as a dependency to ensure it's installed).
And finally, if you just want to open in a normal browser window you can use the env.openExternal API. When running in remote environments this will also take care of exposing ports and mapping to the exposed hostname (if it's a localhost-served service):
How can I view my HTML code in a browser with the new Microsoft Visual Studio Code?
With Notepad++ you have the option to Run in a browser. How can I do the same thing with Visual Studio Code?
27 Answers 27
For Windows - Open your Default Browser - Tested on VS Code v 1.1.0
Answer to both opening a specific file (name is hard-coded) OR opening ANY other file.
Steps:
Use ctrl + shift + p (or F1 ) to open the Command Palette.
Type in Tasks: Configure Task or on older versions Configure Task Runner . Selecting it will open the tasks.json file. Delete the script displayed and replace it by the following:
Remember to change the "args" section of the tasks.json file to the name of your file. This will always open that specific file when you hit F5.
You may also set the this to open whichever file you have open at the time by using ["$"] as the value for "args". Note that the $ goes outside the <. >, so [""] is incorrect.
Switch back to your html file (in this example it's "text.html"), and press ctrl + shift + b to view your page in your Web Browser.
Configure Task Runner is no longer present in VSC 1.24.0 - Control-Shift-P returns no results for that string.
VS Code has a Live Server Extention that support one click launch from status bar.
Some of the features:
- One Click Launch from Status Bar
- Live Reload
- Support for Chrome Debugging Attachment
but it seems you can't preview the unsaved active file right? (Running it, doesn't preview the html, but shows on the browser the folder hierarchy)
@InvisibleDev - to get this working on a mac trying using this:
If you have chrome already open, it will launch your html file in a new tab.
Open Extensions Sidebar ( Ctrl + Shift + X )
Search for open in browser and install it
Right click on your html file, and select "Open in Browser" ( Alt + B )
If you would like to have live reload you can use gulp-webserver, which will watch for your file changes and reload page, this way you don't have to press F5 every time on your page:
Here is how to do it:
Open command prompt (cmd) and type
npm install --save-dev gulp-webserver
Enter Ctrl+Shift+P in VS Code and type Configure Task Runner. Select it and press enter. It will open tasks.json file for you. Remove everything from it end enter just following code
tasks.json
- In the root directory of your project add gulpfile.js and enter following code:
gulpfile.js
- Now in VS Code enter Ctrl+Shift+P and type "Run Task" when you enter it you will see your task "webserver" selected and press enter.
Your webserver now will open your page in your default browser. Now any changes that you will do to your HTML or CSS pages will be automatically reloaded.
Here is an information on how to configure 'gulp-webserver' for instance port, and what page to load, .
You can also run your task just by entering Ctrl+P and type task webserver
I had to run npm install -g gulp , npm install -g gulp-webserver and add a NODE_PATH environment variable that points to my AppData\npm\node_modules. Then I was able to run the webserver task, however I get a 404 when the browser starts. Any idea what I'm missing?
Never mind, just had to change the 'app' in your example to '.' (so it serves from the current directory).
One comment to the answer: If you want to run an html file in yor browser, which will automatic reload on changes, your gulpfile.js should look like this, with a '.' instead of the 'app'. Code = var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('webserver', function () < gulp.src('.') .pipe(webserver(< fallback: 'index.html', livereload: true, open: true >)); >);
This is awesome. Thanks for explaining this as a valuable option. I also had apply a little bit of both Krill and Friis's answers to get this working. But it does!
I was getting "Cannot GET /" because I copypasted gulpfile.js without configuring the line gulp.src('app') so that it actually pointed to my source (which wasn't /app but '.'). Works perfect. Thanks!
You can now install an extension View In Browser. I tested it on windows with chrome and it is working.
vscode version: 1.10.2
Here is a 2.0.0 version for the current document in Chrome w/ keyboard shortcut:
For running on a webserver:
Click on this Left-Bottom Manage Icon. Click Extensions or Short Cut Ctrl+Shift+X
Then Search in Extension with this key sentence Open In Default Browser. You will find this Extension. It is better to me.
Now right click on the html file and you will see Open in Default Browser or Short Cut Ctrl+1 to see the html file in browser.
The shortcut ctrl+1 overwrites the default ctrl+1 intelligently, opening a browser when in html in explorer, otherwise it sets the cursor in the current editor .
In linux, you can use the xdg-open command to open the file with the default browser:
Thanks! I'm a Linux user and was feeling lost. I'd like to add that one needs to press Ctrl + Shift + b to launch it in the browser. For me, the mnemonic was "b = browser". :-)
I am just re-posting the steps I used from msdn blog. It may help the community.
This will help you to setup a local web server known as lite-server with VS Code , and also guides you to host your static html files in localhost and debug your Javascript code.
1. Install Node.js
If not already installed, get it here
It comes with npm (the package manager for acquiring and managing your development libraries)
2. Create a new folder for your project
Somewhere in your drive, create a new folder for your web app.
3. Add a package.json file to the project folder
Then copy/paste the following text:
4. Install the web server
In a terminal window (command prompt in Windows) opened on your project folder, run this command:
This will install lite-server (defined in package.json), a static server that loads index.html in your default browser and auto refreshes it when application files change.
5. Start the local web server!
(Assuming you have an index.html file in your project folder).
In the same terminal window (command prompt in Windows) run this command:
Wait a second and index.html is loaded and displayed in your default browser served by your local web server!
lite-server is watching your files and refreshes the page as soon as you make changes to any html, js or css files.
And if you have VS Code configured to auto save (menu File / Auto Save), you see changes in the browser as you type!
Notes:
That’s it. Now before any coding session just type npm start and you are good to go!
Originally posted here in msdn blog. Credits goes to Author : @Laurent Duveau
There's now an official extension from the VS Code team called "Live Preview"
- Install "Live Preview" extension from Microsoft.
- Open a html file from the workspace, files outside current workspace don't work.
- Run command > Live Preview: Show Preview (External Browser)
There's also a command for launching it in the internal browser. You might also need to change the default port from the extension settings in case it's already in use on your system.
If you're just on Mac this tasks.json file:
. is all you need to open the current file in Safari, assuming its extension is ".html".
Create tasks.json as described above and invoke it with ⌘ + shift + b .
If you want it to open in Chrome then:
This will do what you want, as in opening in a new tab if the app is already open.
For Mac - Opens in Chrome - Tested on VS Code v 1.9.0
- Use Command + shift + p to open the Command Palette.
Type in Configure Task Runner, the first time you do this, VS Code will give you the scroll down menu, if it does select "Other." If you have done this before, VS Code will just send you directly to tasks.json.
Once in the tasks.json file. Delete the script displayed and replace it by the following:
- Switch back to your html file and press Command + Shift + b to view your page in Chrome.
One click solution simply install open-in-browser Extensions from the Visual Studio marketplace.
If you type in > it will show you the show and run commands
Or in your case with HTML, I think F5 after opening the command palette should open the debugger.
Openning files in Opera browser (on Windows 64 bits). Just add this lines:
Pay attention to the path format on "command": line. Don't use the "C:\path_to_exe\runme.exe" format.
To run this task, open the html file you want to view, press F1, type task opera and press enter
my runner script looks like :
and it's just open my explorer when I press ctrl shift b in my index.html file
here is how you can run it in multiple browsers for windows
notice that I didn't type anything in args for edge because Edge is my default browser just gave it the name of the file.
EDIT: also you don't need -incognito nor -private-window. it's just me I like to view it in a private window
I was copying only the tasks part. the "args":["/C"] is what makes this work. Out of curiosity, what does this do?
Here is the version 2.0.0 for Mac OSx:
For Mac, set your tasks.json (in the .vscode folder) file contents to the following and use SHFT+COMMAND+B to open.
Following worked in version 1.53.2 on windows 10 ->
- choose run active file in terminal menu
- It executed the html file in default edge browser
Ctrl + F1 will open the default browser. alternatively you can hit Ctrl + shift + P to open command window and select "View in Browser". The html code must be saved in a file (unsaved code on the editor - without extension, doesn't work)
What version of Visual Studio Code are you using? Those commands aren't working in my just-updated 1.8.1. Ctrl+F1 does nothing and I don't have a View in Browser option in the command palette. Maybe you have something beyond the default installed or extra tasks in your tasks.json?
probably most will be able to find a solution from the above answers but seeing as how none worked for me ( vscode v1.34 ) i thought i'd share my experience. if at least one person finds it helpful then, cool not a wasted post, amiirte?
anyway, my solution ( windows ) is built a-top of @noontz's. his configuration may have been sufficient for older versions of vscode but not with 1.34 (at least, i couldn't get it working ..).
our configs are nearly identical save a single property -- that property being, the group property. i'm not sure why but without this, my task would not even appear in the command palette.
so. a working tasks.json for windows users running vscode 1.34 :
note that the problemMatcher property is not required for this to work but without it an extra manual step is imposed on you. tried to read the docs on this property but i'm too thick to understand. hopefully someone will come about and school me but yeah, thanks in advance for that. all i know is -- include this property and ctrl+shift+b opens the current html file in a new chrome tab, hassle free.
Читайте также: