diff --git a/microsoft-edge/dev-videos/index.md b/microsoft-edge/dev-videos/index.md index 720f7c909c..6fc545dde5 100644 --- a/microsoft-edge/dev-videos/index.md +++ b/microsoft-edge/dev-videos/index.md @@ -650,7 +650,7 @@ Covers: * The **Console** tool can be in both the top and bottom panels of DevTools. * The **Sources** tool notifies you when sourcemaps can't be loaded. * Clicking a dropdown's triangle icon opens the menu. -* Opening source files in Visual Studio Code integrates with the **Sources** tool. +* Opening source files in Visual Studio Code integrates with the **Sources** tool. Update July 2026: This experiment has been removed. See also: * [What's New in DevTools 96](../devtools/whats-new/2021/11/devtools.md) diff --git a/microsoft-edge/developer/index.yml b/microsoft-edge/developer/index.yml index d2cf357b08..a1d4e8253a 100644 --- a/microsoft-edge/developer/index.yml +++ b/microsoft-edge/developer/index.yml @@ -293,9 +293,6 @@ landingContent: url: ../visual-studio-code/debugger-for-edge.md - linkListType: how-to-guide links: - - text: Opening source files in Visual Studio Code - url: ../devtools/sources/opening-sources-in-vscode.md - - text: Visual Studio for web development url: ../visual-studio/index.md diff --git a/microsoft-edge/devtools/experimental-features/index.md b/microsoft-edge/devtools/experimental-features/index.md index baa167286d..4b46d8ddd5 100644 --- a/microsoft-edge/devtools/experimental-features/index.md +++ b/microsoft-edge/devtools/experimental-features/index.md @@ -412,9 +412,6 @@ When you select a folder to use as your Workspace, selecting any link to a file Any edits that you make in DevTools now change the file on the hard drive and sync live with Visual Studio Code. -See also: -* [Opening source files in Visual Studio Code](../sources/opening-sources-in-vscode.md) - setting up your workspace. - Status: * This checkbox is present in Microsoft Edge Canary 144. * This checkbox is present in Microsoft Edge Stable 142. diff --git a/microsoft-edge/devtools/landing/index.yml b/microsoft-edge/devtools/landing/index.yml index ec9a35fd69..91fe0d6596 100644 --- a/microsoft-edge/devtools/landing/index.yml +++ b/microsoft-edge/devtools/landing/index.yml @@ -218,8 +218,5 @@ landingContent: - text: Microsoft Edge DevTools extension for Visual Studio Code url: ../../visual-studio-code/microsoft-edge-devtools-extension.md # goes directly to main page, in DevTools - - text: Opening source files in Visual Studio Code - url: ../sources/opening-sources-in-vscode.md - - text: Visual Studio for web development url: ../../visual-studio-code/index.md diff --git a/microsoft-edge/devtools/sources/opening-sources-in-vscode.md b/microsoft-edge/devtools/sources/opening-sources-in-vscode.md deleted file mode 100644 index 7a4d986a01..0000000000 --- a/microsoft-edge/devtools/sources/opening-sources-in-vscode.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Opening source files in Visual Studio Code -description: If you work on a local project and you have Microsoft Visual Studio Code installed, you can open files in this one instead of the sources tool and sync changes from the DevTools live to your source files. -author: MSEdgeTeam -ms.author: msedgedevrel -ms.topic: article -ms.service: microsoft-edge -ms.subservice: devtools -ms.date: 07/12/2023 ---- -# Opening source files in Visual Studio Code - -The **Open source files in Visual Studio Code** experiment allows you to use Microsoft Edge DevTools, but then edit your files in Visual Studio Code instead of in the code editor of the DevTools **Sources** tool. - -When you use this experiment, if you use Visual Studio Code and you use DevTools to change your CSS rules, you no longer have to use the code editor in the Sources tool of DevTools. You can simply use the code editor in Visual Studio Code. When you turn on this experiment, -local files will get a different treatment. - - - -## Setting up editing local files in Visual Studio Code - -First, select DevTools > **Settings** > **Experiments** > **Open source files in Visual Studio Code**, and then re-start DevTools. - -With this experiment enabled, suppose that in Microsoft Edge, you go to a local server (such as `http://localhost` or `http://127.0.0.1`), or open a local file. - -![Microsoft Edge with a local file open](./opening-sources-in-vscode-images/local-project.png) - - - -When you open DevTools, you are prompted to identify your root folder. You can opt out by selecting **Close** (`x`) or selecting the `Don't show again` button. You can get more information by selecting the `Learn more` link. - -![Developer Tools showing an information bar asking you to identify your root folder](./opening-sources-in-vscode-images/identify-root-folder.png) - -If you select the **Set root folder** button, the operating system prompts you to navigate to the folder and select it. - -![Picking the location of the root folder using the file manager of your operating system](./opening-sources-in-vscode-images/pick-folder.png) - -After you select a root folder, you need to grant DevTools full access to the folder. Above the toolbar, a prompt with **Allow** or **Deny** buttons asks you whether to grant permission to DevTools to access the folder. - -![DevTools asking to get access to the folder](./opening-sources-in-vscode-images/allow-access.png) - -After you grant permission, the folder you select is added as a Workspace in DevTools, in the **Workspace** tab of the **Sources** tool. This means that any file you edit in DevTools now opens in Microsoft Visual Studio Code instead of in the Sources tool. As an indicator, we show a `linked` icon next to the file name. In this example, we'll select the `base.css` link in the **Styles** tool. - -![Selecting a file link in the Styles tool opens the file in Visual Studio Code](./opening-sources-in-vscode-images/selecting-link.png) - -DevTools opens an instance of Visual Studio Code and shows all the files in the root folder. DevTools also opens the file you've selected, scrolled to the correct line of the CSS selector. - -![Visual Studio Code open with the root folder files and the selected file open](./opening-sources-in-vscode-images/editor-open.png) - -Any changes that you make to the file in DevTools will now be synced to Visual Studio Code. For example, if you change the `background` to be `green` for the styles of the body, the same CSS rule will automatically be added to the `base.css` file in the code editor of Visual Studio Code. - -![Changes to the code in the Styles tool now are reflected in the source code in Visual Studio Code](./opening-sources-in-vscode-images/code-synced.png) - - - -## Changing the workspace settings - -To change the behavior of the **Open source files in Visual Studio Code** experiment, go to the DevTools **Settings** page by clicking **Settings** (the gear icon) or pressing **Shift+?**, and then select the **Workspace** page: - -![The settings pane of the workspace showing several options](./opening-sources-in-vscode-images/workspace-settings.png) - -The **Settings** > **Workspace** page lists your workspaces, along with the following configuration options: - -| UI control | Description | -|---|---| -| **Open source files in Visual Studio Code** checkbox | Sets whether to open source files in Visual Studio Code. | -| **Save DevTools changes to disk** checkbox | Automatically saves DevTools changes to disk. | -| **Folder exclude pattern** text box | Automatically excludes folders from a workspace folder. | -| **Add** button next to **Excluded folders** | Excludes a folder from a specific workspace. | -| **Add folder** button | Adds an additional workspace. | diff --git a/microsoft-edge/devtools/whats-new/2021/11/devtools.md b/microsoft-edge/devtools/whats-new/2021/11/devtools.md index 0baa79934e..209e734bd3 100644 --- a/microsoft-edge/devtools/whats-new/2021/11/devtools.md +++ b/microsoft-edge/devtools/whats-new/2021/11/devtools.md @@ -129,6 +129,8 @@ See also: +Update Jul. 2026: This experiment has been removed. + In previous versions of Microsoft Edge, turning on the **Open source files in Visual Studio Code** experiment had unexpected behavior when you had already been using the **Sources** tool in DevTools. Setting breakpoints would direct you to Visual Studio Code or to documentation to configure the experiment correctly. In Microsoft Edge version 96, the **Open source files in Visual Studio Code** experiment now integrates better with the **Sources** tool. @@ -139,9 +141,6 @@ In Microsoft Edge version 96, the **Open source files in Visual Studio Code** ex * As with earlier versions of Microsoft Edge, if the **Sources** tool isn't open in DevTools and you then turn on the **Open source files in Visual Studio Code** experiment, setting breakpoints or opening files from tools other than the **Sources** tool opens the file in Visual Studio Code. -See also: -* [Opening source files in Visual Studio Code](../../../sources/opening-sources-in-vscode.md) - how DevTools integrates with Visual Studio Code. - ## Selecting the dropdown triangle icon in the DevTools UI now opens the menu diff --git a/microsoft-edge/index.yml b/microsoft-edge/index.yml index c0fa952f1e..44eed6b2c1 100644 --- a/microsoft-edge/index.yml +++ b/microsoft-edge/index.yml @@ -463,10 +463,6 @@ conceptualContent: url: ./visual-studio-code/microsoft-edge-devtools-extension.md # goes directly to main page, in DevTools itemType: how-to-guide - - text: Opening source files in Visual Studio Code - url: ./devtools/sources/opening-sources-in-vscode.md - itemType: how-to-guide - - text: Debug Microsoft Edge in Visual Studio Code url: ./visual-studio-code/debugger-for-edge.md itemType: overview diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index 65acf68a73..4ea1afff6c 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -1976,9 +1976,6 @@ - name: DevTools extension for Visual Studio Code # aux jump page href: ./visual-studio-code/microsoft-edge-devtools-extension/devtools-extension.md - - name: Opening source files in Visual Studio Code - href: ./devtools/sources/opening-sources-in-vscode.md - - name: Debug Microsoft Edge in Visual Studio Code href: ./visual-studio-code/debugger-for-edge.md diff --git a/microsoft-edge/visual-studio-code/ide-integration.md b/microsoft-edge/visual-studio-code/ide-integration.md index 7e04c232f6..51afe7a548 100644 --- a/microsoft-edge/visual-studio-code/ide-integration.md +++ b/microsoft-edge/visual-studio-code/ide-integration.md @@ -29,17 +29,6 @@ Without leaving Visual Studio Code, use Microsoft Edge DevTools to attach to an See [Microsoft Edge DevTools extension for Visual Studio Code](microsoft-edge-devtools-extension.md). - -## Open source files in Visual Studio Code - -The **Open source files in Visual Studio Code** experiment allows you to use Microsoft Edge DevTools, but then edit your files in Visual Studio Code instead of in the code editor of the DevTools **Sources** tool. - -When you use this experiment, if you use Visual Studio Code and you use DevTools to change your CSS rules, you no longer have to use the code editor in the Sources tool of DevTools. You can simply use the code editor in Visual Studio Code. When you turn on this experiment, -local files will get a different treatment. - -See [Opening source files in Visual Studio Code](../devtools/sources/opening-sources-in-vscode.md). - - ## Debug Microsoft Edge in Visual Studio Code diff --git a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md index f418219de3..1828edeb3e 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -45,7 +45,6 @@ The DevTools extension for Visual Studio Code is one of several different ways t |---|---|---| | Browser > DevTools > **Elements** tool | You have to manually copy changes from DevTools into your source files. | [Inspect, edit, and debug HTML and CSS with the Elements tool](../devtools/elements-tool/elements-tool.md)| | Browser > DevTools > **Sources** tool > **Workspace** tab to define a **Workspace** | Always saves the changes, which could discourage experimenting | [Select a local Workspace, to use DevTools to edit files and save changes to disk](../devtools/sources/index.md) in _Sources tool overview_ | -| Browser > DevTools > **Settings** > **Experiments** > **Open source files in Visual Studio Code** | Always saves the changes, which could discourage experimenting | Experiments > [Opening source files in Visual Studio Code](../devtools/sources/opening-sources-in-vscode.md). | | Microsoft Edge DevTools extension for Visual Studio Code | Automatically opens and edits the CSS source file but doesn't automatically save the file, so you get to choose whether to save the edits. | The present article. | diff --git a/redirects/.openpublishing.redirection.devtools.json b/redirects/.openpublishing.redirection.devtools.json index 4e0b5c4ee9..e5cbf6a36f 100644 --- a/redirects/.openpublishing.redirection.devtools.json +++ b/redirects/.openpublishing.redirection.devtools.json @@ -1186,7 +1186,12 @@ // devtools articles outside of devtools toc bucket { "source_path": "../microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode.md", - "redirect_url": "/microsoft-edge/devtools/sources/opening-sources-in-vscode", + "redirect_url": "/microsoft-edge/visual-studio-code/ide-integration", + "redirect_document_id": false + }, + { + "source_path": "../microsoft-edge/devtools/sources/opening-sources-in-vscode.md", + "redirect_url": "/microsoft-edge/visual-studio-code/ide-integration", "redirect_document_id": false }, {