Online Visual Studio Code

-->

Install Visual Studio Code and download the Live Share extension pack from the marketplace. The extension pack will provide you with our audio support for interviews. To have the best experience of interviewing using Live Share in VS Code, make sure to turn on the Live Share insiders feature flag. Microsoft Visual Studio is an Integrated Development Environment that can be used for Android, iOS, macOS, Windows, web, and cloud-based application development. Visual Studio allows teams to collaboratively develop, debug, and test new code for programs, web applications, and more.

Run Visual Studio Code online on your browser, Mac, PC, and tablets with Turbo.net. Turbo.net lets you run thousands of apps online on all your devices. Visual Studio Online will be available for free for a while. You can use VS Code Cloud on any device convenient for you (ipad, mac, android, chromebook). And we will be interested to know your impressions about it! After 7 days, the demo mode will be over. Connect to your codespaces from your browser or Visual Studio Code. Simplify your workflow. Automatically set up dependencies and SSH keys. Go from code to commit faster on any project. Extend and customize. Configure your editor with dotfiles and extensions to create a consistent environment in every codespace.

Visual Studio Code is a popular code editor frequently used for building SharePoint Framework solutions. By setting up debugging of your SharePoint Framework solution in Visual Studio Code, you can more efficiently step through your code and fix errors.

You can also see the required steps to enable debugging in Visual Studio Code in this video on the SharePoint PnP YouTube Channel:

Prerequisites

The easiest way to configure Visual Studio Code to debug SharePoint Framework solutions is by using the Debugger for Chrome or Debugger for Edge Visual Studio Code extensions.

C++ To C# Online

The default SharePoint Framework web parts and extensions project templates include the prerequisites and prompt for the required Visual Studio Code extensions to install. In this case, it prompts to install Debugger for Chrome Visual Studio Code extension.

You also need Google Chrome. Download and install the latest version of Google Chrome.

Tip

If you're using a version of SharePoint Framework Yeoman generator that is older than version 1.3.4, you can install the Chrome debugger extension for Visual Studio Code from the Visual Studio Marketplace.

In case you want to debug your projects with Microsoft Edge, you need to install the Debugger for Edge extension for Visual Studio Code from the Visual Studio Marketplace and follow the steps in Debugging with Microsoft Edge or older projects.

Debug configurations

You can locate the debug configurations in the ./vscode/launch.json file under the Visual Studio Code workspace folder. To do list for ipad and mac. The launch.json contains two debug configurations:

Local workbench configuration
Hosted workbench configuration

Debug solution using local workbench

When building SharePoint Framework solutions, you can use the local workbench to verify that your web part is working correctly. Using the local workbench is convenient for testing all scenarios that do not require communicating with SharePoint as well as for offline development.

With Visual Studio Code configured for debugging SharePoint Framework solutions by using Google Chrome and the local workbench, you can verify that everything is working as expected.

Important

Local workbench does not support using Internet Explorer 11. Please use more modern browser.

Configure a breakpoint

