This commit is contained in:
gregvanl 2021-05-11 21:20:00 -07:00
Родитель 99ae5e757e
Коммит 0992cb2b1e
25 изменённых файлов: 106 добавлений и 97 удалений

Просмотреть файл

@ -160,13 +160,13 @@ Following combination of locations are supported:
- `"extensionKind": ["ui", "workspace"]` — Indicates the extension **prefers** to run as a UI extension, but does not have any hard requirements on local assets, devices, or capabilities. When using VS Code, the extension will run in VS Code's local extension host if it exists locally, otherwise will run in VS Code's workspace extension host if it exists there. When using the Codespaces browser-based editor, it will run in the remote extension host always (as no local extension host is available). The old `"ui"` value (as a string) maps to this type for backwards compatibility, but is considered deprecated.
- `"extensionKind": ["workspace", "ui"]` — Indicates the extension **prefers** to run as a workspace extension, but does not have any hard requirements on accessing workspace contents. When using VS Code, the extension will run in VS Code's workspace extension host if it exists in remote workspace, otherwise will run in VS Code's local extension host if it exists locally. When using the Codespaces browser-based editor, it will run in the remote extension host always (as no local extension host is available).
You can also quickly **test** the effect of changing an extension's kind with the `remote.extensionKind` [setting](/docs/getstarted/settings). This setting is a map of extension IDs to extension kinds. For example, if you want to force the [Azure Databases](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb) extension to be a UI extension (instead of its Workspace default) and the [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) to be a workspace extension (instead of its UI default), you would set:
You can also quickly **test** the effect of changing an extension's kind with the `remote.extensionKind` [setting](/docs/getstarted/settings). This setting is a map of extension IDs to extension kinds. For example, if you want to force the [Azure Databases](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-cosmosdb) extension to be a UI extension (instead of its Workspace default) and the [Debugger for Edge](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-edge) to be a workspace extension (instead of its UI default), you would set:
```json
{
"remote.extensionKind": {
"ms-azuretools.vscode-cosmosdb": ["ui"],
"msjsdiag.debugger-for-chrome": ["workspace"]
"msjsdiag.debugger-for-edge": ["workspace"]
}
}
```

Просмотреть файл

