diff --git a/ThirdPartyNotices b/ThirdPartyNotices deleted file mode 100644 index 59c52f39d4..0000000000 --- a/ThirdPartyNotices +++ /dev/null @@ -1,15 +0,0 @@ -##Legal Notices -Microsoft and any contributors grant you a license to the Microsoft documentation and other content -in this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode), -see the [LICENSE](LICENSE) file, and grant you a license to any code in the repository under the [MIT License](https://opensource.org/licenses/MIT), see the -[LICENSE-CODE](LICENSE-CODE) file. - -Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation -may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries. -The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks. -Microsoft's general trademark guidelines can be found at https://go.microsoft.com/fwlink/?LinkID=254653. - -Privacy information can be found at https://privacy.microsoft.com - -Microsoft and any contributors reserve all others rights, whether under their respective copyrights, patents, -or trademarks, whether by implication, estoppel or otherwise. \ No newline at end of file diff --git a/ThirdPartyNotices.md b/ThirdPartyNotices.md new file mode 100644 index 0000000000..22b43776ac --- /dev/null +++ b/ThirdPartyNotices.md @@ -0,0 +1,9 @@ +## Legal Notices + +Microsoft and any contributors grant you a license to the Microsoft documentation and other content in this repository under the [Creative Commons Attribution 4.0 International Public License](https://creativecommons.org/licenses/by/4.0/legalcode), see the [LICENSE](LICENSE) file, and grant you a license to any code in the repository under the [MIT License](https://opensource.org/licenses/MIT), see the [LICENSE-CODE](LICENSE-CODE) file. + +Microsoft, Windows, Microsoft Azure and/or other Microsoft products and services referenced in the documentation may be either trademarks or registered trademarks of Microsoft in the United States and/or other countries. The licenses for this project do not grant you rights to use any Microsoft names, logos, or trademarks. You can find Microsoft general trademark guidelines at [Microsoft Trademark and Brand Guidelines](https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks). + +For privacy information, see [Privacy at Microsoft](https://privacy.microsoft.com). + +Microsoft and any contributors reserve all others rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise. diff --git a/microsoft-edge/devtools-guide-chromium/about-tools.md b/microsoft-edge/devtools-guide-chromium/about-tools.md index 28d7522afc..6b40f66c8d 100644 --- a/microsoft-edge/devtools-guide-chromium/about-tools.md +++ b/microsoft-edge/devtools-guide-chromium/about-tools.md @@ -16,7 +16,7 @@ DevTools provides more than 30 tools, consisting of _Default tools_ and _More to ## Default tools -By default, the following tools are listed in the **Activity bar** at the top of DevTools: +By default, the following tools are listed in the **Activity Bar** at the top of DevTools: * ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool** * ![Device Emulation icon](./about-tools-images/device-emulation-icon-light-theme.png) **Device Emulation** @@ -54,7 +54,7 @@ The **Elements**, **Console**, and **Sources** tools (tabs) are permanent, in th ## More tools -The **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Activity bar** lists additional, optional tools that can be added to the **Activity bar**. +The **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Activity Bar** lists additional, optional tools that can be added to the **Activity Bar**. There's also a **More tools** (![More Tools icon](./about-tools-images/more-tools-icon-light-theme.png)) button on the **Quick View** toolbar at the bottom of DevTools. To show or hide the **Quick View** panel, press **Esc**; or click **Customize and control DevTools** (**...**) in the upper right, and then click **Toggle Quick View panel**. diff --git a/microsoft-edge/devtools-guide-chromium/changes/changes-tool.md b/microsoft-edge/devtools-guide-chromium/changes/changes-tool.md index 8192f00920..f69453b5e7 100644 --- a/microsoft-edge/devtools-guide-chromium/changes/changes-tool.md +++ b/microsoft-edge/devtools-guide-chromium/changes/changes-tool.md @@ -9,8 +9,11 @@ ms.subservice: devtools ms.date: 11/30/2023 --- # Track changes to files using the Changes tool + -The **Changes** tool tracks any changes that you've made to CSS or JavaScript in DevTools. It shows you what changes to make to your actual source files after you've successfully used DevTools to modify a copy of your webpage files that are sent from the server: +The **Changes** tool tracks any changes that you've made to CSS, JavaScript, or HTML files in DevTools. The **Changes** tool is empty until you open files and edit them by using the **Sources** tool, **Quick source** tool, or **Elements** tool's **Styles** pane. + +The **Changes** tool shows you what changes to make to your actual source files after you've successfully used DevTools to modify a copy of your webpage files that are sent from the server: ![The Changes tool showing two files that have been modified, and the modifications of the selected file](changes-tool-images/changes-tool-open.png) @@ -24,7 +27,7 @@ On the **Activity Bar** or **Quick View** toolbar, click the **More tools** (![T ![The 'More tools' (+) icon and menu in the Activity Bar, with the Changes tool selected](changes-tool-images/changes-tool-via-plus-menu.png) -The **Changes** tool opens in the **Activity Bar** or in the **Quick View**, depending on which toolbar you used. +The **Changes** tool opens in the **Activity Bar** or in the **Quick View** panel, depending on which toolbar you used. @@ -71,7 +74,7 @@ Clicking a modified line in the **Changes** tool opens the file in the [Sources] -## Undo all changes +## Revert changes To undo all changes, at the bottom of the **Changes** tool, click the **Revert all changes to current file** (![The Revert all changes to current file icon](./changes-tool-images/revert-icon.png)) button: @@ -86,3 +89,23 @@ When you've made a change to a minified file, the **Changes** tool enables you t ![Displaying a long line of code](changes-tool-images/changes.png) To scroll horizontally, click the horizontal scrollbar, or press the left or right arrow keys. + + + +## Troubleshooting + +If green circles stop appearing on files in DevTools, such as in the **Workspace** tab; or if the **Changes** tool doesn't show expected changes: + +* With DevTools displayed, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Empty cache and hard refresh**. + + + + + +## See also + +* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) +* [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md) - **Sources** tool > **Overrides** tab +* [Sources tool overview](../sources/index.md) + * [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md) diff --git a/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md b/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md index 54d0dd4c98..ab11c5ebb5 100644 --- a/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md +++ b/microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md @@ -143,7 +143,7 @@ DevTools doesn't cache source maps when the domain name is `localhost`. This me #### Open the Crash analyzer tool -The **Crash analyzer** tool is a Quick View tool; by default, it opens in the **Quick View** panel, so that you can use it alongside the other tools that are open in the **Activity bar**. +The **Crash analyzer** tool is a Quick View tool; by default, it opens in the **Quick View** panel, so that you can use it alongside the other tools that are open in the **Activity Bar**. @@ -177,7 +177,7 @@ If you want to test the **Crash analyzer** tool but you don't have a stack trace 1. To open DevTools, right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. -1. In DevTools, on the **Activity bar**, click **Console** (![Console icon](./index-images/console-icon.png)). The **Console** tool opens. +1. In DevTools, on the **Activity Bar**, click **Console** (![Console icon](./index-images/console-icon.png)). The **Console** tool opens. 1. Select the error stack trace that's displayed in the **Console** tool and copy it. diff --git a/microsoft-edge/devtools-guide-chromium/elements-tool/elements-tool.md b/microsoft-edge/devtools-guide-chromium/elements-tool/elements-tool.md index ea0e4e7957..7bee69f086 100644 --- a/microsoft-edge/devtools-guide-chromium/elements-tool/elements-tool.md +++ b/microsoft-edge/devtools-guide-chromium/elements-tool/elements-tool.md @@ -26,3 +26,4 @@ Debug your HTML using the DOM tree, and inspect and work on the CSS for your web * [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md) * [Style editing for CSS-in-JS frameworks](../css/css-in-js.md) * [Get started viewing and changing the DOM](../dom/index.md) +* [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a web page. diff --git a/microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md b/microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md index b177cb1565..578107107a 100644 --- a/microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md +++ b/microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md @@ -23,6 +23,11 @@ ms.date: 05/04/2021 limitations under the License. --> # Add content scripts to the Ignore List + + When you use the **Sources** tool to step through code, sometimes you pause on code that you don't recognize and don't want to step through, such as code for a Microsoft Edge extension that's installed. To avoid pausing on extension code: @@ -40,6 +45,7 @@ To avoid pausing on extension code: ## See also * [Step 4: Step through the code](../index.md#step-4-step-through-the-code) in _Get started debugging JavaScript_ +* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs. diff --git a/microsoft-edge/devtools-guide-chromium/javascript/overrides.md b/microsoft-edge/devtools-guide-chromium/javascript/overrides.md index 1b85c63398..a41894c7bd 100644 --- a/microsoft-edge/devtools-guide-chromium/javascript/overrides.md +++ b/microsoft-edge/devtools-guide-chromium/javascript/overrides.md @@ -9,10 +9,15 @@ ms.subservice: devtools ms.date: 09/25/2023 --- # Override webpage resources with local copies (Overrides tab) + Sometimes you need to try out some possible fixes for a webpage, but you don't have access to the source files, or changing the page requires a slow and complex build process. You can debug and fix all kind of problems in DevTools. But the changes don't persist; after you refresh the local file, all your work is gone. The Overrides feature in the [Sources](../sources/index.md) tool helps you solve this problem. -You can now take a resource of the current webpage and store it locally. When you refresh the webpage, the browser doesn't load the resource from the server; instead, the browser replaces the server resource with your local copy of the resource. +You can take a resource of the current webpage and store it locally. When you refresh the webpage, the browser doesn't load the resource from the server; instead, the browser replaces the server resource with your local copy of the resource. The overrides that you create are saved across reloads. + +The overrides feature is not intended for mapping to your source files. + +When you set up a folder for local overrides the first time, that folder should be empty. DevTools then creates all of the folders and sub-folders that it needs to store overrides within it. diff --git a/microsoft-edge/devtools-guide-chromium/overview.md b/microsoft-edge/devtools-guide-chromium/overview.md index 25a2d151ca..bb6d17b588 100644 --- a/microsoft-edge/devtools-guide-chromium/overview.md +++ b/microsoft-edge/devtools-guide-chromium/overview.md @@ -618,21 +618,22 @@ See also: -* [About the list of tools](about-tools.md) -* [Inspect and change the current webpage](dom/index.md) -* [Emulate how your product behaves on different devices](device-mode/index.md) -* [Inspect, tweak, and change the styles of elements](inspect-styles/edit-fonts.md) -* [Debug your JavaScript](javascript/index.md) -* [Live console](console/index.md) -* [Accessibility, performance, compatibility, and security issues](issues/index.md) -* [Inspect the network traffic](network/index.md) -* [Inspect where the browser stored content](storage/sessionstorage.md) -* [Evaluate the performance](evaluate-performance/index.md) -* [Memory problems](memory-problems/index.md) -* [Rendering issues](rendering-tools/index.md) -* [Use a development environment](sources/index.md) -* [Sync changes in DevTools with the file system](workspaces/index.md) -* [Override files from the web](javascript/overrides.md) +* [About the list of tools](./about-tools.md) +* [Inspect and change the current webpage](./dom/index.md) +* [Emulate how your product behaves on different devices](./device-mode/index.md) +* [Inspect, tweak, and change the styles of elements](./inspect-styles/edit-fonts.md) +* [Debug your JavaScript](./javascript/index.md) +* [Live console](./console/index.md) +* [Accessibility, performance, compatibility, and security issues](./issues/index.md) +* [Inspect the network traffic](./network/index.md) +* [Inspect where the browser stored content](./storage/sessionstorage.md) +* [Evaluate the performance](./evaluate-performance/index.md) +* [Memory problems](./memory-problems/index.md) +* [Rendering issues](./rendering-tools/index.md) +* [Use a development environment](./sources/index.md) +* [Sync changes in DevTools with the file system](./workspaces/index.md) +* [Override files from the web](./javascript/overrides.md) +* [Your first website](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) (MDN) - How to use HTML, CSS, and JavaScript to build a web page. diff --git a/microsoft-edge/devtools-guide-chromium/performance/reference.md b/microsoft-edge/devtools-guide-chromium/performance/reference.md index c6fe844113..b3346e20e7 100644 --- a/microsoft-edge/devtools-guide-chromium/performance/reference.md +++ b/microsoft-edge/devtools-guide-chromium/performance/reference.md @@ -99,7 +99,7 @@ The images in this page show DevTools undocked into its own, dedicated window. T To use the sections in this page, open the **Performance** tool in DevTools: diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/clone-demos-repo.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/clone-demos-repo.png new file mode 100644 index 0000000000..b8f63c4895 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/clone-demos-repo.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/demo-to-do.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/demo-to-do.png new file mode 100644 index 0000000000..0f7dc17fc8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/demo-to-do.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/edited-js-file.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/edited-js-file.png new file mode 100644 index 0000000000..c314f3f8c1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/edited-js-file.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/elements-tool-icon.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/elements-tool-icon.png new file mode 100644 index 0000000000..35a6cdb6b9 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/elements-tool-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/file-displayed-in-quick-source-2.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/file-displayed-in-quick-source-2.png new file mode 100644 index 0000000000..cea50c964f Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/file-displayed-in-quick-source-2.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/open-file-command-menu.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/open-file-command-menu.png new file mode 100644 index 0000000000..3a8233423b Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/open-file-command-menu.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/quick-source-tool.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/quick-source-tool.png new file mode 100644 index 0000000000..79b2328c84 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/quick-source-tool.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/quick-source-with-js-file.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/quick-source-with-js-file.png new file mode 100644 index 0000000000..e9c2ba9ddb Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/quick-source-with-js-file.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/sources-icon.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/sources-icon.png new file mode 100644 index 0000000000..587e3b2172 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/sources-icon.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/sources-tool-with-file-selected.png b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/sources-tool-with-file-selected.png new file mode 100644 index 0000000000..92286e79d8 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool-images/sources-tool-with-file-selected.png differ diff --git a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md index 50e4bf5eae..b05afb4f6b 100644 --- a/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md +++ b/microsoft-edge/devtools-guide-chromium/quick-source/quick-source-tool.md @@ -6,14 +6,288 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 01/20/2022 +ms.date: 03/07/2025 --- # Display or edit source files using the Quick source tool + + -Use the **Quick source** tool to display or edit source files when using a tool other than the **Sources** tool. +Use the **Quick source** tool to display or edit source files at the same time as displaying a tool other than the **Sources** tool. The **Quick source** tool always displays the same files that are open in the **Sources** tool. + +![The Quick source tool](./quick-source-tool-images/quick-source-tool.png) The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. Use the **Quick source** tool, which by default opens in the **Quick View** panel at the bottom of DevTools. -See: -* [Displaying source files when using a different tool](../sources/index.md#displaying-source-files-when-using-a-different-tool) in _Sources tool overview_ -* [Step 4: Save a JavaScript change to disk](../workspaces/index.md#edit-javascript-and-save-changes-to-the-source-file) in _Edit files with Workspaces (Filesystem tab)_ + + +#### Use the Quick source tool in conjunction with the Sources tool + +To display the **Quick source** tool in **Quick View** at the bottom of DevTools, a tool other than the **Sources** tool must be open in the **Activity Bar** at the top of DevTools. + +The **Quick source** tool provides an alternative display of the files that are open in the **Sources** tool. The **Quick source** tool has a subset of features. For full features, use the **Sources** tool. + +If you open or close a file in one tool, the file is opened or closed in the other tool. In both tools, there's a tab for each open file. + + + +## Edit local source files in DevTools by selecting a Workspace folder + +This is an end-to-end tutorial of all steps to demonstrate the **Quick source** tool, by using the ToDo web app in the **MicrosoftEdge / Demos** repo. + +By selecting a local folder as a **Workspace** in the **Sources** tool, you can then edit files from within the **Quick source** tool at the same time as displaying a different tool, and have those edits be saved to your local drive. This way, you can edit files in the **Quick source** tool while using another tool, such as **Elements** or **Network**, and have your edits be saved to the corresponding source file on your local drive. + +To edit source files in the **Quick source** tool, you'll do the following: + +1. Have access to the webpage source files locally, such as a cloned repo. + +1. In the **Workspace** tab in the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, add a local folder of source files. + +1. In the **Workspace** tab, open a file, such as a `.js` file. + +1. In the **Activity Bar**, select a tool other than the **Sources** tool, such as the **Elements** tool. + +1. In the **Quick View** panel at the bottom of DevTools, open the **Quick source** tool. The opened `.js` file is shown in a streamlined editor, and the **Elements** tool is still displayed. + +These steps are detailed in the tutorial below. + + + +## Have local source files, such as a cloned repo + +To use the **Quick source** tool to save changes locally, you must have local source files that match the web server files. Make sure there are source files on your local drive, that match the transient files that are returned by the web server. + +For example, if not done already, clone the **MicrosoftEdge / Demos** repo to your local drive, as follows: + +1. If not done already, [Download git](https://git-scm.com/downloads) and install it. + +1. If not done already, install an up-to-date version of Node.js and npm from [Node.js](https://nodejs.org). + +1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab. + +1. Click the **Code** drop-down button. + +1. Click the **Copy url to clipboard** button. + + ![The Code button of the Demos repo to get the web URL](./quick-source-tool-images/clone-demos-repo.png) + + The URL is copied to the clipboard: `https://github.com/MicrosoftEdge/Demos.git` + + Or, if you have GitHub Desktop installed, click **Open with GitHub Desktop** to clone the repo, and skip the command prompt step below. + + Or, you can use Visual Studio Code's **Source Control** pane to clone the repo, and skip the command prompt step below. + +1. Assuming you have git installed, open a command prompt. + +1. Clone the repo to your local drive, entering the URL string that you copied from the GitHub repo. If you use a command prompt: + + ```Shell + # example location where the repo directory will be added: + cd ~/GitHub + git clone https://github.com/MicrosoftEdge/Demos.git + ``` + + For details about cloning a repo, see: + * [Clone the Edge Demos repo to your drive](../sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. + * [Clone the WebView2Samples repo](../../webview2/how-to/machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. Shows a different sample repo, but shows steps for several tools. + * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs. + +Now you have a local folder of source files (such as `/demo-to-do/`) that match the files on the web server. + +Continue with the next section. + + + +## Start a localhost server + +1. Go to a command prompt, such as the git bash shell, or the Terminal pane in Microsoft Visual Studio Code. + +1. Go to the cloned `/demo-to-do/` directory, such as `C:\Users\localAccount\GitHub\Demos\demo-to-do\`. + + If you use the git bash shell, it's a UNIX shell, so even on Windows, you need to wrap a directory path that has backslashes in quotes, or else use forward slashes rather than backslashes. + +1. Create a working branch named "test" and switch to it (to avoid altering the demo's files in the "main" branch): + + ```Shell + git checkout -b test + ``` + + That's equivalent to: + + ```Shell + git branch test + git switch test + ``` + +1. Run one of the following commands, to start the web server: + + ```bash + # Node.js option + cd ~/GitHub/demos/demo-to-do + npx http-server # Node.js + ``` + + For more information and options, see [Start the server (npx http-server)](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#start-the-server-npx-http-server) in _Installing the DevTools extension for Visual Studio Code_. + + ``` bash + # Python 2 option + cd ~/GitHub/demos/demo-to-do + python -m SimpleHTTPServer # Python 2 + ``` + + ``` bash + # Python 3 option + cd ~/GitHub/demos/demo-to-do + python -m http.server # Python 3 + ``` + +1. Open a tab in Microsoft Edge, and go to the locally hosted version of the site. You should be able to access it by using `localhost:8080`: + + ![The DevTools TODO app demo](./quick-source-tool-images/demo-to-do.png) + + Another common equivalent URL is `http://0.0.0.0:8080`. The default port number for the Python server option is `8000`. The exact [port number](https://wikipedia.org/wiki/Port_(computer_networking)#Use_in_URLs) might be different. + + The **DevTools Workspaces Demo** webpage opens. + +See also: +* [Running a simple local HTTP server](https://developer.mozilla.org/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) in _How do you set up a local testing server?_ at MDN - shows Python. + + +Continue with the next section. + + + +## Select a local folder of source files as the Workspace + +1. Continuing from above, right-click the demo webpage and then select **Inspect**. + + DevTools opens. + +1. In the **Activity Bar** at the top of DevTools, select the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, select the **Workspace** tab (grouped with the **Page** tab), and then in the **Workspace** tab, click the **Add folder** button. + + The **Select Folder** dialog opens. + +1. Navigate to a folder, such as `C:\Users\localAccount\GitHub\Demos\demo-to-do`, and then click the **Select Folder** button. + + At the top of DevTools, a message reads **DevTools requests full access to \**. + +1. Click the **Allow** button. + + The tree of `demo-to-do` files appears in the **Workspace** tab of the **Sources** tool. The HTML, JS, and CSS files have a green "mapped" dot. + +1. In the **Workspace** tab, expand the file tree, and then click one or more files, such as `to-do.js`. + + The file opens in the **Sources** tool: + + ![The Sources tool with a file selected](./quick-source-tool-images/sources-tool-with-file-selected.png) + + + +## Open the Quick source tool and edit a file + +Suppose you want to continue viewing the **Elements** tool, but you want to simultaneously view and edit the source files that were opened via the **Sources** tool. + +1. Continuing from above, in the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** (![The Sources tool icon](./quick-source-tool-images/sources-icon.png)) tool, such as the **Elements** (![The Elements tool icon](./quick-source-tool-images/elements-tool-icon.png)) tool. + +1. If the **Quick View** toolbar isn't shown at the bottom of DevTools, press **Esc**. + +1. In the **Quick View** toolbar at the bottom of DevTools, click the **More tools** button, and then select **Quick source**. + + The **Quick source** tool opens in **Quick View** at the bottom of DevTools: + + ![The Quick source tool, containing the opened .js file](./quick-source-tool-images/quick-source-with-js-file.png) + + `todo.js` is displayed, because that file is open in the **Sources** tool. + +1. In the demo To Do webpage, delete any tasks. + +1. Click the **Quick source** panel, and then press **Ctrl+F**. + + In the **Quick source** tool, the **Find** UI appears. + +1. Enter **no tasks**, and then press **Enter**. + +1. In the line of code, change `no tasks` to `0 tasks`. + + An asterisk appears on the file name tab. + +1. Press **Ctrl+S**. + + The asterisk is removed from the file name tab. + +1. Refresh the demo webpage (**Ctrl+R**). + +1. If the rendered webpage doesn't change from "No" to "0", and there's no longer a green "mapped" dot on the JS file name tab, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). + + The rendered webpage changes from "No" to "0", and there's a green "mapped" dot on the JS file name tab. + + ![An edited .js file in the Quick source tool, with refreshed demo webpage](./quick-source-tool-images/edited-js-file.png) + +Now, when you edit the folder's files in DevTools, the edits are not only made to the transient file that's returned by the server, but are also saved to the source files on your local drive. You can edit the file from within the **Quick source** tool at the same time as displaying another tool (or from within the **Sources** tool). + +This is the end of the tutorial steps. + +See also: +* [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](../sources/index.md#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk) in _Sources tool overview_. +* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) + * [Step 6: Save a JavaScript change to disk](../workspaces/workspace-tutorial.md#step-6-save-a-javascript-change-to-disk) in _Workspace tutorial (Sources tool Workspace tab)_ + + + +## Open a file by using the Command Menu + +Opening a file by using the **Command Menu** opens that file in both the **Quick source** tool and **Sources** tool. + + +To open the **Command Menu**, do any of the following: + +* Select **Customize and control DevTools** > **Run command**. + +* Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). + +* Click the **Run command** link in the empty **Quick source** tool (or **Sources** tool). + + +To open a file by using the **Open File** prompt of the **Command Menu**, do any of the following: + +* Select **Sources tool** > **More options** (next to the **Page** tab) > **Open file**. + +* Select **Customize and control DevTools** > **Open file**. + +* Press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS). + +* When the **Quick source** tool (or **Sources** tool) is empty, click the **Open file** link in the instructions in the tool: + + ![The Open file Command Menu](./quick-source-tool-images/open-file-command-menu.png) + + The **Open File** prompt of the **Command Menu** is displayed. + + To display the **Open file** link in the instructions in the panel, you might need to scroll down, or drag the **Quick View** divider up to make the **Quick View** panel taller. + + + +## Keyboard shortcuts in the Quick source tool + +The **Quick source** tool has a streamlined UI. Use these keyboard shortcuts. + +* **Ctrl+F** - Find. + +* **Ctrl+S** - Save. If there's no longer a green "mapped" dot on the HTML, JS, or CSS file name, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). + +* **Ctrl+P** - Open a file by using the **Command Menu**. This is the same as going to the **Sources** tool and then clicking a file in the **Workspace** tab. + + + +## Close a file + +To close a file, click the **x** button in the file's tab. + +The file is closed in the **Quick source** tool and **Sources** tool. + + + +## See also + +* [Sources tool overview](../sources/index.md) + * [Quick source tool, to display source files when using a different tool](../sources/index.md#quick-source-tool-to-display-source-files-when-using-a-different-tool) in _Sources tool overview_ + * [Track changes to files using the Changes tool](../changes/changes-tool.md) diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/devtools-requests-access.png b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/devtools-requests-access.png index 8ecb140c93..cc240bf2a1 100644 Binary files a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/devtools-requests-access.png and b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/devtools-requests-access.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/modified-demo-to-do-before-save.png b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/modified-demo-to-do-before-save.png index f787150522..4afa9a086f 100644 Binary files a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/modified-demo-to-do-before-save.png and b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/modified-demo-to-do-before-save.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/server-started-from-a-demo-dir.png b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/server-started-from-a-demo-dir.png new file mode 100644 index 0000000000..344af08979 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/server-started-from-a-demo-dir.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/server-started-from-demos-dir.png b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/server-started-from-demos-dir.png new file mode 100644 index 0000000000..48caf9d423 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/server-started-from-demos-dir.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/workspace-localhost.png b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/workspace-localhost.png new file mode 100644 index 0000000000..35b99e2589 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code-images/workspace-localhost.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md index 72f021f684..9f155ba567 100644 --- a/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md +++ b/microsoft-edge/devtools-guide-chromium/sample-code/sample-code.md @@ -61,7 +61,7 @@ last sync'd April 16, 2024 | Inspect Network Activity | Used for [Inspect network activity](../network/index.md). | [/network-tutorial/](https://github.com/MicrosoftEdge/Demos/tree/main/network-tutorial) | [Inspect Network Activity Demo](https://microsoftedge.github.io/Demos/network-tutorial/) | | Photo gallery | Used for [The truth about CSS selector performance](https://blogs.windows.com/msedgedev/2023/01/17/the-truth-about-css-selector-performance/). | [/photo-gallery/](https://github.com/MicrosoftEdge/Demos/tree/main/photo-gallery) | [Photo Gallery](https://microsoftedge.github.io/Demos/photo-gallery/) | | Slow Calendar | Simple calendar demo app to test various DevTools features such as the **Performance** tool and source map support. | [/slow-calendar/](https://github.com/MicrosoftEdge/Demos/tree/main/slow-calendar) | [Slow Calendar](https://microsoftedge.github.io/Demos/slow-calendar/public) | -| Workspaces | Use for [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) | +| Workspaces | Used for [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md), in the **Sources** tool. | [/workspaces/](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces) | [DevTools Workspaces Demo](https://microsoftedge.github.io/Demos/workspaces/) | A few of these samples are shown below. @@ -92,6 +92,7 @@ This Animal Shelter demo webpage is useful for exploring various DevTools featur ![The 'Demo webpage with accessibility issues'](./sample-code-images/demo-page-with-accessibility-issues.png) + #### Articles These articles walk you through using this demo webpage: @@ -101,6 +102,7 @@ These articles walk you through using this demo webpage: * [Accessibility-testing features](../accessibility/reference.md) - A list of accessibility testing features of DevTools, with links to several articles that use the "Demo webpage with accessibility issues". + #### Source code repo This is the source code repo and its directory which stores the files for this demo webpage: @@ -130,6 +132,7 @@ This demo webpage is useful for exploring the **Sources** tool, especially the J ![The 'Get started Debugging JavaScript with DevTools' demo webpage](./sample-code-images/using-debug-js-demo-page.png) + #### Articles These articles or article sections walk you through using this demo webpage: @@ -139,6 +142,7 @@ These articles or article sections walk you through using this demo webpage: * [Get started debugging JavaScript](../javascript/index.md) - A more in-depth walkthrough of using the demo webpage along with the debugger, demonstrating various features of the debugger, and setting different kinds of breakpoints. + #### Source code repo This is the source code repo and its directory which stores the files for this demo webpage: @@ -153,44 +157,47 @@ This is the source code repo and its directory which stores the files for this d -## Download or clone the Demos repo +## Clone the Edge Demos repo to your drive -The Demos repo is useful for following the various DevTools documentation. +The **Microsoft Edge / Demos** repo is useful for following the various DevTools documentation. You can clone the repo, start a localhost web server within a folder of the cloned repo, and then edit the demo files directly within DevTools, or within an editor such as VS Code. +Cloning the repo is recommended over downloading the repo, so that you can pull updates of the repo and fully participate in the repo. -#### Download the Demos repo +To clone the **MicrosoftEdge / Demos** repo to your local drive: -To download the Demos repo: +1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab. -1. In a new window or tab, go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos#readme) repo. +1. Click the **Code** drop-down button, and then click the **Copy url to clipboard** button. -1. Click the **Code** dropdown button, and then click **Download ZIP**. + The URL is copied to the clipboard: `https://github.com/MicrosoftEdge/Demos.git` - The `.zip` file is placed in your download directory. Unzip these webpage source files into a suitable location. + Or, if you have GitHub Desktop installed, click **Open with GitHub Desktop** to clone the repo, and skip the command prompt step below. -To download a single directory of the Demos repo: +1. Open a command prompt, such as git bash. -1. Go to [https://download-directory.github.io/](https://download-directory.github.io/) and then paste the URL [https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do). - - The `.zip` file is placed in your download directory. Unzip these webpage source files into a suitable location. - -See also: -* [Download the WebView2Samples repo](../../webview2/how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. +1. Clone the repo to your local drive, entering the URL string that you copied from the GitHub repo. If you use a command prompt: + ```Shell + # example location where the repo directory will be added: + cd ~/GitHub + cd c:/users/localAccount/GitHub/ # alt format + git clone https://github.com/MicrosoftEdge/Demos.git + ``` -#### Clone the Demos repo +For details about cloning a repo, see: +* [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs. -Cloning a repo enables updating your local copy when the repo is updated. The GitHub UI and various tools support cloning. We'll show cloning by using Visual Studio Code, but you can use many other coding tools, such as GitHub Desktop, Visual Studio, or git bash shell. +Continue with the next section. -To clone the repo: -1. In a new window or tab, go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos#readme) repo. + +#### Clone the Edge Demos repo to your drive by using VS Code -1. If the green **Code** button isn't shown, click **Demos** in the path **Microsoft Edge** / **Demos** in the upper left to go to the main page of the repo. +To clone the **MicrosoftEdge / Demos** repo to your local drive: -1. Click the **Code** dropdown button, and then click the **Copy** button next to the URL **https://github.com/MicrosoftEdge/Demos.git**. You can then paste the URL into git bash or a Visual Studio Code dialog, for example. +1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab. - Or, click the **Code** dropdown button, and then click **Open with Visual Studio** if it appears. A list of **Handler Selector** items is offered, one per Visual Studio instance installed. This option appears only if you're logged in. +1. Click the **Code** dropdown button, and then click **Open with Visual Studio** if it appears. A list of **Handler Selector** items is offered, one per Visual Studio instance installed. This option appears only if you're logged in. ![Cloning the MicrosoftEdge/Demos repo](./sample-code-images/clone-repo.png) @@ -200,7 +207,7 @@ To clone the repo: ![The Clone Repository button in Visual Studio Code](./sample-code-images/clone-repository-button.png) -1. Navigate to your desired path, such as `C:\Users\username\Documents\GitHub` or `Users/username/GitHub`, and then click the **Select Repository Location** button. +1. Navigate to your desired path, such as `C:\Users\localAccount\Documents\GitHub` or `Users/username/GitHub`, and then click the **Select Repository Location** button. 1. The message **Cloning git repository** appears, then you're prompted to open the cloned repository. Click the **Open** button: @@ -215,20 +222,59 @@ See also: * [Clone the WebView2Samples repo](../../webview2/how-to/machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. + +#### Tools that support cloning a repo and git commit/pull/push operations + +Cloning a repo enables updating your local copy when the repo is updated. Many tools support cloning and syncing with a GitHub repo, such as: + +* git commands at a command prompt such as the "git bash" shell. This is the main way that's documented here. + +* GitHub Desktop. Integrates well with GitHub repos and pull requests, and with VS Code. + +* Visual Studio Code. In the Activity Bar on the left, click **Source Control**. + +* Visual Studio > **Git Changes** tab next to the **Solution Explorer** tab in the lower right. + +* The "dot key" version of VS Code within the Edge browser. At Github.com, when viewing a branch or a pull request (PR), press the period (**.**) key. In the Activity Bar on the left, click: + * **Source Control** + * **GitHub Pull Requests** + * **GitHub Pull Request** + + -## Open a demo folder in the Sources tool and edit a file +## Download the Demos repo + +Cloning the repo is recommended over downloading the repo, so that you can pull updates of the repo and fully participate in the repo. + +If you want to just download the Demos repo instead of cloning it: + +1. In a new window or tab, go to the [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos#readme) repo. + +1. Click the **Code** dropdown button, and then click **Download ZIP**. -To use this section, first [Download or clone the Demos repo](#download-or-clone-the-demos-repo). + The `.zip` file is placed in your download directory. Unzip these webpage source files into a suitable location. -To edit local files in the **Sources** tool, you might need to first click the **Allow** button to grant read/write access. To do that, follow the steps in [Opening a folder from the Filesystem (Workspace) tab in the Sources tool](#opening-a-folder-from-the-filesystem-workspace-tab-in-the-sources-tool) below. +To download a single directory of the Demos repo: + +1. Go to [https://download-directory.github.io/](https://download-directory.github.io/) and then paste the URL [https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do](https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do). + + The `.zip` file is placed in your download directory. Unzip these webpage source files into a suitable location. See also: -* [Approaches compared](../../visual-studio-code/microsoft-edge-devtools-extension.md#approaches-compared) in _Microsoft Edge DevTools extension for Visual Studio Code_. Summarizes and compares several options for editing webpage files. +* [Download the WebView2Samples repo](../../webview2/how-to/machine-setup.md#download-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. + + +## Open a demo folder from the Workspace tab in the Sources tool + +To use this section, first do [Clone the Edge Demos repo to your drive](#clone-the-edge-demos-repo-to-your-drive), above. + +See also: +* [Workspace tutorial (Sources tool Workspace tab)](../workspaces/workspace-tutorial.md) +* [Approaches compared](../../visual-studio-code/microsoft-edge-devtools-extension.md#approaches-compared) in _Microsoft Edge DevTools extension for Visual Studio Code_. Summarizes and compares several options for editing webpage files. -#### Opening a folder from the Filesystem (Workspace) tab in the Sources tool -After downloading or cloning the Demos repo: +After cloning (or downloading) the Edge Demos repo: 1. In Microsoft Edge, open a new tab. @@ -236,7 +282,7 @@ After downloading or cloning the Demos repo: 1. In DevTools, on the main toolbar, select the **Sources** tab. If that tab isn't visible, click the **More tabs** (![More tabs icon](./sample-code-images/more-tabs-icon-light-theme.png)) button. -1. In the **Sources** tab, on the left, select the **Filesystem** tab, which is grouped with the **Page** tab. If the **Filesystem** tab isn't displayed, click the **More tabs** (![More tabs button](./sample-code-images/more-tabs-icon-light-theme.png)) button. +1. In the **Sources** tab, on the left, select the **Workspace** tab, which is grouped with the **Page** tab. If the **Workspace** tab isn't displayed, click the **More tabs** (![More tabs button](./sample-code-images/more-tabs-icon-light-theme.png)) button. 1. Click **+ Add folder to workspace**. A folder selection dialog opens. @@ -246,26 +292,79 @@ After downloading or cloning the Demos repo: 1. Above DevTools, your're prompted "DevTools requests full access to (directory)". Click the **Allow** button: - ![DevTools requests access to add a folder to a workspace in the Filesystem tab](./sample-code-images/devtools-requests-access.png) + ![DevTools requests access to add a folder to the Workspace](./sample-code-images/devtools-requests-access.png) -To edit the files, see the editing steps in the next section. + +## Start the localhost server -See also: -* [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md) - to open a local folder in the **Sources** tool of DevTools in the browser. -* [Using the Filesystem tab to define a local Workspace](../sources/index.md#using-the-filesystem-tab-to-define-a-local-workspace) in _Sources tool overview_. +If you start the localhost server from a specific demo folder, such as `\Demos\demo-to-do`, and then go to `localhost:8080` (or simply open the local file such as `C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html` in Microsoft Edge), the specific demo immediately is displayed in the browser. You can then add just the specific demo directory, such as `C:\Users\localAccount\GitHub\Demos\demo-to-do\`, to the **Workspace** tab of the **Sources** tool. You then have full functionality for using DevTools as an IDE, for that specific demo. + +Starting the server from within a specific demo directory: + +``` +$ cd ~/GitHub/Demos/demo-to-do +$ npx http-server +``` + +Example directory to add to the **Workspace** tab of the **Sources** tool: `C:\Users\localAccount\GitHub\Demos\demo-to-do` + +Result of going to `localhost:8080`: + +![Server started from the \Demos\demo-to-do directory](./sample-code-images/server-started-from-a-demo-dir.png) + + + +#### Starting the localhost server from the Demos directory + +If you start the localhost server from within the entire `\Demos\` folder and then go to `localhost:8080`, you can navigate to each demo from within the browser. You can add the entire cloned `/Demos/` folder to the **Workspace** tab of the **Sources** tool. You then have full functionality for using DevTools as an IDE. + +Starting the server from within the entire `\Demos\` directory: + +``` +$ cd ~/GitHub/Demos +$ cd "C:\Users\localAccount\GitHub\Demos" # alt syntax +$ npx http-server +``` + +Example directory to add to the **Workspace** tab of the **Sources** tool: `C:\Users\localAccount\GitHub\Demos` +Result of going to `localhost:8080`: -#### Opening a local HTML file from the browser's File Open dialog and editing it from the Page tab of the Sources tool +![Server started from /demos/ directory instead of a specific demo subdirectory](./sample-code-images/server-started-from-demos-dir.png) -To edit files in the **Sources** tool, before doing the steps in this section, you might need to click the **Allow** button to grant read/write access by following the steps in [Opening a folder from the Filesystem (Workspace) tab in the Sources tool](#opening-a-folder-from-the-filesystem-workspace-tab-in-the-sources-tool) above. + +## Opening a local HTML file from File Explorer and editing it in DevTools + +To edit files in the **Sources** tool, before doing the steps in this section, you might need to click the **Allow** button to grant read/write access by following the steps in [Open a demo folder from the Workspace tab in the Sources tool](#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool), above. + +1. In File Explorer on Windows, or Finder on macOS, select an HTML file from the local copy of the **Demos** repo, such as `C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html`. + + The `.html` file is opened and rendered in Microsoft Edge. + + The Address bar displays: **File | C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html** + + Selecting the URL in the address bar shows the URL format: `file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html` + +1. Right-click the rendered webpage, and then select **Inspect**. + + DevTools opens. + +1. Select the **Sources** tool, and then select the **Page** tab or the **Workspace** tab. + +See also: +* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) - to open a local folder in the **Sources** tool of DevTools in the browser. + + + +#### Opening a local HTML file from the browser's File Open dialog and editing it in DevTools To open an `.html` file and edit it: 1. In Microsoft Edge, open a new tab, and then press **Ctrl+O** (Windows/Linux) or **Command+O** (macOS). A file selection dialog opens. -1. Select an HTML file from the local copy of the **Demos** repo, such as `C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html`. The `.html` file is opened and rendered in Microsoft Edge. +1. Select an HTML file from the local copy of the **Demos** repo, such as `C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.html`. The `.html` file is opened and rendered in Microsoft Edge. 1. Right-click the webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS). DevTools opens. @@ -283,7 +382,7 @@ To open an `.html` file and edit it:

📋 My modified tasks

``` - If editing isn't enabled, click the **Allow** button to grant read/write access to the folder by doing the steps in [Opening a folder from the Filesystem (Workspace) tab in the Sources tool](#opening-a-folder-from-the-filesystem-workspace-tab-in-the-sources-tool) above. + If editing isn't enabled, click the **Allow** button to grant read/write access to the folder by doing the steps in [Open a demo folder from the Workspace tab in the Sources tool](#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) above. The change is displayed in the **Changes** tool in the **Quick View** panel, and an asterisk is added to the file name in the **index.html** tab in the **Sources** tool: @@ -296,17 +395,10 @@ To open an `.html` file and edit it: ![The modified demo-to-do page after saving changes and refreshing](./sample-code-images/modified-demo-to-do-after-save-refresh.png) -#### Opening a local HTML file from File Explorer and editing it in the browser - -1. In File Explorer on Windows, or Finder on macOS, select an HTML file from the local copy of the **Demos** repo, such as `C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.html`. The `.html` file is opened and rendered in Microsoft Edge. - -1. Follow the steps in the sections above. - - ## Open a demo folder in Visual Studio Code -After downloading or cloning the Demos repo: +After cloning (or downloading) the Edge Demos repo: 1. In Visual Studio Code, in the **Activity Bar**, click the **Explorer** (![Explorer icon](./sample-code-images/explorer-icon.png)) button. The **Explorer** pane opens. @@ -351,13 +443,15 @@ Therefore, the resulting GitHub.io server URL for the rendered demo webpage is: These URLs aren't case-sensitive. +When you run a localhost server and start it within a cloned repo folder, such as `C:\Users\localAccount\GitHub\Demos\workspaces`, you typically see `localhost:8080` in the browser Address Bar. + ## See also Opening and editing files: -* [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md) - to open a local folder in the **Sources** tool of DevTools in the browser. -* [Using the Filesystem tab to define a local Workspace](../sources/index.md#using-the-filesystem-tab-to-define-a-local-workspace) in _Sources tool overview_. +* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) - Use DevTools as an in-browser Integrated Development Environment (IDE). +* [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](../sources/index.md#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk) in _Sources tool overview_. * [Approaches compared](../../visual-studio-code/microsoft-edge-devtools-extension.md#approaches-compared) in _Microsoft Edge DevTools extension for Visual Studio Code_. Summarizes and compares several options for editing webpage files. * [Microsoft Edge IDE integration](../../visual-studio-code/ide-integration.md) - Webpage app development using Visual Studio Code or Visual Studio, including Microsoft Edge DevTools. diff --git a/microsoft-edge/devtools-guide-chromium/sources/index-images/navigator-pane.png b/microsoft-edge/devtools-guide-chromium/sources/index-images/navigator-pane.png index 57f51bf116..59589b56f4 100644 Binary files a/microsoft-edge/devtools-guide-chromium/sources/index-images/navigator-pane.png and b/microsoft-edge/devtools-guide-chromium/sources/index-images/navigator-pane.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-command-menu-to-open-file.png b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-command-menu-to-open-file.png index 4f39342d10..459052f1cb 100644 Binary files a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-command-menu-to-open-file.png and b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-command-menu-to-open-file.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-filesystem-tab.png b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-filesystem-tab.png deleted file mode 100644 index d8e9e06dfc..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-filesystem-tab.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-page-tab.png b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-page-tab.png index ac4e36aaef..581b5e34a6 100644 Binary files a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-page-tab.png and b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-page-tab.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-workspace-tab.png b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-workspace-tab.png new file mode 100644 index 0000000000..54b66c517d Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sources/index-images/sources-workspace-tab.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sources/index-images/workspace-localhost.png b/microsoft-edge/devtools-guide-chromium/sources/index-images/workspace-localhost.png new file mode 100644 index 0000000000..35b99e2589 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/sources/index-images/workspace-localhost.png differ diff --git a/microsoft-edge/devtools-guide-chromium/sources/index.md b/microsoft-edge/devtools-guide-chromium/sources/index.md index 1442c77e99..945995435a 100644 --- a/microsoft-edge/devtools-guide-chromium/sources/index.md +++ b/microsoft-edge/devtools-guide-chromium/sources/index.md @@ -6,7 +6,7 @@ ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 07/21/2023 +ms.date: 04/18/2025 --- +* [See also](#see-also) @@ -91,24 +90,52 @@ To load the debugging demo webpage that's shown above, see [The basic approach t Use the **Navigator** pane (on the left) to navigate among the resources that are returned from the server to construct the current webpage. Select files, images, and other resources, and view their paths. ![The Navigator pane](./index-images/navigator-pane.png) + + +The Navigator pane contains the following tabs: + +| Tab | Description | Docs | +|---|---| +| **Page** | View the resources that the browser downloaded from the server or file system, inspect their content, and debug code. | [Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage) | +| **Workspace** | View and edit local files in DevTools, to use DevTools as an Integrated Development Environment (IDE) within the browser. | [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk) | +| **Overrides** | Experiment with changes to a webpage, and keep the changes after you refresh the webpage, without mapping your changes to the source code of the webpage. | [Using the Overrides tab to override server files with local files](#using-the-overrides-tab-to-override-server-files-with-local-files) | +| **Content scripts** | View content scripts that were loaded by a Microsoft Edge extension. | [Using the Content scripts tab for Microsoft Edge extensions](#using-the-content-scripts-tab-for-microsoft-edge-extensions) | +| **Snippets** | Create and save JavaScript code snippets, so that you can easily run a snippet of JavaScript on any webpage. | [Using the Snippets tab to run JavaScript code snippets on any page](#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage) | To access any hidden tabs of the Navigator pane, click the **More tabs** (![More tabs](./index-images/more-tabs-icon.png)) button. -The following subsections cover the Navigator pane: -* [Using the Page tab to explore resources that construct the current webpage](#using-the-page-tab-to-explore-resources-that-construct-the-current-webpage) -* [Using the Filesystem tab to define a local Workspace](#using-the-filesystem-tab-to-define-a-local-workspace) -* [Using the Overrides tab to override server files with local files](#using-the-overrides-tab-to-override-server-files-with-local-files) -* [Using the Content scripts tab for Microsoft Edge extensions](#using-the-content-scripts-tab-for-microsoft-edge-extensions) -* [Using the Snippets tab to run JavaScript code snippets on any page](#using-the-snippets-tab-to-run-javascript-code-snippets-on-any-webpage) -* [Using the Command Menu to open files](#using-the-command-menu-to-open-files) +Details are below. Also below: [Using the Command Menu to open files](#using-the-command-menu-to-open-files). #### Using the Page tab to explore resources that construct the current webpage -Use the **Page** tab of the **Navigator** pane to explore the file system that's returned from the server to construct the current webpage. Select a JavaScript file to view, edit, and debug it. The **Page** tab lists all of the resources that the page has loaded. +The **Page** tab in the **Sources** tool displays the resources that the current webpage uses, such as the webpage's HTML document, JavaScript files, CSS files, or images. The resources displayed in the **Page** tab are organized in a tree that matches the file system or server path from which they were downloaded. + +Use the **Page** tab to view the resources that the browser downloaded from the server or file system, inspect their content, and debug code. ![The Page tab in the Navigator pane of the Sources tool](./index-images/sources-page-tab.png) + To display a file in the **Editor** pane, select a file in the **Page** tab. For an image, a preview of the image is displayed. @@ -132,19 +159,39 @@ The **Page** tab displays files or resources grouped by server and directory, or To change how resources are grouped: -1. Next to the tabs on the Navigator pane (on the left), select the **...** (**More options**) button. A menu appears. +1. Next to the tabs on the Navigator pane (on the left), click the **...** (**More options**) button. A menu appears. 1. Select or clear the **Group by folder** option. -#### Using the Filesystem tab to define a local Workspace +#### Add a local folder to the workspace, to use DevTools to edit files and save changes to disk + +Use the **Workspace** tab in the **Sources** tool to view and edit local files in DevTools. The **Workspace** tab is useful when used in conjunction with a local web server as you can then load your local website in Edge, and edit its source files in DevTools. + +When you add a folder to the **Workspace** tab, the files and subfolders in that folder are displayed in the tab, and you can open files to view and edit them. -Use the **Filesystem** tab of the **Navigator** pane to add files to a Workspace, so that changes you make in DevTools get saved to your local file system. +The **Workspace** tab does not show the resources that the browser downloaded to display the webpage; the **Workspace** tab only shows the folders and files that are inside the local folders that you added. - - +Throughout DevTools, a green "mapped" dot appears on a file for which DevTools was able to find a mapping between the workspace file and the webpage resource. For example, if the page uses a stylesheet called `styles.css` and the workspace has a file called `styles.css`, DevTools maps the files to each other and displays a green "mapped" dot. -![The Filesystem tab, for a Workspace](./index-images/sources-filesystem-tab.png) +The green "mapped" dot indicates that changes you make to webpage resources will be saved. For example, when you make a change inside the **Styles** tab of the **Elements** tool, you're editing the webpage stylesheet (not the file). If the CSS file name that's shown in the **Styles** tab has a green "mapped" dot, that stylesheet has been mapped to a file in your workspace, and your changes won't be lost. + +![The Workspace tab in the Sources tool](./index-images/sources-workspace-tab.png) + By default, when you edit a file in the **Sources** tool, your changes are discarded when you refresh the webpage. The **Sources** tool works with a copy of the front-end resources that are returned by the web server. When you modify these front-end files that are returned by the server, the changes don't persist, because you didn't change the source files. You need to also apply your edits in your actual source code, and then re-deploy to the server. @@ -153,22 +200,22 @@ In contrast, when you use a Workspace, changes that you make to your front-end c Workspaces work well when the JavaScript code that's returned by the server is the same as your local JavaScript source code. Workspaces don't work as well when your workflow involves transformations on your source code, such as minification or [TypeScript](https://www.typescriptlang.org) compilation. See also: -* [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md) -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. +* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) #### Using the Overrides tab to override server files with local files -Use the **Overrides** tab of the **Navigator** pane to override page assets (such as images) with files from a local folder. +Use the **Overrides** tab in the **Sources** tool to override any response from a webserver with local files. The **Overrides** tab is useful to make temporary changes to individual files, such as a CSS file, on any website. Use **Overrides** when you want to experiment with changes to a webpage, and you need to keep the changes after you refresh the webpage, but you don't care about mapping your changes to the source code of the webpage. -Items in this tab override what the server sends to the browser, even after the server has sent the assets. +To start using the **Overrides** tab, create a new folder on your file system, and then select that folder in the **Overrides** tab. From then on, any changes that you make in the **Styles** tab of the **Elements** tool, or in the **Page** tab of the **Sources** tool, are saved in the new folder. DevTools uses the local files to override the matching server responses. ![The Overrides tab of the Navigator pane](./index-images/overrides-tab.png) -The **Overrides** feature is similar to Workspaces. Use Overrides when you want to experiment with changes to a webpage, and you need to keep the changes after you refresh the webpage, but you don't care about mapping your changes to the source code of the webpage. - + See also: * [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md) @@ -179,7 +226,16 @@ See also: #### Using the Content scripts tab for Microsoft Edge extensions -Use the **Content scripts** tab of the **Navigator** pane to view any content scripts that were loaded by a Microsoft Edge extension that you installed. +Use the **Content scripts** tab of the **Navigator** pane to view any content scripts that were loaded by a Microsoft Edge extension that you installed. + + + + + ![The Content scripts tab of the Navigator pane](./index-images/content-scripts-tab.png) @@ -210,7 +266,7 @@ document.head.appendChild(script); Instead, you can save this code in a **Snippet** and then easily run it whenever you need to. When you press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS), DevTools saves the **Snippet** to your file system. There are multiple ways to run a Snippet: -* In the **Navigator** pane, select the **Snippets** tab, and then select the snippets file to open it. Then at the bottom of the Editor pane, select **Run** (![The Run button](./index-images/run-snippet-icon.png)). +* In the **Navigator** pane, select the **Snippets** tab, and then select the snippets file to open it. Then at the bottom of the Editor pane, click the **Run** (![The Run button](./index-images/run-snippet-icon.png)) button. * When DevTools has focus, press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS) to open the [Command Menu](../command-menu/index.md), and then type **!**. Snippets are similar to bookmarklets. @@ -225,11 +281,12 @@ See also: To open a file, in addition to using the **Navigator** pane within the **Sources** tool, you can use the **Command Menu** from anywhere within DevTools. * From anywhere in DevTools, press **Ctrl+P** on Windows/Linux or **Command+P** on macOS. The **Command Menu** appears, and lists all the resources that are in the tabs of the **Navigator** pane of the **Sources** tool. -* Or, next to the tabs of the **Navigator** pane in the **Sources** tool, select the **...** (**More options**) button, and then select **Open File**. +* Or, next to the tabs of the **Navigator** pane in the **Sources** tool, click the **More options** (**...**) button, and then select **Open File**. To display and pick from a list of all .js files, type **.js**. ![Opening a file by using the Command Menu](./index-images/sources-command-menu-to-open-file.png) + If you type **?**, the **Command Menu** shows several commands, including **... Open file**. If you press **Backspace** to clear the **Command Menu**, a list of files is shown. @@ -239,7 +296,16 @@ For more information, see [Run commands with the Microsoft Edge DevTools Command ## Using the Editor pane to view or edit files -Use the **Editor** pane to view the front-end files that are returned from the server to compose the current webpage, including JavaScript, HTML, CSS, and image files. When you edit the front-end files in the **Editor** pane, DevTools updates the webpage to run the modified code. +Use the **Editor** pane to view or edit files, including JavaScript, HTML, CSS, and image files. The **Editor** pane displays the content of whatever file you selected in any of the **Navigator** pane tabs: +* **Page** +* **Workspace** +* **Overrides** +* **Content scripts** +* **Snippets** + +For example, the **Editor** pane can show: +* The content of a **Snippet**. +* The content of a **Workspace** file that's not actually used in your front-end code (because **Workspace** lets you edit the content of any folder you want). ![The Editor pane in the Sources tool](./index-images/editor-pane.png) @@ -252,20 +318,20 @@ The **Editor** pane has the following level of support for various file types: | HTML | View and edit. | | Images | View. | -By default, edits are discarded when you refresh the webpage. For information about how to save the changes to your file system, see [Using the Filesystem tab to define a local Workspace](#using-the-filesystem-tab-to-define-a-local-workspace), above. +By default, edits are discarded when you refresh the webpage. For information about how to save the changes to your file system, see [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk), above. The following subsections cover the Editor pane: * [Editing a JavaScript file](#editing-a-javascript-file) * [Reformatting a minified JavaScript file with pretty-print](#reformatting-a-minified-javascript-file-with-pretty-print) * [Mapping minified code to your source code to show readable code](#mapping-minified-code-to-your-source-code-to-show-readable-code) * [Transformations from source code to compiled front-end code](#transformations-from-source-code-to-compiled-front-end-code) -* [Editing a CSS file](#editing-a-css-file) +* [Editing CSS in the Page tab or Workspace tab in the Sources tool](#editing-css-in-the-page-tab-or-workspace-tab-in-the-sources-tool) * [Editing an HTML file](#editing-an-html-file) * [Going to a line number or function](#going-to-a-line-number-or-function) -* [Displaying source files when using a different tool](#displaying-source-files-when-using-a-different-tool) +* [Quick source tool, to display source files when using a different tool](#quick-source-tool-to-display-source-files-when-using-a-different-tool) See also: -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) @@ -278,7 +344,7 @@ To edit a JavaScript file in DevTools, use the **Editor** pane, within the **Sou To load a file into the Editor pane, use the **Page** tab in the **Navigator** pane (on the left). Or use the **Command Menu**, as follows: in the upper right of DevTools, select **Customize and control DevTools** (**...**) and then select **Open File**. See also: -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) ###### Save and Undo @@ -289,7 +355,7 @@ If you change a file, an asterisk appears next to the file name. * To save changes, press **Ctrl+S** on Windows/Linux or **Command+S** on macOS. * To undo a change, press **Ctrl+Z** on Windows/Linux or **Command+Z** on macOS. -By default, your edits are discarded when you refresh the webpage. For more information about how to save the changes in your local file system, see [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md). +By default, your edits are discarded when you refresh the webpage. For more information about how to save the changes in your local file system, see [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md). ###### Find and Replace @@ -301,27 +367,35 @@ To find text in the current file, select the **Editor** pane to give it focus, a To find and replace text, select the **Replace** (**A-\>B**) button to the left of the **Find** text box. The **Replace** (**A-\>B**) button appears when viewing an editable file. - ###### Showing the changes you made -To review the changes you made to a file, right-click in the **Editor** pane and then select **Local Modifications**. +When you define a Workspace, changes to JavaScript are saved, and are visible in the **Changes** tool. + +To review the changes that you made to a file, right-click in the **Editor** pane and then select **Local Modifications**. The **Quick View** panel opens at the bottom of DevTools, showing your changes within the **Changes** tab. -![Showing Local Modifications, in the Changes tab in the Quick View panel](./index-images/local-modifications.png) --> +![Showing Local Modifications, in the Changes tab in the Quick View panel](./index-images/local-modifications.png) + +See also: +* [Track changes to files using the Changes tool](../changes/changes-tool.md) +* [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md) - ###### Changes inside a function take effect +When you define a Workspace, changes inside a JavaScript function body take effect. + DevTools doesn't re-run a script, so the only JavaScript changes that take effect are changes that you make within functions. For example, in the following figure, we added the following code to the JavaScript that is returned by the server: * We added the statement `console.log('A')` outside of any function. * We added the statement `console.log('B')` inside an `onClick` function. We then saved the changes, entered numbers into the form, and then selected the form button to send the form. -After submitting the form, `console.log('A')`, which is at global scope, doesn't run, but `console.log('B')`, inside an `onClick` function, does run, outputting `B` to the Console: +After submitting the form, `console.log('A')`, which is at global scope, doesn't run, but `console.log('B')`, inside an `onClick` function, does run, outputting `B` to the **Console**: -![Global-scope JavaScript isn't re-run](./index-images/edit-js.png) --> +![Global-scope JavaScript isn't re-run](./index-images/edit-js.png) @@ -358,13 +432,26 @@ In this scenario, the **Sources** tool is useful for inspecting and stepping-thr -#### Editing a CSS file +#### Editing CSS + +There are two places to edit CSS rules and their properties in DevTools: + +* In the **Styles** tab in the **Elements** tool, edit CSS properties through user interface controls. -There are two ways to edit CSS in DevTools: -* In the **Elements** tool, you work with one CSS property at a time, through user interface controls. This approach is recommended in most cases. For more information, see [Get started viewing and changing CSS](../css/index.md). -* In the **Sources** tool, you use a text editor to edit CSS files. +* In the **Page** tab or **Workspace** tab in the **Sources** tool, use the text editor to edit a CSS file. -The Sources tool supports directly editing a CSS file. For example, if you edit the CSS file from the tutorial [Edit files with Workspaces (Filesystem tab)](../workspaces/index.md) to match the style rule below, the `H1` element in the upper left of the rendered webpage changes to green: + + +###### Editing CSS by using the Styles tab in the Elements tool, when using the Workspace tab of the Sources tool + +See also: +* [Limitations of the workspace feature with transformed source code](../workspaces/index.md#limitations-of-the-workspace-feature-with-transformed-source-code) + + + +###### Editing CSS in the Page tab or Workspace tab in the Sources tool + +The **Page** or **Workspace** tab in the **Sources** tool supports directly editing a CSS file. For example, if you edit the CSS file from the tutorial [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md) to match the style rule below, the `H1` element in the upper left of the rendered webpage changes to green: ```css h1 { @@ -376,11 +463,11 @@ h1 { CSS changes take effect immediately; you don't need to manually save the changes. - See also: +* [Get started viewing and changing CSS](../css/index.md). * [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md) * [Sources tool keyboard shortcuts](../shortcuts/index.md#sources-tool-keyboard-shortcuts) in _Keyboard shortcuts_ -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) @@ -393,7 +480,7 @@ There are two ways to edit HTML in DevTools: ![The HTML editor of the Sources tool](./index-images/sources-html-editor.png) Unlike a JavaScript or CSS file, an HTML file that is returned by the web server cannot be directly edited in the Sources tool. To edit an HTML file using the Editor of the Sources tool, the HTML file must be in a Workspace or on the **Overrides** tab. See these subsections of the current article: -* [Using the Filesystem tab to define a local Workspace](#using-the-filesystem-tab-to-define-a-local-workspace) +* [Add a local folder to the workspace, to use DevTools to edit files and save changes to disk](#add-a-local-folder-to-the-workspace-to-use-devtools-to-edit-files-and-save-changes-to-disk) * [Using the Overrides tab to override server files with local files](#using-the-overrides-tab-to-override-server-files-with-local-files) To save changes, press **Ctrl+S** on Windows/Linux or **Command+S** on macOS. An edited file is marked by an asterisk. @@ -405,7 +492,7 @@ To undo an edit, press **Ctrl+Z** on Windows/Linux or **Command+Z** on macOS. To view other commands while editing an HTML file, in the Editor pane, right-click the HTML file. See also: -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) @@ -425,22 +512,26 @@ For more information, see [Run commands with the Microsoft Edge DevTools Command -#### Displaying source files when using a different tool +#### Quick source tool, to display source files when using a different tool The main place to view source files in the DevTools is within the **Sources** tool. But sometimes you need to access other tools, such as **Elements** or **Console**, while viewing or editing your source files. You use the **Quick source** tool in the [Quick View](../customize/index.md#quick-view) panel at the bottom of DevTools. To use the **Quick source** tool: -1. Select a tool other than the **Sources** tool, such as the **Elements** tool. +1. In the **Activity Bar** at the top of DevTools, select a tool other than the **Sources** tool, such as the **Elements** tool. 1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS). The **Command Menu** opens. 1. Type **quick**, and then select **Show Quick source**. - The **Quick View** panel opens at the bottom of DevTools, with the **Quick source** tool selected. The **Quick source** tool contains the last file you edited in the **Sources** tool, within a compact version of the DevTools code editor. + The **Quick View** panel opens at the bottom of DevTools, with the **Quick source** tool selected. The **Quick source** tool displays the same files that are open in the **Sources** tool, within a compact version of the DevTools code editor. 1. Press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS) to open the **Open File** dialog. +See also: +* [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md) +* [Track changes to files using the Changes tool](../changes/changes-tool.md) + ## Using the Debugger pane to debug JavaScript code @@ -487,7 +578,7 @@ To use a debugger on a webpage, you typically set a breakpoint and then send a f 1. In the **Editor** pane, select a line number near a suspect line of code, to set a breakpoint on that line. In the figure below, a breakpoint is set on the line `var sum = addend1 + addend2;`. -1. In the webpage, enter values and submit the form. For example, enter numbers, such as **5** and **1**, then select the button **Add Number 1 and Number 2**. +1. In the webpage, enter values and submit the form. For example, enter numbers, such as **5** and **1**, then click the button **Add Number 1 and Number 2**. The debugger runs the JavaScript code and then pauses at the breakpoint. The debugger is now in Paused mode, so you can inspect the values of the properties that are in-scope, and step through the code. @@ -572,8 +663,10 @@ The following articles cover the **Debugger** pane and breakpoints: ## See also -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. -* [Sources tool keyboard shortcuts](../shortcuts/index.md#sources-tool-keyboard-shortcuts) in _Keyboard shortcuts_ +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) +* [Sources tool keyboard shortcuts](../shortcuts/index.md#sources-tool-keyboard-shortcuts) in _Keyboard shortcuts_. +* [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md) +* [Track changes to files using the Changes tool](../changes/changes-tool.md) diff --git a/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode.md b/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode.md index a9b2c168c3..a261466a0b 100644 --- a/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode.md +++ b/microsoft-edge/devtools-guide-chromium/sources/opening-sources-in-vscode.md @@ -45,7 +45,7 @@ After you select a root folder, you need to grant DevTools full access to the fo ![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 **Filesystem** 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. +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) diff --git a/microsoft-edge/devtools-guide-chromium/speed/get-started.md b/microsoft-edge/devtools-guide-chromium/speed/get-started.md index 19a8a74141..93629ff7b8 100644 --- a/microsoft-edge/devtools-guide-chromium/speed/get-started.md +++ b/microsoft-edge/devtools-guide-chromium/speed/get-started.md @@ -49,7 +49,7 @@ The source files for the website are at [MicrosoftEdge / Demos > travel-site](ht First, set up the website locally, so that you can make changes to it later: -1. Get the website's source code locally: [Download or clone the Demos repo](../sample-code/sample-code.md#download-or-clone-the-demos-repo). +1. Get the website's source code locally: [Clone the Edge Demos repo to your drive](../sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. 1. Open the folder you just downloaded or cloned in Visual Studio Code. diff --git a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md index d2ef504a38..361352903e 100644 --- a/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md +++ b/microsoft-edge/devtools-guide-chromium/whats-new/2024/04/devtools-124.md @@ -53,7 +53,7 @@ See also: -Before Microsoft Edge 124, you could rearrange the tabs in the **Activity bar** only by dragging them. This can be difficult for users who are using input devices such as a trackball or head pointer. Now, you can also move a tab left or right by right-clicking the tab and then selecting **Move left** or **Move right**: +Before Microsoft Edge 124, you could rearrange the tabs in the **Activity Bar** only by dragging them. This can be difficult for users who are using input devices such as a trackball or head pointer. Now, you can also move a tab left or right by right-clicking the tab and then selecting **Move left** or **Move right**: ![The context menu from right-clicking a tool's tab on the Activity bar](./devtools-124-images/rearrange-tab.png) diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/elements-tool-h1.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/elements-tool-h1.png new file mode 100644 index 0000000000..a3f4bbb125 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/elements-tool-h1.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-console.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-console.png deleted file mode 100644 index 32b8cfd4eb..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-console.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-css-pick-color.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-css-pick-color.png deleted file mode 100644 index cff5abd043..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-css-pick-color.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-css.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-css.png deleted file mode 100644 index 5501806867..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-css.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-quick-source-script.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-quick-source-script.png deleted file mode 100644 index 824b97db60..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-elements-styles-quick-source-script.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-search-script.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-search-script.png deleted file mode 100644 index 8114d0e4fc..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-search-script.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-search-show-quick-source.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-search-show-quick-source.png deleted file mode 100644 index 7e6757a443..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-search-show-quick-source.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem-css.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem-css.png deleted file mode 100644 index e951572d05..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem-css.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem-folder.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem-folder.png deleted file mode 100644 index fc7643ae07..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem-folder.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem.png deleted file mode 100644 index 2a47224617..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-filesystem.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-page-h1.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-page-h1.png deleted file mode 100644 index 1ecc37b593..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo-sources-page-h1.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo.png b/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo.png deleted file mode 100644 index 0d92c2485d..0000000000 Binary files a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/workspaces-workspaces-demo.png and /dev/null differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index.md b/microsoft-edge/devtools-guide-chromium/workspaces/index.md index b6c8d08bb9..e12d3ff1cf 100644 --- a/microsoft-edge/devtools-guide-chromium/workspaces/index.md +++ b/microsoft-edge/devtools-guide-chromium/workspaces/index.md @@ -1,12 +1,12 @@ --- -title: Edit files with Workspaces (Filesystem tab) -description: How to save webpage file changes made in DevTools to disk. +title: Edit and save files in a workspace (Sources tool Workspace tab) +description: How to use DevTools as an IDE and save webpage file changes made in DevTools to your source files on disk. # key words before col 158 author: MSEdgeTeam ms.author: msedgedevrel ms.topic: conceptual ms.service: microsoft-edge ms.subservice: devtools -ms.date: 09/13/2023 +ms.date: 04/17/2025 --- -# Edit files with Workspaces (Filesystem tab) +# Edit and save files in a workspace (Sources tool Workspace tab) + -Use the **Filesystem** tab in the **Sources** tool to define a workspace, to save DevTools changes in your source code files rather than only in a transient copy of the files that are returned by the web server. +You can use DevTools as an in-browser Integrated Development Environment (IDE). To save edits to webpage source files, add the source code folder of the webpage in the **Workspace** tab of the **Sources** tool. You can then edit and save HTML, CSS, and JS files in the **Sources** tool's editor (or in the **Quick source** tool in the **Quick View** panel at the bottom of DevTools). -This tutorial provides hands-on practice in setting up and using a workspace in DevTools. After you add files to a workspace, changes that you make in your source code by using DevTools are saved on your local computer. These changes are preserved across page refreshes. +You can create, copy, rename, and delete source files from within the **Workspace** tab. -To refresh your knowledge of the technologies used, see the following articles: +Use the **Workspace** tab in the **Sources** tool to display and edit the contents of a folder on your computer from within the **Sources** tool. The changes that you make to the files in a workspace are saved to your computer. -* Use HTML, CSS, and JavaScript to build a web page. See [Getting started with the web](https://developer.mozilla.org/docs/Learn/Getting_started_with_the_web) +The typical way to set up a workspace is to set it up to display the source files of your website's frontend code. This way, you use DevTools both to inspect your website, and to make changes to its source files. This way, the changes that you make are saved on your computer, rather than lost when you refresh the page. -* Use DevTools to make basic changes to CSS. See [Get started viewing and changing CSS](../css/index.md). - -* Run a local HTTP web server. See: - - * Using Node.js (used for this tutorial): [Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_. - - * Using Python: [Running a simple local HTTP server](https://developer.mozilla.org/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) in _How do you set up a local testing server?_ +See also: +* [Workspace tutorial (Sources tool Workspace tab)](./workspace-tutorial.md) -## Introduction - -A DevTools _workspace_ lets you save changes that you make to a local copy of the source code to the same file on your computer, so that changes are retained across refreshes of the page. Here's a typical scenario for using a workspace: +## Overview of the DevTools workspace feature + -* You have the source code for the demo website on your desktop. +A DevTools _workspace_ lets you view your website's source code that's on your computer, and make changes to it, from the **Sources** tool, so that changes are retained across refreshes of the page. -* You are running a local web server from the source code directory, so that the site is accessible at `localhost:8080`. Note: If you use the Python server option, the default port number is `8000`. +Here's a typical scenario for using a workspace: -* You opened `localhost:8080` in Microsoft Edge, and you are using DevTools to change the website source code which includes the CSS, HTML, and JavaScript files. +1. Have the source code for your website on your computer. -The tutorial steps below walk you through this environment setup. +1. Run a local web server (such as `npx http-server`) from the source code directory, so that the site is accessible at a local development URL such as `http://localhost:8080`. +1. Open `http://localhost:8080` in Microsoft Edge. - -#### Limitations - -If you're using a modern framework, it probably transforms your source code from a format that's easy to maintain into a format that's optimized to run as quickly as possible. A workspace is usually able to map the optimized code back to the original source code, by using [source maps](https://blog.teamtreehouse.com/introduction-source-maps) for JavaScript and CSS. However, there's a lot of variation in how each framework uses source maps. - -DevTools doesn't support every framework variation; for example, the Workspaces feature (**Filesystem** tab) doesn't work with the Create React App framework. - -If you run into issues while using workspaces with your framework of choice, or you identify framework-specific steps that are needed, [start a thread in the Chrome DevTools mailing list](https://groups.google.com/forum/#!forum/google-chrome-developer-tools) or [ask a question on Stack Overflow](https://stackoverflow.com/questions/ask?tags=google-chrome-devtools) to exchange information with the rest of the DevTools community. - - - -#### Related feature: Overrides +1. Use the **Sources** tool's **Workspace** tab in DevTools to change the source code of your website, including the CSS, HTML, and JavaScript files. -**Overrides** is a DevTools feature that's similar to a workspace. You can use an override when you want to experiment with changes to a webpage, and you need to display the changes across webpage loads, but you don't care about mapping your changes to the source code of the webpage. However, your changes aren't saved when you refresh the webpage. +1. Reload your webpage to see the changes. -The **Overrides** feature lets you store a local copy of the webpage files on the server. When you refresh the page, Microsoft Edge loads the local copy of files instead of the files on the server. To learn more about overrides, see [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md). + Your website might use a build system which you need to run before you can see the changes. Web developers often use a build system that watches for saved changes in the source code files. When you save a change to a source code file, the build system builds those changes and then automatically refreshes the page in the browser. - + If you use such an automated build system, when you make a change to a source file in the **Sources** tool and save it, you automatically see those changes applied to the rendered web page. -## Create the directory of source files - -We'll set up the demo files, and then set up DevTools. - -1. In another window or tab, go to the [Workspaces demo source code](https://github.com/MicrosoftEdge/Demos/tree/main/workspaces). - -1. Create an `app` directory, such as `~/Desktop/app` or `C:\Users\myusername\app\`. Copy `index.html`, `../shared/img/logo.png`, `README.md`, `script.js`, and `styles.css` from the demo source code to your `app` directory. For the rest of the tutorial, this directory is referred to as `~/Desktop/app` or `C:\Users\myusername\app\`, though you can use a different path. - - -1. If you haven't already, install Node.js and npm. For more information, see [Install Node.js and Node Package Manager (npm)](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-4-install-nodejs-and-node-package-manager-npm) in _Installing the DevTools extension for Visual Studio Code_. - -1. Go to a command prompt, such as the git bash shell, or the Terminal pane in Microsoft Visual Studio Code. - -1. Go to the `app` directory that you created, such as `~/Desktop/app` or `C:/Users/myusername/app`. If you use the git bash shell, it's a UNIX shell, so even on Windows, you need to wrap a directory path that has backslashes in quotes, or else use forward slashes rather than backslashes. - -1. Run one of the following commands, to start up the web server:
-Node.js option: - - ```bash - # Node.js option - cd ~/Desktop/app # or: cd C:/Users/myusername/app - npx http-server # Node.js - ``` - - For more information and options, see [Start the server (npx http-server)](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#start-the-server-npx-http-server) in _Installing the DevTools extension for Visual Studio Code_. +## Limitations of the workspace feature with transformed source code + - ``` bash - # Python 2 option - cd ~/Desktop/app # or: cd C:/Users/myusername/app - python -m SimpleHTTPServer # Python 2 - ``` - - ``` bash - # Python 3 option - cd ~/Desktop/app # or: cd C:/Users/myusername/app - python -m http.server # Python 3 - ``` +If you're using a modern framework, it might transform your source code from a format that's easy to maintain into a format that's optimized to run as quickly as possible. The **Workspace** tab in the **Sources** tool is usually able to map the optimized code back to the original source code, by using [source maps](https://blog.teamtreehouse.com/introduction-source-maps) for JavaScript and CSS. However, there's a lot of variation in how each framework uses source maps. -1. Open a tab in Microsoft Edge, and go to the locally hosted version of the site. You should be able to access it by using `localhost:8080`: - - ![The DevTools Workspaces Demo](./index-images/workspaces-workspaces-demo.png) - - Another common equivalent URL is `http://0.0.0.0:8080`. The default port number for the Python server option is `8000`. The exact [port number](https://wikipedia.org/wiki/Port_(computer_networking)#Use_in_URLs) might be different. +DevTools doesn't support every framework variation. If you run into issues while using workspaces with your framework of choice, or you identify framework-specific steps that are needed, please reach out to use by opening an issue on the [MicrosoftEdge/DevTools](https://github.com/MicrosoftEdge/DevTools/issues) repository. -## Define a workspace in DevTools - -1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS) to open the DevTools **Console**: +## Editing CSS by using the Styles tab in the Elements tool, when using the Workspace tab of the Sources tool - ![The DevTools Console](./index-images/workspaces-workspaces-demo-console.png) +If you use a workspace, in some cases you can edit CSS in the **Styles** tab in the **Elements** tool and have the changes saved to the mapped file on disk: -1. Click the **Sources** (![Sources tool icon](./index-images/sources-tool-icon.png)) tab. +* Edits that you make in the **Styles** tab in the **Elements** tool _are_ saved to the CSS file on disk, if DevTools has mapped a style sheet on the webpage and the file in the workspace, such as by a source map, or by matching content. -1. In the **Navigator** pane (on the left), click the **Filesystem** tab (which is grouped with the **Page** tab): + If you use an automatic build system framework, changes are saved to your source file if DevTools was able to map the style sheet to the workspace file, by using a source map. - ![The Filesystem tab](./index-images/workspaces-workspaces-demo-sources-filesystem.png) + Depending on the automated build system or framework that you use, DevTools may be able to save changes to disk, if there's no build step, or there's a build step and a source map. The **Styles** tab is mapped to the CSS file on disk, and so edits in the **Styles** tab are saved to disk. -1. Click **Add folder to workspace**. File Explorer or Finder opens. +* Edits that you make in the **Styles** tab in the **Elements** tool are _not_ saved to the CSS file on disk, if the stylesheet isn't mapped to a workspace file. Editing CSS in the **Styles** tab of the **Elements** tool will lose changes; the changes aren't saved to disk. -1. Go to the `/app/` directory that you created. For example, in the **Folder:** text box, enter the path, such as `~/Desktop/app` or `C:\Users\myusername\app\`. Then click the **Select Folder** button. - DevTools prompts you whether to grant DevTools full access to your `app` directory. +If you are using a **Workspace**, edit the CSS in the **Sources** tool (not in the **Elements** tool), because the source files that you edit might be built or compiled by a build script before being served by your local server. +When you edit in the **Elements** tool, you might be editing the compiled-and-built version of the file, not the source file. -1. Click the **Allow** button, to give DevTools permission to read and write to the directory. +When you use a **Workspace**: +1. Edit the file in the **Sources** tool. +1. Save the change. +1. Build again. Some build systems do this automatically, when they detect a change. +1. Reload the page. Some servers do this automatically when they detect a change. - In the **Filesystem** tab are page icons that have a green dot, for `index.html`, `script.js`, and `styles.css`. The green dot indicates that DevTools has established a mapping between a network resource of the page that's received from the web server, and the local source file in your `app` directory: - ![The Filesystem tab has a green dot indicating a mapping between a resource received from the server and a local source file](./index-images/workspaces-workspaces-demo-sources-filesystem-folder.png) + +#### Limitations of the Elements tool's Styles tab + +Using the **Elements** tool's **Styles** tab might not always work for every scenario. Suppose your project uses a framework or pre-processor to write CSS, where you don't directly write CSS, but you write the equivalent of CSS by using a different language and a different file structure. Such a project might use a build system which then translates, compiles, and combines the CSS-like code into something that the browser can understand. - -## Edit CSS and save changes to the source file +Such a project might generate source maps, so that DevTools allows you to see and edit your source files in the **Elements** tool's **Styles** tab. But in some cases, that might not work, or the project might not use source maps. -To make a change in the CSS file and save it to disk: +When that happens, any changes you make in the **Elements** tool's **Styles** tab are not saved to the workspace files. In that case, edit your source files in the **Sources** tool instead. In the above scenario, the files that use a different language are visible in the **Workspace** tab of the **Sources** tool, and you can edit the source files there. -1. In the **Sources** tool, in the **Filesystem** tab (grouped with the **Page** tab), select `styles.css` to open it in the editor pane. The `color` property of the `h1` element is set to `fuchsia`: +Then, behind the scenes, any saved changes need to be re-built and compiled (which may happen automatically), and then the changes are visible in the rendered web page after a page refresh (which may happen automatically). - ![View styles.css in a text editor](./index-images/workspaces-workspaces-demo-sources-filesystem-css.png) -1. Select the **Elements** (![Elements tool icon](./index-images/elements-tool-icon.png)) tool, and then in the DOM tree, expand the `` element, and then select the `

` element. - - The **Styles** pane displays the CSS rules that are applied to the `

` element. The **mapped file** (![Mapped file icon](./index-images/mapped-file-icon.png)) icon next to `styles.css:1` is a page with a green dot. The green dot means that any changes that you make to this CSS rule are mapped to `styles.css` in your `app` directory: + +## Related feature: Local Overrides + - ![The 'mapped file' icon, a page with two-way arrows](./index-images/workspaces-workspaces-demo-elements-styles-css.png) +**Local overrides** is a DevTools feature that's similar to a workspace. You can use an override when you want to experiment with changes to a webpage, and you need to display the changes across webpage loads, but you don't care about mapping your changes to the source code of the webpage. -1. Change the value of the `color` property of the `

` element to orange. To do this, select the `

` element in the **DOM Tree**. In the CSS rule for `h1`, click `fuchsia`, start typing **orange**, and then select **orange** from the color list: +**Local Overrides** saves the changes you make to a webpage in a folder of your choice, and organizes them in a folder structure that matches the URL of overridden resources. - ![Changing the color property in styles.css](./index-images/workspaces-workspaces-demo-elements-styles-css-pick-color.png) +The **Overrides** feature stores a copy of the webpage resources that you edit in DevTools. When you refresh the page, Microsoft Edge loads the local modified copy of files instead of the files on the server. -1. Open the copy of `styles.css` that's in your `app` directory in a text editor, such as Visual Studio Code. The `color` property is now set to the new color, which is orange in this example. The change was not only made in the copy of the file returned from the web server; the change was also made in your mapped file in your `app` workspace directory. +See also: +* [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md) -1. Refresh the page. -The color of the `

` element is still set to the new color. The change remains across a refresh, because when you made the change, DevTools saved the change to disk. When you refreshed the page, your local server served the modified copy of the file from disk. + +## Elements tool DOM tree edits are lost after refresh + + -**Tip:** You can also change the color by clicking the fucshia-colored swatch to open the color picker to pick a new color. The HEX value for the color you pick is the color name. +To make changes to an HTML source file, you need to use the **Sources** tool's **Workspace** tab, instead of the **Elements** tool. +Limitations of **Elements** tool > DOM tree edits: - -## Edit HTML and save changes to the source file +In the **Elements** tool, it's possible to change the DOM representation of the HTML document, which the browser engine constructed when it loaded the page. However, changes to the DOM can't be mapped back to HTML source files. You can make changes to the HTML content using the DOM tree in the **Elements** tool, but your changes to the DOM tree aren't saved to disk, and only affect the current browser session. -In the **Elements** tool, it's possible to change HTML tagging in a copy of the file that's returned by the server. However, to save your edits to a local source file, you need to use the **Sources** tool instead of the **Elements** tool. +See also: +* [Editing CSS by using the Styles tab in the Elements tool, when using the Workspace tab of the Sources tool](#editing-css-by-using-the-styles-tab-in-the-elements-tool-when-using-the-workspace-tab-of-the-sources-tool), above. - -#### Changing the DOM tree in the Elements tool doesn't save changes +Limitations of the **Sources** tool > **Page** tab: -You can make changes to the HTML content using the DOM tree in the **Elements** tool, but your changes to the DOM tree aren't saved to disk, and only affect the current browser session. +The **Page** tab of the **Sources** tool doesn't allow you to save changes to the file system. +* An HTML file that's opened via the **Page** tab can't be edited. +* A CSS or JS file that's opened via the **Page** tab can be edited, but the edits are not preserved across refreshes of the webpage. -The following steps demonstrate that edits in the DOM tree aren't preserved across page refreshes: -1. Continuing from above, select the **Elements** tool. +The following steps demonstrate that edits in the **Elements** tool DOM tree aren't preserved across page refreshes: -1. In the DOM tree, in the `

` element, select the text string `DevTools Workspaces Demo`, delete it, type the text string `I Love Cake`, and then press **Enter**. The rendered webpage shows the new heading text: +1. Set up the Workspaces demo as described in [Workspace tutorial (Sources tool Workspace tab)](./workspace-tutorial.md). - ![Attempting to change HTML from the DOM tree in the Elements tool](./index-images/workspaces-workspaces-demo-sources-page-h1.png) +1. In DevTools, select the **Elements** (``) tool. -1. Open the `index.html` file that's in your `app` directory in a text editor, such as Visual Studio Code. The change that you just made doesn't appear; the heading still reads "DevTools Workspaces Demo". +1. In the DOM tree, in the `

` element, select the text string `DevTools Workspaces Demo`, delete it, type the text string `I Love Cake`, and then press **Enter**. The rendered webpage shows the new heading text, **I Love Cake**: -1. In the browser, refresh the demo page. The page reverts to the original heading, "DevTools Workspaces Demo", because the DOM tree with your edit was discarded, and the DOM was re-created from the unchanged `index.html` file in your `app` workspace directory. + ![Attempting to change HTML from the DOM tree in the Elements tool](./index-images/elements-tool-h1.png) +1. Select the **Sources** tool, right-click `index.html`, and then select **Open in containing folder**. - + The page reverts to the original heading, "DevTools Workspaces Demo", because the DOM tree with your edit was discarded, and the DOM was re-created from the unchanged `index.html` file that's in your `/Demos/workspace/` directory. -#### Changing HTML from the Sources tool saves changes - -If you want to save a change to the webpage HTML, edit the HTML in the **Sources** tool with a workspace defined (in the **Filesystem** tab), rather than changing the HTML in the DOM tree in the **Elements** tool. +#### Why DOM tree edits aren't saved + -1. Continuing from above, click the **Sources** (![Sources tool icon.](./index-images/sources-tool-icon.png)) tab. +Changing the DOM tree in the **Elements**, per the above section, doesn't work. -1. In the **Navigator** pane on the left, select `index.html`. The HTML for the page opens. +* The tree of nodes that you see on the **Elements** tool represents the page's DOM. -1. Replace `

DevTools Workspaces Demo

` with `

I Love Cake

`, in the file listing (as opposed to the DOM tree in the **Elements** tool). +* To display a page, a browser fetches HTML over the network, parses the HTML, and then converts it into a tree of DOM nodes. -1. Press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS) to save the change. +* If the page has any JavaScript, that JavaScript may add, delete, or change DOM nodes. CSS can change the DOM, too, via the `content` property. -1. Refresh the page. The heading in the rendered page changes to "I Love Cake", because that string was saved in `index.html` in your mapped `app` directory: +* The browser eventually uses the DOM to determine what content it should present to browser users. - ![Change HTML from the Sources tool](./index-images/workspaces-workspaces-demo-sources-page-h1.png) +* Therefore, the final state of the page that users see may be very different from the HTML that the browser fetched. -1. Open the copy of `index.html` that's in your `app` directory in a text editor, such as Visual Studio Code. +* This makes it difficult for DevTools to resolve where a change made in the **Elements** tool should be saved, because the DOM is affected by HTML, JavaScript, and CSS. - The `

` element contains the new text, because you made the change using the **Sources** tool's editor to edit `index.html` and then saved the change, and that file was mapped in a workspace (the **Filesystem** tab), indicated by a green dot on the file's icon. +In short, the DOM tree, which the browser engine constructed, is different from the HTML document that was downloaded from the server. -## Edit JavaScript and save changes to the source file - -The main place to use the code editor of DevTools is the **Sources** tool. But sometimes you need to access other tools, such as the **Elements** tool or the **Console**, while editing files. The **Quick source** tool gives you just the editor from the **Sources** tool, while any tool is open. - - -To open the DevTools code editor alongside other tools: - -1. Continuing from above, select the **Elements** (![Elements tool icon.](./index-images/elements-tool-icon.png)) tool. - -1. Press **Ctrl+Shift+P** (Windows, Linux) or **Command+Shift+P** (macOS) to open the **Command Menu**. - -1. At the **Run** prompt, start typing **quick**, and then select **Show Quick source**: - - ![Open the 'Quick source' tool by using the Command Menu](./index-images/workspaces-workspaces-demo-search-show-quick-source.png) - +## Making the green "mapped" dots appear on files + - At the bottom of the DevTools window, the **Quick source** tool opens, displaying the contents of `index.html`, because that's the last file you edited in the **Sources** tool. If needed, click **Expand Quick View**, and make sure the **Elements** tool is selected. +If green "mapped" dots stop appearing on files in DevTools, such as in the **Workspace** tab; or if the **Changes** tool doesn't show expected changes: -1. Press **Ctrl+P** (Windows, Linux) or **Command+P** (macOS) to display the **Open File** prompt of the **Command Menu**: +* With DevTools displayed, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). - ![Opening script.js using the Open File dialog](./index-images/workspaces-workspaces-demo-search-script.png) + A green "mapped" dot next to a file in DevTools indicates that DevTools has established a mapping between a network resource of the page that's received from the web server, and the local source file in your `/Demos/workspace/` directory. The new file that you add in DevTools must be returned by the server, to be indicated as mapped. -1. Start typing **script**, and then select **script.js** that's in the **app/** directory. - The file listing is displayed in the **Quick source** tool. In the rendered demo webpage, the **Edit files with Workspaces** hyperlink is not styled with italic. +If you add a new `.js` file in the workspace and you want a green "sync" circle to appear on the added `.js` file, and have the file represented in the **Changes** tool: -1. Use the **Quick source** tool to add the following code to the bottom of **script.js**: +1. Reference the added `.js` file in the HTML file, such as the line `` within the `` tag. - ```javascript - document.querySelector('a').style = 'font-style:italic'; - ``` +1. Make sure there's code in the `.js` file, such as the line `console.log('hello from test.js');`. -1. Press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS) to save the change. +1. Press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS). Your change is saved, and the asterisk disappears. -1. Refresh the page. If needed, click and hold the **Refresh** button and then select **Hard Refresh**. The **Edit files with Workspaces** hyperlink on the page is now italicized: +1. With DevTools displayed, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). - ![The link on the page is now italicized](./index-images/workspaces-workspaces-demo-elements-styles-quick-source-script.png) +See also: +* [Track changes to files using the Changes tool](../changes/changes-tool.md) ## See also -* [Open a demo folder in the Sources tool and edit a file](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-in-the-sources-tool-and-edit-a-file) in _Sample code for DevTools_. +* [Workspace tutorial (Sources tool Workspace tab)](./workspace-tutorial.md) +* [Open a demo folder from the Workspace tab in the Sources tool](../../devtools-guide-chromium/sample-code/sample-code.md#open-a-demo-folder-from-the-workspace-tab-in-the-sources-tool) in _Sample code for DevTools_. +* [Track changes to files using the Changes tool](../changes/changes-tool.md) +* [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md) diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-css-pick-color.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-css-pick-color.png new file mode 100644 index 0000000000..da378c0b55 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-css-pick-color.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-css.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-css.png new file mode 100644 index 0000000000..da90ad7cb7 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-css.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-quick-source-script.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-quick-source-script.png new file mode 100644 index 0000000000..c45cba3632 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-styles-quick-source-script.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/elements-tool-icon.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-tool-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/workspaces/index-images/elements-tool-icon.png rename to microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/elements-tool-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/mapped-file-icon.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/mapped-file-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/workspaces/index-images/mapped-file-icon.png rename to microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/mapped-file-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/new-file.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/new-file.png new file mode 100644 index 0000000000..0ac08e92c0 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/new-file.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/new-js-file.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/new-js-file.png new file mode 100644 index 0000000000..46a6f54b6c Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/new-js-file.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/quick-source-script-js.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/quick-source-script-js.png new file mode 100644 index 0000000000..9b3649ea44 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/quick-source-script-js.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-tool-h1.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-tool-h1.png new file mode 100644 index 0000000000..2c975e5f76 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-tool-h1.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/index-images/sources-tool-icon.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-tool-icon.png similarity index 100% rename from microsoft-edge/devtools-guide-chromium/workspaces/index-images/sources-tool-icon.png rename to microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-tool-icon.png diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace-css.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace-css.png new file mode 100644 index 0000000000..339b3db9c1 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace-css.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace-folder.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace-folder.png new file mode 100644 index 0000000000..837c0fd269 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace-folder.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace.png new file mode 100644 index 0000000000..be534f3d10 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/sources-workspace.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/workspaces-demo.png b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/workspaces-demo.png new file mode 100644 index 0000000000..51f4e2cbb9 Binary files /dev/null and b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial-images/workspaces-demo.png differ diff --git a/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial.md b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial.md new file mode 100644 index 0000000000..cbd61ca883 --- /dev/null +++ b/microsoft-edge/devtools-guide-chromium/workspaces/workspace-tutorial.md @@ -0,0 +1,355 @@ +--- +title: Workspace tutorial (Sources tool Workspace tab) +description: Steps to use DevTools as an IDE, such as making webpage edits in the Sources tool's Workspace tab, saving changes to the source files on disk. # key words before col 158 +author: MSEdgeTeam +ms.author: msedgedevrel +ms.topic: conceptual +ms.service: microsoft-edge +ms.subservice: devtools +ms.date: 04/22/2025 +--- + +# Workspace tutorial (Sources tool Workspace tab) + +Use the following steps to use DevTools as an IDE, such as making webpage edits in the **Sources** tool's **Workspace** tab, saving changes to the source files on disk. + +You can read or follow these steps that show how to set up and using a workspace in DevTools. After you set up a workspace, the changes that you make to the files in the workspace, by using DevTools, are saved on your local computer. + + + +## Step 1: Clone the Edge Demos repo to your local drive + + + +First, you set up a local directory that contains the source files for the webpage, such as the Workspaces demo webpage. + +Clone the **MicrosoftEdge / Demos** repo to your local drive, including the `/workspaces/` demo folder, as follows: + +1. If not done already, [Download git](https://git-scm.com/downloads) and install it. + +1. Go to [MicrosoftEdge / Demos](https://github.com/MicrosoftEdge/Demos) in a new window or tab. + +1. Click the **Code** drop-down button, and then click the **Copy url to clipboard** button. + + The URL is copied to the clipboard: `https://github.com/MicrosoftEdge/Demos.git` + + Or, if you have GitHub Desktop installed, click **Open with GitHub Desktop** to clone the repo, and skip the command prompt step below. + + Or, you can use Visual Studio Code's **Source Control** pane to clone the repo, and skip the command prompt step below. + +1. Open a command prompt, such as git bash. + +1. Clone the repo to your local drive, entering the URL string that you copied from the GitHub repo. If you use the git bash command prompt: + + ```Shell + # Example location where the repo directory will be added: + cd ~/GitHub + git clone https://github.com/MicrosoftEdge/Demos.git + ``` + +For details about cloning a repo, see: +* [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs. + +Continue with the next section. + + + +## Step 2: Start the localhost server in the webpage source files directory + + +1. If not done already, install an up-to-date version of Node.js and npm from [Node.js](https://nodejs.org). + + See also: + * [Install Node.js and Node Package Manager (npm)](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-4-install-nodejs-and-node-package-manager-npm) in _Installing the DevTools extension for Visual Studio Code_. + +1. Go to a command prompt, such as the git bash shell, or the Terminal pane in Microsoft Visual Studio Code. + +1. Change to the `Demos` repo directory's `workspaces` directory: + + ```Shell + cd ~/GitHub/Demos/workspaces + pwd + ``` + + A directory for use with the **Sources** tool's **Workspace** tab can have any name. This demo directory is named `/workspaces/`. + +1. Create a working branch named "test" and switch to it (to avoid altering the demo's files in the "main" branch): + + ```Shell + git checkout -b test + ``` + + That's equivalent to: + + ```Shell + git branch test + git switch test + ``` + +1. Run one of the following commands, to start the web server: + + ```bash + # Node.js option + npx http-server + ``` + + For more information and options, see [Start the server (npx http-server)](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#start-the-server-npx-http-server) in _Installing the DevTools extension for Visual Studio Code_. + + ``` bash + # Python 2 option + cd ~/GitHub/demos/workspaces + python -m SimpleHTTPServer + ``` + + ``` bash + # Python 3 option + cd ~/GitHub/demos/workspaces + python -m http.server + ``` + +1. Open a tab in Microsoft Edge, and go to the locally hosted version of the site. You typically access it by going to`localhost:8080`: + + ![The DevTools Workspaces Demo](./workspace-tutorial-images/workspaces-demo.png) + + Another common equivalent URL is `http://0.0.0.0:8080`. The default port number for the Python server option is `8000`. The exact [port number](https://wikipedia.org/wiki/Port_(computer_networking)#Use_in_URLs) might be different. + + The **DevTools Workspaces Demo** webpage opens. + + (The link in the latest demo might say either "Edit file with workspaces" or "Edit and save files in a workspace (Sources tool Workspace tab)".) + +See also: +* [Running a simple local HTTP server](https://developer.mozilla.org/docs/Learn/Common_questions/set_up_a_local_testing_server#running_a_simple_local_http_server) in _How do you set up a local testing server?_ at MDN - shows Python. + + +Continue with the next section. + + + +## Step 3: Add a Workspace folder in the Sources tool + + + +Next, define a Workspace in DevTools: + +1. Right-click the locally hosted **DevTools Workspaces Demo** webpage and then select **Inspect**. Or, press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS). + + DevTools opens. + +1. Click the **Sources** (![Sources tool icon](./workspace-tutorial-images/sources-tool-icon.png)) tab. + +1. In the **Navigator** pane (on the left), click the **Workspace** tab (which is grouped with the **Page** tab): + + ![The Workspace tab](./workspace-tutorial-images/sources-workspace.png) + +1. Click **Add folder** button. + + The **Select Folder** dialog opens. + +1. Go to the cloned `/Demos/workspace/` directory that you created. For example, in the **Folder:** text box, enter the path, such as `C:\Users\localAccount\GitHub\Demos\workspaces\`. + +1. Click the **Select Folder** button. + + DevTools prompts you whether to grant DevTools full access to your `/workspaces/` directory. + +1. Click the **Allow** button, to give DevTools permission to read and write to the directory. + + In the **Workspace** tab are page icons that have a green "mapped" dot, for `index.html`, `script.js`, and `styles.css`. The green "mapped" dot indicates that DevTools has established a mapping between a network resource of the page that's received from the web server, and the local source file in your `/Demos/workspace/` directory: + + ![The Workspace tab has a green "mapped" dot indicating a mapping between a resource received from the server and a local source file](./workspace-tutorial-images/sources-workspace-folder.png) + +Continue with the next section. + + + +## Step 4: Save a CSS change to disk (via Elements tool Styles tab) + + +Next, you edit CSS and save changes to the source file. We here use the **Elements** tool's **Styles** tab, assisted by its user interface controls, though we could directly edit the CSS file in the **Sources** tool's **Workspace** tab's file editor. + +To make a change in the CSS file and save it to disk by using the **Elements** tool's **Styles** tab: + +1. In the **Sources** tool, in the **Workspace** tab (grouped with the **Page** tab), select `styles.css` to open it in the editor pane. The `color` property of the `h1` element is set to `fuchsia`: + + ![View styles.css in a text editor](./workspace-tutorial-images/sources-workspace-css.png) + +1. Select the **Elements** (![Elements tool icon](./workspace-tutorial-images/elements-tool-icon.png)) tool; then in the DOM tree, expand the `` element; and then select the `

` element. + + The **Styles** pane displays the CSS rules that are applied to the `

` element. The **mapped file** (![Mapped file icon](./workspace-tutorial-images/mapped-file-icon.png)) icon next to `styles.css:1` is a page with a green "mapped" dot. The green "mapped" dot means that any changes that you make to this CSS rule are mapped to `styles.css` in your `/Demos/workspace/` directory: + + ![The 'mapped file' icon, a page with two-way arrows](./workspace-tutorial-images/elements-styles-css.png) + +1. Change the value of the `color` property of the `

` element to orange. To do this, select the `

` element in the **DOM Tree**. In the CSS rule for `h1`, click `fuchsia`, start typing **orange**, and then select **orange** from the color list: + + ![Changing the color property in styles.css](./workspace-tutorial-images/elements-styles-css-pick-color.png) + +1. Select the **Sources** tool, right-click `styles.css`, and then select **Open in containing folder**. + + File Explorer or Finder opens. + +1. Open the copy of `styles.css` that's in your `/Demos/workspace/` directory in a text editor, such as Visual Studio Code. The `color` property is now set to the new color, which is orange in this example. The change was not only made in the copy of the file returned from the web server; the change was also made in your mapped file in your `/Demos/workspace/` workspace directory. + +1. Refresh the page. + +The color of the `

` element is still set to the new color. The change remains across a refresh, because when you made the change, DevTools saved the change to disk. When you refreshed the page, your local server served the modified copy of the file from disk. + +**Tip:** You can also change the color by clicking the fucshia-colored swatch to open the color picker to pick a new color. The HEX value for the color you pick is the color name. + +Continue with the next section. + + + +## Step 5: Save an HTML change to disk (via Sources tool Workspace tab) + + + + +Next, edit HTML and save changes to the source file. To save changes to the webpage HTML file, add the source code folder in the **Sources** tool's **Workspace** tab, and then edit the HTML in the **Sources** tool. (Changes aren't made to the source file by merely changing the HTML in the DOM tree in the **Elements** tool.) + +The DevTools **Workspace** tab is similar to using an editor to edit the HTML source file, but enables editing the HTML source file directly within DevTools. + +1. Continuing from above, in DevTools, click the **Sources** (![Sources tool icon.](./workspace-tutorial-images/sources-tool-icon.png)) tab. + +1. In the **Navigator** pane on the left, in the **Workspace** tab (grouped with the **Page** tab), select `index.html`. + + The **index.html** tab opens in the **Sources** tool. + +1. In the the `

` tag, replace "DevTools Workspaces Demo" with "I Love Cake". + + An asterisk appears next to `index.html`. + +1. Press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS). + + Your change is saved, and the asterisk disappears. + + You made the change in the file listing, rather than in the DOM tree in the **Elements** tool. + +1. Refresh the page. The heading in the rendered page changes to "I Love Cake", because that string was saved in `index.html` in your mapped `/Demos/workspace/` directory: + + ![Change HTML from the Sources tool](./workspace-tutorial-images/sources-tool-h1.png) + +1. In the **Sources** tool, right-click `index.html`, and then select **Open in containing folder**. + + File Explorer or Finder opens. + +1. Open the copy of `index.html` that's in your `/Demos/workspace/` directory in a text editor, such as Visual Studio Code. + + The `

` element contains the new text, "I Love Cake", because you made the change using the **Sources** tool's editor to edit `index.html` and then saved the change, and that file was mapped in a workspace (the **Workspace** tab), indicated by a green "mapped" dot on the file's icon. + + Many developers don't write HTML directly, but instead use approaches such as: + * A server-side language, such as Java, Python, or PHP. + * A site generator, such as Eleventy. + * A client-side framework that uses JavaScript code. + * A markup language other than HTML, such as Markdown. + + This means that in practice, few developers change HTML files in the **Workspace** tab. Most devs produce HTML files by using a different type of source file, such as a React component JS source file, and then rebuild and reload (which may happen automatically). + +1. Long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). + + In the **Workspace** tab, green "mapped" dots appear on all the HTML, CSS, and JS files. + +Continue with the next section. + + + +## Step 6: Save a JavaScript change to disk + + +Continuing from above, next, you'll edit the Workspace demo's JavaScript file and save changes to the source file. To save edits to a JavaScript source file, you can use DevTools like an IDE, after adding the source code folder in the **Workspace** tab of the **Sources** tool. You can then edit and save the JavaScript file in the **Sources** tool's editor. + +In the rendered demo webpage, to style the **Edit and save files in a workspace (Sources tool Workspace tab)** hyperlink with italics: + +1. In DevTools, select the **Sources** tool, and then select the **Workspace** tab, which is grouped with the **Page** tab. + +1. In the **Workspace** tab, select `script.js`. + + `script.js` opens in a tab within the editor pane of the **Sources** tool. + +1. In the editor pane, add the following code to the bottom of **script.js**: + + ```javascript + document.querySelector('a').style = 'font-style:italic'; + ``` + + An asterisk appears on the `script.js` tab. + +1. Press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS). + + `script.js` is saved, and the asterisk is removed from the `script.js` tab. + +1. Refresh the page. + +1. If there's no longer a green "mapped" dot on the HTML, JS, or CSS file, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). + + The **Edit files with Workspaces** (or **Edit and save files in a workspace (Sources tool Workspace tab)**) hyperlink on the page is now italicized: + + ![The link on the page is now italicized](./workspace-tutorial-images/elements-styles-quick-source-script.png) + +Continue with the next section. + + + +## Step 7: Add a .js file using DevTools + + +1. In the **Sources** tool, in the **Workspace** tab, right-click the `/workspaces/` folder, and then select the **New file** menuitem. + + A file named `NewFile` is added: + + ![A new file added via the Workspace tab](./workspace-tutorial-images/new-file.png) + +1. Right-click `NewFile` in the **Workspace** tab and then select **Rename**. + +1. Rename the file to `test.js`. + +1. In `test.js`, add the line: `console.log('hello from test.js');` + +1. In the **Sources** tool, in the **Workspace** tab, select `index.html`. + +1. In `index.html`, below the line ``, add the line: `` + +1. Press **Ctrl+S** (Windows, Linux) or **Command+S** (macOS). + + `index.html` is saved. + +1. Long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Hard refresh** (**Ctrl+Shift+R**). + + In the **Workspace** tab, green "mapped" dots appear on all the HTML, CSS, and JS files: + + ![Adding a reference to the JS file in the HTML file, and green "mapped" dots on all webpage files](./workspace-tutorial-images/new-js-file.png) + +This completes the tutorial. + +If you want to revert the edits in your `/workspace/` folder, you can use git commands at a command prompt, or use GitHub Desktop, to revert the changes in the current branch, such as "main" or "test". + + + +## See also + + +* [Edit and save files in a workspace (Sources tool Workspace tab)](index.md) +* [Get started viewing and changing CSS](../css/index.md) +* [Get started debugging JavaScript](../javascript/index.md) + + + +> [!NOTE] +> Portions of this page are modifications based on work created and [shared by Google](https://developers.google.com/terms/site-policies) and used according to terms described in the [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). +> The original page is found [here](https://developer.chrome.com/docs/devtools/workspaces/) and is authored by Kayce Basques. + +[![Creative Commons License](../../media/cc-logo/88x31.png)](https://creativecommons.org/licenses/by/4.0) +This work is licensed under a [Creative Commons Attribution 4.0 International License](https://creativecommons.org/licenses/by/4.0). diff --git a/microsoft-edge/extensions-chromium/developer-guide/devtools-extension.md b/microsoft-edge/extensions-chromium/developer-guide/devtools-extension.md index ca62b8f093..603a09f6f8 100644 --- a/microsoft-edge/extensions-chromium/developer-guide/devtools-extension.md +++ b/microsoft-edge/extensions-chromium/developer-guide/devtools-extension.md @@ -250,7 +250,7 @@ To test your changes in Microsoft Edge, reload your extension from the `edge://e 1. Open DevTools (**F12**). -1. In the **Activity bar**, select the **Sample Panel** tool (tab): +1. In the **Activity Bar**, select the **Sample Panel** tool (tab): ![The new tool tab and panel in DevTools](./devtools-extension-images/devtools-extension-with-panel.png) diff --git a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program-images/status-icon.png b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program-images/status-icon.png new file mode 100644 index 0000000000..33e8a4c625 Binary files /dev/null and b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program-images/status-icon.png differ diff --git a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md index 1483767277..002bb9bd3a 100644 --- a/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md +++ b/microsoft-edge/extensions-chromium/publish/verify-microsoft-edge-program.md @@ -95,12 +95,18 @@ Microsoft uses these documents to verify that the company is authorized to do bu ## Checking your verification status -You can check verification status at Partner Center in **[Account Settings | Legal Info](https://partner.microsoft.com/dashboard/account/v3/organization/legalinfo#developer)**, where you can see: +You can check verification status at Partner Center in **[Account Settings | Legal Info](https://partner.microsoft.com/dashboard/account/v3/organization/legalinfo#developer)**, where you can see the following: 1. One or more tabs such as **Partner**, **Developer**, or **Reseller**, depending on the programs in which your organization is enrolled. -1. The **Developer** tab includes the **Account details** progress bar showing the stages of verification and any pending stages. -1. Your verification status: **Pending**, **Authorized/Accepted**, or **Action Required/Rejected**, with a status icon. For more information, see [Verification status](#verification-status). + +1. The **Developer** tab includes a status icon (from **Account details**): + + ![The Account details status icon](./verify-microsoft-edge-program-images/status-icon.png) + +1. Your verification status: **Pending**, **Authorized/Accepted**, or **Action Required/Rejected**, with a status icon. See [Verification status](#verification-status), below. + 1. The **Legal business profile** progress bar with an information icon you can select to get more information. + 1. A **Fix now** button to start resolving verification issues. diff --git a/microsoft-edge/extensions-chromium/samples.md b/microsoft-edge/extensions-chromium/samples.md index 4b24cc027c..489c0a3b9a 100644 --- a/microsoft-edge/extensions-chromium/samples.md +++ b/microsoft-edge/extensions-chromium/samples.md @@ -35,4 +35,4 @@ in https://github.com/MicrosoftDocs/edge-developer repo, remove prefix https://l ## See also -* [Download or clone the Demos repo](../devtools-guide-chromium/sample-code/sample-code.md#download-or-clone-the-demos-repo) in _Sample code for DevTools_. +* [Clone the Edge Demos repo to your drive](../devtools-guide-chromium/sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. diff --git a/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md b/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md index fdfc6ab472..2a954dac4a 100644 --- a/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md +++ b/microsoft-edge/progressive-web-apps-chromium/demo-pwas.md @@ -143,4 +143,4 @@ BPM Techno uses the following features: ## See also -* [Download or clone the Demos repo](../devtools-guide-chromium/sample-code/sample-code.md#download-or-clone-the-demos-repo) in _Sample code for DevTools_. +* [Clone the Edge Demos repo to your drive](../devtools-guide-chromium/sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. diff --git a/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar.md b/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar.md index af07aa925c..733be50aba 100644 --- a/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar.md +++ b/microsoft-edge/progressive-web-apps-chromium/how-to/sidebar.md @@ -207,7 +207,7 @@ The source code for the PWAmp demo app has the following, to support the Microso * The `isSidebarPWA` variable, which uses the `navigator.userAgentData` JavaScript API in the [app.js](https://github.com/MicrosoftEdge/Demos/blob/main/pwamp/app.js#L14) file. -You can find the entire PWAmp demo source code at [MicrosoftEdge / Demos > pwamp](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp). To download the source code locally, see [Download or clone the Demos repo](../../devtools-guide-chromium/sample-code/sample-code.md#download-or-clone-the-demos-repo) in _Sample code for DevTools_. +You can find the entire PWAmp demo source code at [MicrosoftEdge / Demos > pwamp](https://github.com/MicrosoftEdge/Demos/tree/main/pwamp). To download the source code locally, see [Clone the Edge Demos repo to your drive](../../devtools-guide-chromium/sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. diff --git a/microsoft-edge/toc.yml b/microsoft-edge/toc.yml index b94a1631af..91c5e93062 100644 --- a/microsoft-edge/toc.yml +++ b/microsoft-edge/toc.yml @@ -53,7 +53,7 @@ # Experimental web platform features - name: Experimental web platform features items: -# - name: Experimental web platform features # firstchild overview/nav for toc bucket +# - name: Experimental web platform features # href: ./dir/filename.md - name: Use origin trials in Microsoft Edge @@ -328,21 +328,21 @@ # Inspect tool ---------------------------------------------------------------- - name: Inspect tool items: - - name: Analyze pages using the Inspect tool # added article + - name: Analyze pages using the Inspect tool href: ./devtools-guide-chromium/css/inspect.md displayName: Inspect tool # Device Emulation ------------------------------------------------------------ - - name: Device Emulation # orig: Mobile simulation + - name: Device Emulation items: - - name: Emulate mobile devices (Device Emulation) # orig: Simulate mobile devices with Device Mode + - name: Emulate mobile devices (Device Emulation) href: ./devtools-guide-chromium/device-mode/index.md - displayName: device emulator, device mode, device simulation, device simulator # also Network conditions tool (1x), Settings > Devices (1x) + displayName: device emulator, device mode, device simulation, device simulator, throttle, throttling # also Network conditions tool (1x), Settings > Devices (1x) - - name: Emulate dual-screen and foldable devices # added article + - name: Emulate dual-screen and foldable devices href: ./devtools-guide-chromium/device-mode/dual-screen-and-foldables.md displayName: Device Emulation, Device Emulator, Device Mode - - name: Emulate and test other browsers # orig: Emulate and Test Other Browsers (orphaned) + - name: Emulate and test other browsers href: ./devtools-guide-chromium/device-mode/testing-other-browsers.md displayName: Device Emulation, Device Emulator, Device Mode # Welcome tool ---------------------------------------------------------------- @@ -370,11 +370,11 @@ href: ./devtools-guide-chromium/css/grid.md displayName: Elements tool - - name: Edit CSS font styles and settings in the Styles pane # added article + - name: Edit CSS font styles and settings in the Styles pane href: ./devtools-guide-chromium/inspect-styles/edit-fonts.md displayName: Elements tool - - name: Style editing for CSS-in-JS frameworks # added article from blog + - name: Style editing for CSS-in-JS frameworks href: ./devtools-guide-chromium/css/css-in-js.md displayName: Elements tool @@ -416,15 +416,15 @@ href: ./devtools-guide-chromium/console/live-expressions.md displayName: Console tool - - name: Fix JavaScript errors that are reported in the Console # added article + - name: Fix JavaScript errors that are reported in the Console href: ./devtools-guide-chromium/console/console-debug-javascript.md displayName: Console tool, Sources tool, Network tool - - name: Interact with the DOM using the Console # added article + - name: Interact with the DOM using the Console href: ./devtools-guide-chromium/console/console-dom-interaction.md displayName: Console tool - - name: Filter Console messages # added article + - name: Filter Console messages href: ./devtools-guide-chromium/console/console-filters.md displayName: Console tool # Sources tool ---------------------------------------------------------------- @@ -442,7 +442,7 @@ href: ./devtools-guide-chromium/javascript/breakpoints.md displayName: Sources tool - - name: JavaScript debugging features # orig: "JavaScript debugging reference" + - name: JavaScript debugging features href: ./devtools-guide-chromium/javascript/reference.md displayName: Sources tool @@ -454,11 +454,15 @@ href: ./devtools-guide-chromium/javascript/snippets.md displayName: Sources tool - - name: Edit files with Workspaces (Filesystem tab) + - name: Edit and save files in a workspace (Sources tool Workspace tab) # Use DevTools as an in-browser IDE href: ./devtools-guide-chromium/workspaces/index.md - displayName: Sources tool, Quick source tool # Quick source tool is covered in section "Step 4: Save a JavaScript change to disk" + displayName: Sources tool + + - name: Workspace tutorial (Sources tool Workspace tab) + href: ./devtools-guide-chromium/workspaces/workspace-tutorial.md + displayName: Sources tool - - name: Override webpage resources with local copies (Overrides tab) # added article + - name: Override webpage resources with local copies (Overrides tab) href: ./devtools-guide-chromium/javascript/overrides.md displayName: Sources tool @@ -492,7 +496,7 @@ href: ./devtools-guide-chromium/network/reference.md displayName: Network tool - - name: Network issues guide # added article + - name: Network issues guide href: ./devtools-guide-chromium/network/issues.md displayName: Network tool @@ -500,7 +504,7 @@ href: ./devtools-guide-chromium/resources/index.md displayName: Command Menu, Network tool, Sources tool, Application tool, Network tool - - name: Service worker improvements # added article + - name: Service worker improvements href: ./devtools-guide-chromium/service-workers/index.md displayName: Network tool, Application tool, Sources tool # Performance tool ------------------------------------------------------------ @@ -672,7 +676,7 @@ href: ./devtools-guide-chromium/issues/index.md displayName: Issues tool # Lighthouse tool ------------------------------------------------------------- - - name: Lighthouse tool # new jump page # main article is in Accessibility + - name: Lighthouse tool # jump page; main article is in Accessibility items: - name: Lighthouse tool href: ./devtools-guide-chromium/lighthouse/lighthouse-tool.md @@ -692,7 +696,7 @@ # Network conditions tool ----------------------------------------------------- - name: Network conditions tool items: - - name: Network conditions tool # new jump page + - name: Network conditions tool # starter page w/ png and links href: ./devtools-guide-chromium/network-conditions/network-conditions-tool.md displayName: Network conditions tool @@ -713,15 +717,15 @@ # Performance monitor tool ---------------------------------------------------- - name: Performance monitor tool items: - - name: Measure runtime performance of a page using the Performance monitor tool # added article + - name: Measure runtime performance of a page using the Performance monitor tool href: ./devtools-guide-chromium/performance-monitor/performance-monitor-tool.md displayName: Performance monitor tool # Quick source tool ----------------------------------------------------------- - - name: Quick source tool # jump page + - name: Quick source tool items: - name: Display or edit source files using the Quick source tool href: ./devtools-guide-chromium/quick-source/quick-source-tool.md - displayName: Quick source tool # also indexed elsewhere in this file + displayName: Quick source tool # also indexed in "Sources tool overview" # Recorder tool ----------------------------------------------------------- - name: Recorder tool items: @@ -736,7 +740,7 @@ href: ./devtools-guide-chromium/rendering-tools/rendering-tool.md displayName: Rendering tool - - name: Emulate dark or light schemes in the rendered page # added article + - name: Emulate dark or light schemes in the rendered page href: ./devtools-guide-chromium/accessibility/preferred-color-scheme-simulation.md displayName: Rendering tool @@ -746,7 +750,7 @@ # Search tool ----------------------------------------------------------------- - name: Search tool items: - - name: Find source files for a page using the Search tool # added article + - name: Find source files for a page using the Search tool href: ./devtools-guide-chromium/search/search-tool.md displayName: Search tool # Security tool --------------------------------------------------------------- @@ -758,17 +762,17 @@ # Sensors tool ---------------------------------------------------------------- - name: Sensors tool items: - - name: Override geolocation with the Sensors tool # orig: was in "Mobile simulation" + - name: Override geolocation with the Sensors tool href: ./devtools-guide-chromium/device-mode/geolocation.md displayName: Sensors tool, Device Emulation - - name: Simulate device orientation with the Sensors tool # orig: was in "Mobile simulation" + - name: Simulate device orientation with the Sensors tool href: ./devtools-guide-chromium/device-mode/orientation.md displayName: Sensors tool, Device Emulation -# Source Maps Monitor tool ---------------------------------------------------- +# Source maps monitor tool ---------------------------------------------------- - name: Source Maps Monitor tool items: - - name: Source Maps Monitor tool # no article yet + - name: Source Maps Monitor tool href: ./devtools-guide-chromium/source-maps-monitor/source-maps-monitor-tool.md displayName: Source maps monitor tool # WebAudio tool --------------------------------------------------------------- @@ -847,7 +851,7 @@ displayName: Elements tool, Accessibility tab # Inspect tool (distinct from Tools > Inspect tool bucket) - - name: Use the Inspect tool to detect accessibility issues by hovering over the webpage # added article + - name: Use the Inspect tool to detect accessibility issues by hovering over the webpage href: ./devtools-guide-chromium/accessibility/test-inspect-tool.md displayName: Inspect tool # tests Screen reader support, Keyboard support, Text contrast @@ -867,25 +871,25 @@ - name: Alt-text for images items: - - name: Automatically test a webpage for accessibility issues # added article + - name: Automatically test a webpage for accessibility issues href: ./devtools-guide-chromium/accessibility/test-issues-tool.md displayName: Issues tool - name: Keyboard support items: - - name: Check for keyboard support by using the Tab and Enter keys # added article + - name: Check for keyboard support by using the Tab and Enter keys href: ./devtools-guide-chromium/accessibility/test-tab-enter-keys.md displayName: keyboard support - - name: Analyze the lack of indication of keyboard focus # added article + - name: Analyze the lack of indication of keyboard focus href: ./devtools-guide-chromium/accessibility/test-analyze-no-focus-indicator.md displayName: keyboard focus - - name: Analyze keyboard support on forms # added article + - name: Analyze keyboard support on forms href: ./devtools-guide-chromium/accessibility/test-analyze-no-keyboard-support.md displayName: keyboard support - - name: Test keyboard support using the Source Order Viewer # added article + - name: Test keyboard support using the Source Order Viewer href: ./devtools-guide-chromium/accessibility/test-tab-key-source-order-viewer.md displayName: Elements tool, Accessibility tab @@ -895,15 +899,15 @@ href: ./devtools-guide-chromium/accessibility/color-picker.md displayName: Elements tool, Styles tab, Color Picker - - name: Check text-color contrast in the default state using the Inspect tool # added article + - name: Check text-color contrast in the default state using the Inspect tool href: ./devtools-guide-chromium/accessibility/test-inspect-text-contrast.md displayName: Inspect tool - - name: Verify accessibility of all states of elements # added article + - name: Verify accessibility of all states of elements href: ./devtools-guide-chromium/accessibility/test-inspect-states.md displayName: Elements tool, Styles tab, hov, Toggle Element State, Force element state - - name: Check for contrast issues with dark theme and light theme # added article + - name: Check for contrast issues with dark theme and light theme href: ./devtools-guide-chromium/accessibility/test-dark-mode.md displayName: Rendering tool, dark mode, light mode, dark scheme, light scheme @@ -913,37 +917,37 @@ href: ./devtools-guide-chromium/accessibility/accessibility-tab.md displayName: Elements tool, Accessibility tab, screen readers, Accessibility Tree, ARIA attributes, Computed Properties - - name: Check the Accessibility Tree for keyboard and screen reader support # added article + - name: Check the Accessibility Tree for keyboard and screen reader support href: ./devtools-guide-chromium/accessibility/test-accessibility-tree.md displayName: Elements tool, Accessibility tab, screen readers # Rendering tool (distinct from Tools > Rendering tool) - name: Vision deficiencies (Rendering tool) items: - - name: Emulate vision deficiencies # added article + - name: Emulate vision deficiencies href: ./devtools-guide-chromium/accessibility/emulate-vision-deficiencies.md displayName: Rendering tool - - name: Verify that a page is usable by people with color blindness # added article + - name: Verify that a page is usable by people with color blindness href: ./devtools-guide-chromium/accessibility/test-color-blindness.md displayName: Rendering tool - - name: Verify that a page is usable with blurred vision # added article + - name: Verify that a page is usable with blurred vision href: ./devtools-guide-chromium/accessibility/test-blurred-vision.md displayName: Rendering tool - - name: Simulate reduced motion # added article + - name: Simulate reduced motion href: ./devtools-guide-chromium/accessibility/reduced-motion-simulation.md displayName: Rendering tool - - name: Verify that a page is usable with UI animation turned off # added article + - name: Verify that a page is usable with UI animation turned off href: ./devtools-guide-chromium/accessibility/test-reduced-ui-motion.md displayName: Rendering tool # Device Emulation (distinct from Tools > Device Emulation) - name: Usable when narrow (Device Emulation) items: - - name: Verify that the webpage layout is usable when narrow # added article + - name: Verify that the webpage layout is usable when narrow href: ./devtools-guide-chromium/accessibility/narrow.md displayName: Device Emulation, Device Emulator # /Accessibility @@ -952,15 +956,15 @@ href: ./devtools-guide-chromium/sample-code/sample-code.md displayName: sample code, demo # IE mode --------------------------------------------------------------------- - - name: Use DevTools in Internet Explorer mode (IE mode) # added article + - name: Use DevTools in Internet Explorer mode (IE mode) href: ./devtools-guide-chromium/ie-mode/index.md displayName: IE mode # DevTools Protocol ----------------------------------------------------------- - - name: Microsoft Edge DevTools Protocol # added article + - name: Microsoft Edge DevTools Protocol href: devtools-protocol-chromium/index.md displayName: DevTools Protocol # Contact --------------------------------------------------------------------- - - name: Contact the Microsoft Edge DevTools team # added article + - name: Contact the Microsoft Edge DevTools team href: ./devtools-guide-chromium/contact.md displayName: feedback, log issues, enter issues, report issues, reporting issues, support # ============================================================================= @@ -971,6 +975,9 @@ - name: Microsoft Edge DevTools extension for Visual Studio Code href: ./visual-studio-code/microsoft-edge-devtools-extension.md + # - name: Use DevTools as an IDE + # href: + - name: Get started items: - name: Installing the DevTools extension for Visual Studio Code @@ -1420,11 +1427,11 @@ displayName: HoloLens2_GettingStarted # repo dir name - name: Getting Started tutorials - href: ./webview2/get-started/get-started.md # delete & redir? + href: ./webview2/get-started/get-started.md displayName: GettingStartedGuides # repo dir name - name: WebView2 sample apps - href: ./webview2/code-samples-links.md # delete & redir? + href: ./webview2/code-samples-links.md # ----------------------------------------------------------------------------- - name: Navigation, events, and authentication @@ -1543,7 +1550,7 @@ href: ./webview2/concepts/security.md # ----------------------------------------------------------------------------- - - name: Test and automation for WebView2 apps # vs. Edge "Test and automation" + - name: Test and automation for WebView2 apps items: - name: Test upcoming APIs and features href: ./webview2/how-to/set-preview-channel.md @@ -1569,7 +1576,7 @@ - name: Debug WebView2 apps items: - name: Debug WebView2 apps - href: ./webview2/how-to/debug.md # can delete + href: ./webview2/how-to/debug.md - name: Debug WebView2 apps with Microsoft Edge DevTools href: ./webview2/how-to/debug-devtools.md @@ -1599,7 +1606,7 @@ displayName: remotely debug # ----------------------------------------------------------------------------- - - name: Process and threading model # can change to Architecture after arch article added + - name: Process and threading model items: # - name: Architecture of WebView2 # href: ./webview2/concepts/architecture.md # not created @@ -1644,7 +1651,7 @@ items: - name: WebView2 API Reference href: ./webview2/webview2-api-reference.md - displayName: functions, methods, .NET, HoloLens, WinRT, Win32, JavaScript # buckets not in "Filter by title" + displayName: functions, methods, .NET, HoloLens, WinRT, Win32, JavaScript # toc bucket names - name: .NET items: @@ -1706,7 +1713,7 @@ uid: 'WebView2Script!WebView:class' # ----------------------------------------------------------------------------- - name: WebView2 end-user FAQ - href: ./webview2/concepts/end-user-faq.md # move to SMC docset + href: ./webview2/concepts/end-user-faq.md - name: Contact the WebView2 team href: ./webview2/contact.md @@ -1716,7 +1723,7 @@ # Test and automation - name: Test and automation items: - - name: Test and automation in Microsoft Edge # firstchild overview/nav for toc bucket + - name: Test and automation in Microsoft Edge href: ./test-and-automation/test-and-automation.md - name: DevTools Protocol @@ -1786,6 +1793,9 @@ - name: Microsoft Edge IDE integration href: ./visual-studio-code/ide-integration.md + # - name: Use DevTools as an IDE + # href: + - name: DevTools extension for Visual Studio Code # aux jump page href: ./visual-studio-code/microsoft-edge-devtools-extension/devtools-extension.md 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 37c7323126..64ee560a26 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension.md @@ -37,13 +37,14 @@ The DevTools extension for Visual Studio Code enables you to: ## Approaches compared + The DevTools extension for Visual Studio Code is one of several different ways to use DevTools to change your local files. | Approach | Pros and Cons | Article | |---|---|---| | 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-guide-chromium/elements-tool/elements-tool.md)| -| Browser > DevTools > **Sources** tool > **Filesystem** tab to define a **Workspace** | Always saves the changes, which could discourage experimenting | [Using the Filesystem tab to define a local Workspace](../devtools-guide-chromium/sources/index.md) in _Sources tool overview_ | +| 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-guide-chromium/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-guide-chromium/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/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md index 2ba4fd9db2..5fb93ddda4 100644 --- a/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md +++ b/microsoft-edge/visual-studio-code/microsoft-edge-devtools-extension/install.md @@ -77,12 +77,12 @@ The DevTools extension shows a popup suggestion to install Node.js and npm. The ``` $ npm version { - npm: '9.6.7', - node: '18.17.1', + npm: '10.9.2', + node: '22.14.0', ... } ``` - + See also: * [Inline and live issue analysis](./inline-live-issue-analysis.md) diff --git a/microsoft-edge/web-platform/ad-selection-api.md b/microsoft-edge/web-platform/ad-selection-api.md index 01bf878489..a6cfede3a1 100644 --- a/microsoft-edge/web-platform/ad-selection-api.md +++ b/microsoft-edge/web-platform/ad-selection-api.md @@ -12,6 +12,26 @@ ms.date: 10/10/2024 The Ad Selection API provides user-relevant ads on your site without using third-party cookies. See [Ad Selection Overview](https://github.com/WICG/privacy-preserving-ads/blob/main/Ad%20Selection%20Overview.md) in the `privacy-preserving-ads` repo. +**Detailed contents:** + +* [Attestation enrollment and alpha sign-up](#attestation-enrollment-and-alpha-sign-up) + * [When and where is the preview available?](#when-and-where-is-the-preview-available) + * [Flags for testing](#flags-for-testing) + * [Sign-up and attestation requirements and process](#sign-up-and-attestation-requirements-and-process) + * [Example JSON file](#example-json-file) + * [Important fields and values](#important-fields-and-values) +* [Deploy the Ad Selection API services](#deploy-the-ad-selection-api-services) + * [Images for deploying services](#images-for-deploying-services) + * [Services for sellers](#services-for-sellers) + * [Services for buyers](#services-for-buyers) + * [User-Defined Functions](#user-defined-functions) + * [User-Defined Functions for sellers](#user-defined-functions-for-sellers) + * [User-Defined Functions for buyers](#user-defined-functions-for-buyers) + * [Deployment guide](#deployment-guide) +* [Use the Ad Selection API on your website](#use-the-ad-selection-api-on-your-website) +* [Provide feedback about the origin trial](#provide-feedback-about-the-origin-trial) +* [See also](#see-also) + The Ad Selection API can be used by: * **Sellers** running a supply-side platform (SSP), who can use the API to provide higher-quality ads for their publishers. * **Buyers** running a demand-side platform (DSP), who can use the API to improve the effectiveness of advertising campaigns. diff --git a/microsoft-edge/webview2/get-started/win32.md b/microsoft-edge/webview2/get-started/win32.md index 4fb233ea09..bea092d817 100644 --- a/microsoft-edge/webview2/get-started/win32.md +++ b/microsoft-edge/webview2/get-started/win32.md @@ -60,9 +60,9 @@ The existing Visual Studio project we'll start with is part of the sample code f Clone or download the WebView2Samples repo, as follows: -1. If you haven't already, clone or download the `WebView2Samples` repo. To do this, in a separate window or tab, follow the steps in [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo) or [Clone the WebView2Samples repo](../how-to/machine-setup.md#clone-the-webview2samples-repo) in _Set up your Dev environment for WebView2_. +1. If you haven't already, clone (or download) the `WebView2Samples` repo. To do this, in a separate window or tab, follow the steps in [Clone the WebView2Samples repo](../how-to/machine-setup.md#clone-the-webview2samples-repo) (or in [Download the WebView2Samples repo](../how-to/machine-setup.md#download-the-webview2samples-repo)), in in _Set up your Dev environment for WebView2_. -Then return here after you've copied the repo to your local drive, and continue with the steps below. +Then continue with the steps below. diff --git a/microsoft-edge/webview2/how-to/machine-setup.md b/microsoft-edge/webview2/how-to/machine-setup.md index 54e49c4f1b..c50f0527c6 100644 --- a/microsoft-edge/webview2/how-to/machine-setup.md +++ b/microsoft-edge/webview2/how-to/machine-setup.md @@ -177,7 +177,8 @@ If you instead want to clone the repo by using a Git Bash shell or command promp See also: * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs. -* [Downloading or cloning the Demos repo](../../devtools-guide-chromium/sample-code/sample-code.md#download-or-clone-the-demos-repo) in _Sample code for DevTools_. +* [Clone the Edge Demos repo to your drive](../../devtools-guide-chromium/sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. + * [Step 6: Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_. @@ -307,5 +308,5 @@ To update the WebView2 Runtime on your development machine and on user machines, ## See also * [Cloning a repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository) - GitHub docs. -* [Downloading or cloning the Demos repo](../../devtools-guide-chromium/sample-code/sample-code.md#download-or-clone-the-demos-repo) in _Sample code for DevTools_. +* [Clone the Edge Demos repo to your drive](../../devtools-guide-chromium/sample-code/sample-code.md#clone-the-edge-demos-repo-to-your-drive) in _Sample code for DevTools_. * [Step 6: Set up a localhost server](../../visual-studio-code/microsoft-edge-devtools-extension/install.md#step-6-set-up-a-localhost-server) in _Installing the DevTools extension for Visual Studio Code_.