In Visual Studio Code, open the main web part source file, and add a breakpoint in the first line of the render() method by either selecting the margin that is left to the line number or by highlighting the code line in the editor and selecting the F9 key.
In Visual Studio Code, on the View menu, select the Integrated Terminal option or select ctrl+` on the keyboard.
In the terminal run the following command:
Running this command builds your SharePoint Framework solution and starts the local webserver to serve the output files. Because the debugger starts its own instance of the browser, you use the --nobrowser argument to prevent the serve task from opening a browser window.

Start debugging in Visual Studio Code

After the gulp task is finished, move the focus to the code area of Visual Studio Code and select F5 (or on the Debug menu, select the Start Debugging option).

The debug mode in Visual Studio Code starts, changing the color of the status bar to orange and opening a new window of Google Chrome showing the local version of the SharePoint Workbench. H 264 codec for mac.

Note

Pocket pc for mac. At this point the breakpoint is disabled because the web part's code hasn't been loaded yet. SharePoint Framework loads web parts on demand only after they have been added to the page.

Add a web part to the canvas

To verify that debugging is working, in the workbench, add your web part to the canvas.

Notice that with the code loaded on the page, the breakpoint indicator changed to active.

If you now reload the page, your breakpoint in Visual Studio Code is hit, and you're able to inspect all the properties and step through the code.

Debug solution using hosted workbench

When building SharePoint Framework solutions that communicate with SharePoint, you might want to verify the interaction between your solution in SharePoint. To do this easily, you can use the hosted version of the SharePoint Workbench, which is available on every Microsoft 365 tenant at https://yourtenant.sharepoint.com/_layouts/workbench.aspx.

When building SharePoint Framework solutions, you'll be doing such tests regularly, and it is a good idea to create a separate debug configuration for the hosted version of the SharePoint Workbench.

Debug Web Part solution using hosted workbench

Open .vscode/launch.json, and update the url property under the Hosted workbench configuration to your SharePoint site URL.
In Visual Studio Code, activate the Debug pane, and in the Configurations list, select the newly added Hosted workbench configuration.
Start debugging either by selecting F5 or by selecting the Start Debugging option on the Debug menu. Visual Studio Code switches into debug mode, indicated by the orange status bar, and the Debugger for Chrome extension opens a new instance of Google Chrome with the Microsoft 365 sign-in page.
After you sign in, add the web part to the canvas and refresh the workbench, just like you did with the local workbench. You will see the breakpoint in Visual Studio Code be hit, and you're able to inspect variables and step through the code.

Debug Extension solution using hosted workbench

Debugging an Extension in a hosted workbench is similar to the steps for a Web Part with a few key differences.

Open .vscode/launch.json, and update the url property under the Hosted workbench configuration to your SharePoint site URL.
In Visual Studio Code, activate the Debug pane, and in the Configurations list, select the newly added Hosted workbench configuration.
After initiating the gulp serve in the Terminal start debugging either by selecting F5 or by selecting the Start Debugging option on the Debug menu. Visual Studio Code switches into debug mode, indicated by the orange status bar, and the Debugger for Chrome extension opens a new instance of Google Chrome with the Microsoft 365 sign-in page.
In the workbench tab that was opened in your browser navigate to a SharePoint Online page that you wish to test your extension.
Append the following query string parameters to the URL. Notice that you need to update the ID to match your own extension identifier. This is available in the HelloWorldApplicationCustomizer.manifest.json file.
Caution
Line breaks & indentation have been added to the following snippet for readability. The following text should be on a single line with no whitespace.
More detail about the URL parameters:
- loadSPFX=true: Ensures that the SharePoint Framework is loaded on the page. For performance reasons, the framework does not load unless at least one extension is registered. Because no components are registered, you must explicitly load the framework.
- debugManifestsFile: Specifies that you want to load SPFx components that are locally served. The loader only looks for components in the app catalog (for your deployed solution) and the SharePoint manifest server (for the system libraries).
- customActions: Simulates a custom action. When you deploy and register this component in a site, you'll create this CustomAction object and describe all the different properties you can set on it.
  - Key: Use the GUID of the extension as the key to associate with the custom action. This has to match the ID value of your extension, which is available in the extension manifest.json file.
  - Location: The type of custom action. Use ClientSideExtension.ApplicationCustomizer for the Application Customizer extension.
  - Properties: An optional JSON object that contains properties that are available via the this.properties member. In this HelloWorld example, it defined a testMessage property.
The full URL should look similar to the following:
Caution
Line breaks & indentation have been added to the following snippet for readability. The following text should be on a single line with no whitespace.
Select Load debug scripts to continue loading scripts from your local host.
When the page loads, you should now be able to see the Extension on your page(in this case a list view command extension):
In addition, you can now toggle Breakpoints and step through the code:

Debugging with Microsoft Edge or older projects

If you're using an older version of SharePoint Framework Yeoman generator or want to debug with Microsoft Edge, follow these steps to create the launch.json file manually.

Note

In order for you to debug with Microsoft Edge, you'll have to install the Windows 10 April 2018 Update which includes the Microsoft Edge DevTools Protocol.

Create debug configuration for local workbench

In Visual Studio Code, activate the Debug pane.
In the top section of the pane, open the Configurations list, and select the Add Configuration option.
In the list of debug environments, select Edge or Chrome.
For Edge, replace the contents of the generated .vscode/launch.json file with:
This configuration uses the Edge debugger provided with the Debugger for Edge extension. It points to the URL of the local workbench as the starting point. What is essential in debugging TypeScript code is the configuration of source maps that the debugger uses to map the JavaScript running in the browser to the original TypeScript code.
For Chrome, replace the contents of the generated .vscode/launch.json file with:
This configuration uses the Chrome debugger provided with the Debugger for Chrome extension. It points to the URL of the local workbench as the starting point. What is essential in debugging TypeScript code is the configuration of source maps that the debugger uses to map the JavaScript running in the browser to the original TypeScript code.

Create debug configuration for hosted workbench

In Visual Studio Code, open the .vscode/launch.json file.
For Edge, copy the existing debug configuration and use the URL of the hosted workbench:
For Chrome, copy the existing debug configuration and use the URL of the hosted workbench:

Microsoft Visual Online

How do I start using Codespaces?

If you’re in the Codespaces beta, you’ll see a “Code” button in the Code tab of all supported repositories.

Is Codespaces available for all repositories?

While in limited beta, Codespaces will be available for repositories you own and public repositories. Additional support will be available as the beta progresses, but for now, Codespaces will not be available for private repositories that belong to organizations.

Can I leave a codespace open?

When you create a codespace, you can leave it open for as long as you wish but it will suspend automatically after 30 minutes of inactivity. You can reconnect at any time through Codespaces in the browser or VS Code.

What if I don’t want to develop in a browser?