@ -64,7 +64,7 @@ Visual Studio Code uses [Azure DevOps](https://azure.microsoft.com/services/devo
### Get a Personal Access Token
First off, follow the documentation to [create your own organization](https://docs.microsoft.com/en-us/azure/devops/organizations/accounts/create-organization?view=azure-devops) in Azure DevOps. In the following examples, the organization's name is `vscode`, you should use your new organization name as appropriate. Note that the organization's name doesn't necessarily have to be same as your publisher name.
First off, follow the documentation to [create your own organization](https://docs.microsoft.com/azure/devops/organizations/accounts/create-organization) in Azure DevOps. In the following examples, the organization's name is `vscode`, you should use your new organization name as appropriate. Note that the organization's name doesn't necessarily have to be same as your publisher name.
From your organization's home page (for example: `https://dev.azure.com/vscode`), open the User settings dropdown menu next to your profile image and select **Personal access tokens**:

Просмотреть файл

@ -440,6 +440,11 @@
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://code.visualstudio.com/docs/nodejs/browser-debugging</loc>
<changefreq>weekly</changefreq>
<priority>0.8</priority>
</url>
<url>
<loc>https://code.visualstudio.com/docs/nodejs/debugging-recipes</loc>
<changefreq>weekly</changefreq>

Просмотреть файл

@ -19,7 +19,7 @@ The tutorials below, hosted on the Microsoft Docs platform, walk you through dif
Tutorial | Description
--- | ---
[CI/CD setup with the Deploy to Azure extension](https://docs.microsoft.com/en-us/azure/devops/pipelines/targets/deploy-to-azure-vscode) | Set up a Continuous Integration and Delivery (CI/CD) pipeline with GitHub Actions or Azure Pipelines. Supports services including Azure Web Apps, Azure Functions, and Azure Kubernetes Service.
[CI/CD setup with the Deploy to Azure extension](https://docs.microsoft.com/azure/devops/pipelines/targets/deploy-to-azure-vscode) | Set up a Continuous Integration and Delivery (CI/CD) pipeline with GitHub Actions or Azure Pipelines. Supports services including Azure Web Apps, Azure Functions, and Azure Kubernetes Service.
[Deploy Azure Functions](https://docs.microsoft.com/azure/javascript/tutorial-vscode-serverless-node-01) | Build and manage Azure Functions serverless apps directly in VS Code with the Azure Functions extension.
[Deploy using the App Service extension](https://docs.microsoft.com/azure/javascript/tutorial-vscode-azure-app-service-node-01) | Manage Azure resources directly in VS Code with the Azure App Service extension.
[Deploy using Docker](https://docs.microsoft.com/azure/javascript/tutorial-vscode-docker-node-01) | Deploy your website using a Docker container.

Просмотреть файл

@ -33,7 +33,7 @@ code .
Tasks are defined in a workspace `tasks.json` file and VS Code has templates for common task runners. In the **Command Palette** (`kb(workbench.action.showCommands)`), you can filter on 'task' and can see the various Task related commands.
![tasks in command palette](images/tasks/tasks-command-palette.png)
![Tasks in Command Palette](images/tasks/tasks-command-palette.png)
Select the **Tasks: Configure Task Runner** command and you will see a list of task runner templates. Select **Others** to create a task which runs an external command.

Просмотреть файл

@ -236,7 +236,7 @@ There are more task properties to configure your workflow. You can use IntelliSe
In addition to the global menu bar, task commands can be accessed using the **Command Palette** (`kb(workbench.action.showCommands)`). You can filter on 'task' and can see the various task related commands.
![tasks in command palette](images/tasks/command-palette.png)
![Tasks in Command Palette](images/tasks/command-palette.png)
### Compound tasks

Просмотреть файл

@ -33,7 +33,7 @@ Access all available commands based on your current context.
Keyboard Shortcut: `kb(workbench.action.showCommands)`
![command palette](images/tips-and-tricks/OpenCommandPalatte.gif)
![Command Palette](images/tips-and-tricks/OpenCommandPalatte.gif)
### Default keyboard shortcuts

Просмотреть файл

@ -12,7 +12,7 @@ MetaSocialImage: images/opengraph/introvideos.png
In this tutorial, we walk you through setting up Visual Studio Code and give an overview of the basic features.
<iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RWz32O" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
<iframe src="https://www.microsoft.com/videoplayer/embed/RWz32O" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
Next video: [Code Editing in Visual Studio Code](/docs/introvideos/codeediting.md)

Просмотреть файл

@ -12,7 +12,7 @@ MetaSocialImage:
In this Visual Studio Code tutorial, we cover how to edit and run a small piece of code, including the features outlined below. After viewing this overview, read on in the [Learn More](/docs/introvideos/codeediting.md#learn-more) section to see more features.
<iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RE4M6Vx" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
<iframe src="https://www.microsoft.com/videoplayer/embed/RE4M6Vx" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
Next video: [Personalize Visual Studio Code](/docs/introvideos/configure.md)

Просмотреть файл

@ -12,7 +12,7 @@ MetaSocialImage: images/opengraph/introvideos.png
In this Visual Studio Code tutorial, we show you how to personalize Visual Studio Code with themes.
<iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RE4MEEF" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
<iframe src="https://www.microsoft.com/videoplayer/embed/RE4MEEF" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
Next video: [Extensions in Visual Studio Code](/docs/introvideos/extend.md)

Просмотреть файл

@ -12,7 +12,7 @@ MetaSocialImage: images/opengraph/introvideos.png
In this Visual Studio Code tutorial, we show you how to customize Visual Studio Code with settings and keyboard shortcuts.
<iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RWBdEz" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
<iframe src="https://www.microsoft.com/videoplayer/embed/RWBdEz" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
## Video outline

Просмотреть файл

@ -14,7 +14,7 @@ Debugging is a core feature of Visual Studio Code. In this tutorial, we will sho
> **Tip:** To use the debugging features demonstrated in this video for Node.js, you will need to first install [Node.js](https://nodejs.org/en/). To follow along with the Python portion of the video, you'll need to install [Python](https://www.python.org/downloads/).
<iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RWAIIi" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
<iframe src="https://www.microsoft.com/videoplayer/embed/RWAIIi" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
Next video: [Version Control](/docs/introvideos/versioncontrol.md)

Просмотреть файл

@ -12,7 +12,7 @@ MetaSocialImage: images/opengraph/introvideos.png
In this tutorial, we will learn how to use the basics of Git version control in Visual Studio Code. For more information about integrated Git support, including how to work with remote repositories, read on in the [related resources](/docs/introvideos/versioncontrol.md#related-resources) section below.
<iframe src="https://www.microsoft.com/en-us/videoplayer/embed/RE4Mzrv" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
<iframe src="https://www.microsoft.com/videoplayer/embed/RE4Mzrv" width="640" height="320" allowFullScreen="true" frameBorder="0"></iframe>
Next video: [Customize](/docs/introvideos/customize.md)

Просмотреть файл

@ -117,7 +117,7 @@ To set a breakpoint in `app.component.ts`, click on the gutter to the left of th
### Configure the debugger
We need to initially configure the [debugger](/docs/editor/debugging.md). To do so, go to the Run view (`kb(workbench.view.debug)`) and click on the gear button or "Create a launch.json" link to create a `launch.json` debugger configuration file. Choose **Edge: launch** from the **Select Environment** dropdown list. This will create a `launch.json` file in a new `.vscode` folder in your project which includes a configuration to launch the website.
We need to initially configure the [debugger](/docs/editor/debugging.md). To do so, go to the Run view (`kb(workbench.view.debug)`) and click on the gear button or **Create a launch.json** link to create a `launch.json` debugger configuration file. Choose **Edge: launch** from the **Select Environment** dropdown list. This will create a `launch.json` file in a new `.vscode` folder in your project which includes a configuration to launch the website.
We need to make one change for our example: change the port of the `url` from `8080` to `4200`. Your `launch.json` should look like this:

Просмотреть файл

@ -2,7 +2,7 @@
Order: 5
Area: nodejs
TOCTitle: Browser Debugging
ContentId: 3AC4DBB5-1469-47FD-9CC2-6C94684D4A9D
ContentId: d0e271da-0372-4ab9-a2ab-b7add855bd5a
PageTitle: Debug Browser Apps using Visual Studio Code
DateApproved: 5/5/2021
MetaDescription: The Visual Studio Code editor includes browser debugging support. Set breakpoints, step-in, inspect variables and more.
@ -12,29 +12,29 @@ MetaSocialImage: /assets/docs/editor/debugging/Debugging.png
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](#open-link-command) command to debug a URL,
- Clicking a link in the [JavaScript debug terminal](/docs/nodejs/nodejs-debugging#_avascript-debug-terminal),
- Use a [launch config](#launch-configuration) to launch a browser with your app.
* Use the [Open Link](#open-link-command) command to debug a URL.
* Clicking a link in the [JavaScript debug terminal](/docs/nodejs/nodejs-debugging#javascript-debug-terminal).
* Use a [launch config](#launch-configuration) to launch a browser with your app.
We also have more detailed walkthroughs to get started with [React](/docs/nodesjs/reactjs-tutorial), [Angular](/docs/nodesjs/angular-tutorial), [Vue](/docs/nodesjs/vuejs-tutorial), and [Ember](/docs/nodesjs/emberjs-tutorial), as well as other debugging [recipes](/docs/nodesjs/debugging-recipes).
## Open Link Command
## Open Link command
The simplest way to debug a webpage is through the **Debug: Open Link** command found in the command palette (`kbstyle(F1)`). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached.
The simplest way to debug a webpage is through the **Debug: Open Link** command found in the Command Palette (`kb(workbench.action.showCommands)`). When you run this command, you'll be prompted for a URL to open, and the debugger will be attached.
![](./images/browser-debugging/debug-open-link.gif)
![Using the Open Link command to attach to a URL](images/browser-debugging/debug-open-link.gif)
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 configuration
Launch configs are the traditional way to set up debugging in VS Code, and provide you the most configuration options for running complex applications.
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](/docs/nodejs/nodejs-debugging.md#source-maps) and [stepping over external code](/docs/nodejs/nodejs-debugging.md#skipping-uninteresting-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](/docs/editor/debugging.md) topic.
## Launching Browsers
## 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:
@ -52,7 +52,7 @@ In most cases, you'll want to start a new instance of the browser to debug your
}
```
When you hit `kbstyle(F5)` or the "Start" button in the Debug view, `http://localhost:8000` will be opened in debug mode. If you'd like to use Chrome instead of Edge, replace `pwa-msedge` with `pwa-chrome`.
When you hit `kb(workbench.action.debug.start)` or the **Start** button in the Debug view, `http://localhost:8000` will be opened in debug mode. If you'd like to use Chrome instead of Edge, replace `pwa-msedge` with `pwa-chrome`.
You can also debug a single file without running a server, for example:
@ -70,17 +70,17 @@ You can also debug a single file without running a server, for example:
}
```
## Attaching to Browsers
## 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:
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:
```
```bash
edge.exe --remote-debugging-port=9222 --user-data-dir=remote-debug-profile
```
Setting the `--remote-debugging-port` tells the browser to list 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 wasn't given, then the command would just open a new window of any running browser and not enter debug mode.
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.
Then, add a new section to the `vscode/launch.json` file so that it looks like this:
Next, add a new section to the `vscode/launch.json` file as below:
```json
{
@ -96,7 +96,7 @@ Then, add a new section to the `vscode/launch.json` file so that it looks like t
}
```
Now, you can press `kbstyle(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.
Now, you can press `kb(workbench.action.debug.start)` 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
@ -104,20 +104,25 @@ Debugging configurations are stored in a `launch.json` file located in your work
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](https://github.com/microsoft/vscode-js-debug/blob/main/OPTIONS.md) documentation.
* `webRoot` - The root directory for your code. Most often, and by default, the `webRoot` is your workspace folder. This option is used for sourcemap resolution.
* `outFiles` - array of glob patterns for locating generated JavaScript files. See section [Source maps](/docs/nodejs/nodejs-debugging.md#source-maps).
* `smartStep`- try to automatically step over code that doesn't map to source files. See section [Smart stepping](/docs/nodejs/nodejs-debugging.md#smart-stepping).
* `skipFiles` - automatically skip files covered by these glob patterns. See section [Skipping uninteresting code](/docs/nodejs/nodejs-debugging.md#skipping-uninteresting-code).
* `trace` - enable diagnostic output.
* `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](/docs/nodejs/nodejs-debugging.md#source-maps).
* `smartStep`- Try to automatically step over source code that doesn't map to source files. See the section on [Smart stepping](/docs/nodejs/nodejs-debugging.md#smart-stepping).
* `skipFiles` - Automatically skip files covered by these glob patterns. See the section on [Skipping uninteresting code](/docs/nodejs/nodejs-debugging.md#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.
* `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`:
* `url` - if given, VS Code will attach to a tab with this URL. If not provided, it will attach to all browser tabs.
* `port` - debug port to use. See sections [Attaching to Node.js](/docs/nodejs/nodejs-debugging.md#attaching-to-browsers).
* `address` - TCP/IP address of the debug port. See sections [Attaching to Browsers](/docs/nodejs/nodejs-debugging.md#attaching-to-browsers).
* `url` - If given, VS Code will attach to a tab with this URL. If not provided, it will attach to all browser tabs.
* `port` - Debug port to use. See the section on [Attaching to Node.js](/docs/nodejs/nodejs-debugging.md#attaching-to-browsers).
* `address` - TCP/IP address of the debug port. See the section on [Attaching to Browsers](/docs/nodejs/nodejs-debugging.md#attaching-to-browsers).
## Next steps
* [Debugging](/docs/editor/debugging.md) - Read about general VS Code debugging features.
* [Debugging Recipes](/docs/nodejs/debugging-recipes.md) - Set up debugging for your favorite platform.

Просмотреть файл

@ -22,11 +22,11 @@ The Visual Studio Code editor supports debugging Node.js applications via the bu
**Recipes:**
- [Debugging Node.js with Nodemon](https://github.com/microsoft/vscode-recipes/tree/main/nodemon)
* [Debugging Node.js with Nodemon](https://github.com/microsoft/vscode-recipes/tree/main/nodemon)
## Debug client-side JavaScript in Browsers
The Visual Studio Code editor supports debugging of JavaScript running in [Microsoft Edge](https://www.microsoft.com/en-us/edge) and [Google Chrome](https://www.google.com/chrome/).
The Visual Studio Code editor supports debugging of JavaScript running in [Microsoft Edge](https://www.microsoft.com/edge) and [Google Chrome](https://www.google.com/chrome/).
![JavaScript, Edge, and Chrome logo](images/recipes/browsers.png)
@ -34,17 +34,16 @@ You can read more about debugging browsers works in the [Browser Debugging docum
**Recipes:**
- [Debugging Angular apps with Angular CLI](https://github.com/microsoft/vscode-recipes/tree/main/Angular-CLI)
- [Debugging Next.js apps](https://github.com/microsoft/vscode-recipes/tree/main/Next-js)
- [Debugging Meteor apps](https://github.com/microsoft/vscode-recipes/tree/main/meteor)
- [Debugging Vue.js apps](https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli)
- [Debugging Mocha tests](https://github.com/microsoft/vscode-recipes/tree/main/debugging-mocha-tests)
- [Debugging Jest tests](https://github.com/microsoft/vscode-recipes/tree/main/debugging-jest-tests)
* [Debugging Angular apps with Angular CLI](https://github.com/microsoft/vscode-recipes/tree/main/Angular-CLI)
* [Debugging Next.js apps](https://github.com/microsoft/vscode-recipes/tree/main/Next-js)
* [Debugging Meteor apps](https://github.com/microsoft/vscode-recipes/tree/main/meteor)
* [Debugging Vue.js apps](https://github.com/microsoft/vscode-recipes/tree/main/vuejs-cli)
* [Debugging Mocha tests](https://github.com/microsoft/vscode-recipes/tree/main/debugging-mocha-tests)
* [Debugging Jest tests](https://github.com/microsoft/vscode-recipes/tree/main/debugging-jest-tests)
**Blog posts**:
* [Live edit and debug your React apps directly from VS Code](https://medium.com/@auchenberg/live-edit-and-debug-your-react-apps-directly-from-vs-code-without-leaving-the-editor-3da489ed905f)
* [Super-charged live editing and JavaScript debugging for Angular using VS Code](https://medium.com/@auchenberg/super-charged-live-editing-and-javascript-debugging-for-angular-using-visual-studio-code-c29da251ec71)
## Electron - Debug Electron applications
@ -55,7 +54,7 @@ The Visual Studio Code editor supports debugging [Electron](https://electron.ato
**Recipes:**
- [Debugging Electron Main and Renderer processes](https://github.com/microsoft/vscode-recipes/tree/main/Electron)
* [Debugging Electron Main and Renderer processes](https://github.com/microsoft/vscode-recipes/tree/main/Electron)
## Next steps

Просмотреть файл

@ -14,13 +14,13 @@ The Visual Studio Code editor has built-in debugging support for the [Node.js](h
There are a few ways you can debug your Node.js programs in VS Code:
- Use [auto attach](#auto-attach) to debug process you run in VS Code's integrated terminal,
- Use the [JavaScript debug terminal](#javascript-debug-terminal), in a similar way, or
- Use a [launch config](#launch-configuration) to start your program, or [attach to a process](#attaching-to-nodejs) launched outside of VS Code
* Use [auto attach](#auto-attach) to debug process you run in VS Code's integrated terminal,
* Use the [JavaScript debug terminal](#javascript-debug-terminal), in a similar way, or
* Use a [launch config](#launch-configuration) to start your program, or [attach to a process](#attaching-to-nodejs) launched outside of VS Code
## Auto Attach
If the **Auto Attach** feature is enabled, the Node debugger automatically attaches to certain Node.js processes that have been launched from VS Code's Integrated Terminal. To enable the feature, either use the **Toggle Auto Attach** command from the command palette (`kbstyle(F1)`) or, if it's already activated, use the **Auto Attach** Status bar item.
If the **Auto Attach** feature is enabled, the Node debugger automatically attaches to certain Node.js processes that have been launched from VS Code's Integrated Terminal. To enable the feature, either use the **Toggle Auto Attach** command from the Command Palette (`kb(workbench.action.showCommands)`) or, if it's already activated, use the **Auto Attach** Status bar item.
There are three modes for auto attach, which you can select in the resulting Quick Pick and via the **debug.javascript.autoAttachFilter** setting:
@ -72,7 +72,7 @@ In `smart` Auto Attach mode, VS Code will try to attach to your code, and not at
## JavaScript Debug Terminal
In a similar way to [auto attach](#auto-attach), the JavaScript Debug Terminal will automatically debug any Node.js process you run in it. You can create a Debug Terminal by running the use the **Debug: Create JavaScript Debug Terminal** command from the command palette (`kbstyle(F1)`), or by selecting the **Create JavaScript Debug Terminal** from the terminal switcher dropdown.
In a similar way to [auto attach](#auto-attach), the JavaScript Debug Terminal will automatically debug any Node.js process you run in it. You can create a Debug Terminal by running the use the **Debug: Create JavaScript Debug Terminal** command from the Command Palette (`kbs(workbench.action.showCommands)`), or by selecting the **Create JavaScript Debug Terminal** from the terminal switcher dropdown.
![Create Debug Terminal](images/nodejs-debugging/create-debug-terminal.png)
@ -152,16 +152,16 @@ You can also bring up the snippets with the **Add Configuration...** button in t
These are the available snippets:
- **Launch Program**: Launch a Node.js program in debug mode.
- **Launch via npm**: Launch a Node.js program through an npm 'debug' script. If you have defined an npm debug script in your package.json, you can use it directly from your launch configuration. Make sure that the debug port used in the npm script, corresponds to the port specified in the snippet.
- **Attach**: Attach to the debug port of a locally running Node.js program. Make sure that the Node.js program to debug has been started in debug mode, and the debug port used is the same as the one specified in the snippet.
- **Attach to Remote Program**: Attach to the debug port of a Node.js program running on the host specified by the `address` attribute. Make sure that the Node.js program to debug has been started in debug mode, and the debug port used is the same as the one specified in the snippet. To help VS Code map source files between your workspace and the filesystem of the remote host, make sure to specify correct paths for the `localRoot`and `remoteRoot` attributes.
- **Attach by Process ID**: Open the process picker to select a node or gulp process for debugging. With this launch configuration, you can even attach to a node or gulp process that was not started in debug mode.
- **Nodemon Setup**: Use nodemon to relaunch a debug session automatically whenever the JavaScript source has changed. Make sure that you have nodemon installed globally. Note that terminating the debug session only terminates the program to debug, not nodemon itself. To terminate nodemon, press `kbstyle(Ctrl+C)` in the Integrated Terminal.
- **Mocha Tests**: Debug mocha tests in a `test` folder of your project. Make sure that your project has 'mocha' installed in its `node_modules` folder.
- **Yeoman generator**: Debug a yeoman generator. The snippet asks you to specify the name of the generator. Make sure that your project has 'yo' installed in its `node_modules` folder and that your generated project has been installed for debugging by running `npm link` in the project folder.
- **Gulp task**: Debug a gulp task. Make sure that your project has 'gulp' installed in its `node_modules` folder.
- **Electron Main**: Debug the main Node.js process of an Electron application. The snippet assumes that the Electron executable has been installed inside the `node_modules/.bin` directory of the workspace.
* **Launch Program**: Launch a Node.js program in debug mode.
* **Launch via npm**: Launch a Node.js program through an npm 'debug' script. If you have defined an npm debug script in your package.json, you can use it directly from your launch configuration. Make sure that the debug port used in the npm script, corresponds to the port specified in the snippet.
* **Attach**: Attach to the debug port of a locally running Node.js program. Make sure that the Node.js program to debug has been started in debug mode, and the debug port used is the same as the one specified in the snippet.
* **Attach to Remote Program**: Attach to the debug port of a Node.js program running on the host specified by the `address` attribute. Make sure that the Node.js program to debug has been started in debug mode, and the debug port used is the same as the one specified in the snippet. To help VS Code map source files between your workspace and the filesystem of the remote host, make sure to specify correct paths for the `localRoot`and `remoteRoot` attributes.
* **Attach by Process ID**: Open the process picker to select a node or gulp process for debugging. With this launch configuration, you can even attach to a node or gulp process that was not started in debug mode.
* **Nodemon Setup**: Use nodemon to relaunch a debug session automatically whenever the JavaScript source has changed. Make sure that you have nodemon installed globally. Note that terminating the debug session only terminates the program to debug, not nodemon itself. To terminate nodemon, press `kbstyle(Ctrl+C)` in the Integrated Terminal.
* **Mocha Tests**: Debug mocha tests in a `test` folder of your project. Make sure that your project has 'mocha' installed in its `node_modules` folder.
* **Yeoman generator**: Debug a yeoman generator. The snippet asks you to specify the name of the generator. Make sure that your project has 'yo' installed in its `node_modules` folder and that your generated project has been installed for debugging by running `npm link` in the project folder.
* **Gulp task**: Debug a gulp task. Make sure that your project has 'gulp' installed in its `node_modules` folder.
* **Electron Main**: Debug the main Node.js process of an Electron application. The snippet assumes that the Electron executable has been installed inside the `node_modules/.bin` directory of the workspace.
### Node console
@ -173,8 +173,8 @@ If an external terminal is used, you can configure which terminal program to use
Instead of launching the Node.js program directly with node, you can use 'npm' scripts or other task runner tools directly from a launch configuration:
- Any program available on the PATH (for example 'npm', 'mocha', 'gulp', etc.) can be used for the `runtimeExecutable` attribute and arguments can be passed via `runtimeArgs`.
- You do not have to set the `program` attribute if your npm script or other tool implicitly specifies the program to launch.
* Any program available on the PATH (for example 'npm', 'mocha', 'gulp', etc.) can be used for the `runtimeExecutable` attribute and arguments can be passed via `runtimeArgs`.
* You do not have to set the `program` attribute if your npm script or other tool implicitly specifies the program to launch.
Let's look at an 'npm' example. If your `package.json` has a 'debug' script, for example:
@ -261,26 +261,26 @@ lines="foo\nbar"
If you want to attach the VS Code debugger to an external Node.js program, launch Node.js as follows:
```
```bash
node --inspect program.js
```
or if the program shouldn't start running, but must wait for the debugger to attach:
```
```bash
node --inspect-brk program.js
```
Now you have a couple options for attaching the debugger to your program:
- open a "process picker" that lists all potential candidate processes and let you pick one, or
- create an "attach" configuration that explicitly specifies all configuration options and then press **F5**.
* Open a "process picker" that lists all potential candidate processes and let you pick one, or
* Create an "attach" configuration that explicitly specifies all configuration options and then press **F5**.
Let's go through these options in detail:
### Attach to Node Process action
The **Attach to Node Process** command from the command palette (`kbstyle(F1)`) opens a Quick Pick menu that lists all potential processes that are available to the Node.js debugger:
The **Attach to Node Process** command from the Command Palette (`kb(workbench.action.showCommands)`) opens a Quick Pick menu that lists all potential processes that are available to the Node.js debugger:
![Node.js Process picker](images/nodejs-debugging/process-picker.png)
@ -359,7 +359,7 @@ Since source maps are not always automatically created, you should make sure to
For TypeScript, you can enable sourcemaps by passing `--sourceMap` to `tsc`, or by adding `"sourceMap": true` in your tsconfig.json file.
```
```bash
tsc --sourceMap --outDir bin app.ts
```
@ -367,7 +367,7 @@ tsc --sourceMap --outDir bin app.ts
For Babel, you'll want to set the [sourceMaps](https://babeljs.io/docs/en/options#sourcemaps) option to `true`, or pass the `--source-maps` option when compiling your code.
```
```bash
npx babel script.js --out-file script-compiled.js --source-maps
```
@ -431,7 +431,7 @@ Finally, the debug adapter searches for the full path of `app.ts` in this result
Here are some things to try when your breakpoints turn gray:
* While debugging, run the **Debug: Create Diagnostic Information for Current Session** command. This command will bring up a tool that can provide hints to help you resolve any issues from the command palette (`kbstyle(F1)`).
* While debugging, run the **Debug: Create Diagnostic Information for Current Session** command. This command will bring up a tool that can provide hints to help you resolve any issues from the Command Palette (`kb(workbench.action.showCommands)`).
* Did you build with source maps enabled? Make sure there are `.js.map` files, or inlined source maps in your `.js` files.
* Are the `sourceRoot` and `sources` properties in your source map correct? Can they be combined to get the correct path to the `.ts` file?
* Have you opened the folder in VS Code with the incorrect case? It's possible to open folder `foo/` from the command line like `code FOO` in which case source maps may not be resolved correctly.
@ -556,10 +556,10 @@ The hit count syntax supported by the Node.js debugger is either an integer or o
Some examples:
- `>10` break always after 10 hits
- `<3` break on the first two hits only
- `10` same as `>=10`
- `%2` break on every other hit
* `>10` break always after 10 hits
* `<3` break on the first two hits only
* `10` same as `>=10`
* `%2` break on every other hit
### Breakpoint validation

Просмотреть файл

@ -121,7 +121,7 @@ To set a breakpoint in `index.js`, click on the gutter to the left of the line n
### Configure the debugger
We need to initially configure the [debugger](/docs/editor/debugging.md). To do so, go to the Run view (`kb(workbench.view.debug)`) and click on the gear button or "Create a launch.json" link to create a `launch.json` debugger configuration file. Choose **Edge: launch** from the **Select Environment** dropdown list. This will create a `launch.json` file in a new `.vscode` folder in your project which includes a configuration to launch the website.
We need to initially configure the [debugger](/docs/editor/debugging.md). To do so, go to the Run view (`kb(workbench.view.debug)`) and click on the gear button or **Create a launch.json** link to create a `launch.json` debugger configuration file. Choose **Edge: launch** from the **Select Environment** dropdown list. This will create a `launch.json` file in a new `.vscode` folder in your project which includes a configuration to launch the website.
We need to make one change for our example: change the port of the `url` from `8080` to `3000`. Your `launch.json` should look like this:

Просмотреть файл

@ -116,7 +116,7 @@ While using this approach to [bind mount](https://docs.docker.com/storage/bind-m
### Open a WSL 2 folder in a container on Windows
If you are using [Windows Subsystem for Linux v2 (WSL 2)](https://docs.microsoft.com/en-us/windows/wsl/wsl2-about) and have enabled [Docker Desktop's WSL 2 back-end](https://aka.ms/vscode-remote/containers/docker-wsl2), you can work with source code stored inside WSL!
If you are using [Windows Subsystem for Linux v2 (WSL 2)](https://docs.microsoft.com/windows/wsl/wsl2-about) and have enabled [Docker Desktop's WSL 2 back-end](https://aka.ms/vscode-remote/containers/docker-wsl2), you can work with source code stored inside WSL!
Once the WSL 2 engine is enabled, you can either:

Просмотреть файл

@ -31,7 +31,7 @@ For a simple example of source maps in action, see the [TypeScript tutorial](/do
}
```
For more advanced debugging scenarios, you can create your own debug configuration `launch.json` file. To see the default configuration, go to the Run view (`kb(workbench.view.debug)`) and press the gear icon or "Create a launch.json" link to **Configure or Fix 'launch.json'**.
For more advanced debugging scenarios, you can create your own debug configuration `launch.json` file. To see the default configuration, go to the Run view (`kb(workbench.view.debug)`) and press the gear icon or **Create a launch.json** link to **Configure or Fix 'launch.json'**.
![configure launch.json](images/debugging/configure-debugging.png)

Просмотреть файл

@ -23,7 +23,7 @@ Each of you can open files, navigate, edit code, or highlight - and changes are
You can also debug together using VS Code's debugging features, like hovers, locals and watches, the stack trace or the debug console. You are both able to set breakpoints and advance the debug cursor to step through the session.
For more details about what you can do with Live Share, visit the [how-to-guide](https://docs.microsoft.com/en-us/visualstudio/liveshare/use/vscode) or read the quick-start below.
For more details about what you can do with Live Share, visit the [how-to-guide](https://docs.microsoft.com/visualstudio/liveshare/use/vscode) or read the quick-start below.
## Get started with Live Share

Просмотреть файл

@ -20,27 +20,27 @@ Through these modules, you will:
<div class="module">
<div class="info">
<a href="https://docs.microsoft.com/en-us/learn/paths/introduction-python-space-exploration-nasa/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Discover the role of Python in space exploration</h2></a>
<a href="https://docs.microsoft.com/learn/paths/introduction-python-space-exploration-nasa/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Discover the role of Python in space exploration</h2></a>
</div>
<p class="description">Learn how Python and data science play a role in the innovative solutions that NASA creates.</p>
<a href="https://docs.microsoft.com/en-us/learn/paths/introduction-python-space-exploration-nasa/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/nasa-python/nasa-python1.png" alt="Python NASA module" aria-hidden="true" class="thumb"/></a>
<a href="https://docs.microsoft.com/learn/paths/introduction-python-space-exploration-nasa/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/nasa-python/nasa-python1.png" alt="Python NASA module" aria-hidden="true" class="thumb"/></a>
</a>
</div><br/>
<div class="module">
<div class="info">
<a href="https://docs.microsoft.com/en-us/learn/paths/classify-space-rocks-artificial-intelligence-nasa/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Use Artificial Intelligence to classify space rocks</h2></a>
<a href="https://docs.microsoft.com/learn/paths/classify-space-rocks-artificial-intelligence-nasa/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Use Artificial Intelligence to classify space rocks</h2></a>
</div>
<p class="description">Create an AI model that can classify types of space rock present in a photo.</p>
<a href="https://docs.microsoft.com/en-us/learn/paths/classify-space-rocks-artificial-intelligence-nasa/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/nasa-python/nasa-python2.png" alt="Classifying Python module" aria-hidden="true" class="thumb"/></a>
<a href="https://docs.microsoft.com/learn/paths/classify-space-rocks-artificial-intelligence-nasa/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/nasa-python/nasa-python2.png" alt="Classifying Python module" aria-hidden="true" class="thumb"/></a>
</a>
</div><br/>
<div class="module">
<div class="info">
<a href="https://docs.microsoft.com/en-us/learn/paths/machine-learning-predict-launch-delay-nasa/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Use Machine Learning to predict rocket launches</h2></a>
<a href="https://docs.microsoft.com/learn/paths/machine-learning-predict-launch-delay-nasa/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Use Machine Learning to predict rocket launches</h2></a>
</div>
<p class="description">This will introduce you to the world of machine learning and help you build a simple ML model. </p>
<a href="https://docs.microsoft.com/en-us/learn/paths/machine-learning-predict-launch-delay-nasa/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/nasa-python/nasa-python3.png" alt="ML Python module" aria-hidden="true" class="thumb"/></a>
<a href="https://docs.microsoft.com/learn/paths/machine-learning-predict-launch-delay-nasa/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/nasa-python/nasa-python3.png" alt="ML Python module" aria-hidden="true" class="thumb"/></a>
</a>
</div><br/>

Просмотреть файл

@ -16,9 +16,9 @@ Get a glimpse into the Python programming language with this introductory learni
<div class="module">
<div class="info">
<a href="https://docs.microsoft.com/en-us/learn/paths/explore-space-using-python/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Explore space with Python and Visual Studio Code</h2></a>
<a href="https://docs.microsoft.com/learn/paths/explore-space-using-python/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Explore space with Python and Visual Studio Code</h2></a>
</div>
<p class="description">Plan a moon mission, predict meteor showers, and use artificial intelligence to recognize objects in this learning path inspired by the Netflix film "Over the Moon".</p>
<a href="https://docs.microsoft.com/en-us/learn/paths/explore-space-using-python/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/over-the-moon-python/otm-python.png" alt="Over The Moon module" aria-hidden="true" class="thumb"/></a>
<a href="https://docs.microsoft.com/learn/paths/explore-space-using-python/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/over-the-moon-python/otm-python.png" alt="Over The Moon module" aria-hidden="true" class="thumb"/></a>
</a>
</div><br/>

Просмотреть файл

@ -18,9 +18,9 @@ Get a glimpse into the Python programming language with this introductory learni
<div class="module">
<div class="info">
<a href="https://docs.microsoft.com/en-us/learn/paths/optimize-basketball-games-with-machine-learning/?WT.mc_id=LearnDrG-c9-niner&WT.mc_id=SpaceJam_Learn_-all-cxa"><h2 class="title faux-h3">Use basketball stats to optimize game play with Visual Studio Code</h2></a>
<a href="https://docs.microsoft.com/learn/paths/optimize-basketball-games-with-machine-learning/?WT.mc_id=LearnDrG-c9-niner&WT.mc_id=SpaceJam_Learn_-all-cxa"><h2 class="title faux-h3">Use basketball stats to optimize game play with Visual Studio Code</h2></a>
</div>
<p class="description">Analyze basketball stats and create an app in this learning path inspired by the film "Space Jam: A New Legacy."</p>
<a href="https://docs.microsoft.com/en-us/learn/paths/optimize-basketball-games-with-machine-learning/?WT.mc_id=LearnDrG-c9-niner&WT.mc_id=SpaceJam_Learn_-all-cxa"><img src="/assets/learn/students/spacejam-python/spacejam-python.png" alt="Space Jam module" aria-hidden="true" class="thumb"/></a>
<a href="https://docs.microsoft.com/learn/paths/optimize-basketball-games-with-machine-learning/?WT.mc_id=LearnDrG-c9-niner&WT.mc_id=SpaceJam_Learn_-all-cxa"><img src="/assets/learn/students/spacejam-python/spacejam-python.png" alt="Space Jam module" aria-hidden="true" class="thumb"/></a>
</a>
</div><br/>

Просмотреть файл

@ -15,10 +15,10 @@ Get a glimpse into the Python programming language with this introductory learni
<div class="module">
<div class="info">
<a href="https://docs.microsoft.com/en-us/learn/paths/python-partnership/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Learn Python with Wonder Woman</h2></a>
<a href="https://docs.microsoft.com/learn/paths/python-partnership/?WT.mc_id=python-0000-cxa"><h2 class="title faux-h3">Learn Python with Wonder Woman</h2></a>
</div>
<p class="description">Build a message decoder program and a personality quiz in these lessons inspired by the WONDER WOMAN 1984 film.</p>
<a href="https://docs.microsoft.com/en-us/learn/paths/python-partnership/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/wonder-woman-python/ww-lesson.png" alt="Wonder Woman module" aria-hidden="true" class="thumb"/></a>
<a href="https://docs.microsoft.com/learn/paths/python-partnership/?WT.mc_id=python-0000-cxa"><img src="/assets/learn/students/wonder-woman-python/ww-lesson.png" alt="Wonder Woman module" aria-hidden="true" class="thumb"/></a>
</a>
</div><br/>