Skip to content

Commit 09bd9f9

Browse files
authored
Merge pull request #3436 from MicrosoftDocs/main
Main to Live publish PR
2 parents bade4b5 + b62e5fa commit 09bd9f9

File tree

77 files changed

+1219
-406
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

77 files changed

+1219
-406
lines changed

ThirdPartyNotices

Lines changed: 0 additions & 15 deletions
This file was deleted.

ThirdPartyNotices.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
## Legal Notices
2+
3+
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.
4+
5+
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).
6+
7+
For privacy information, see [Privacy at Microsoft](https://privacy.microsoft.com).
8+
9+
Microsoft and any contributors reserve all others rights, whether under their respective copyrights, patents, or trademarks, whether by implication, estoppel or otherwise.

microsoft-edge/devtools-guide-chromium/about-tools.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ DevTools provides more than 30 tools, consisting of _Default tools_ and _More to
1616
<!-- ====================================================================== -->
1717
## Default tools
1818

19-
By default, the following tools are listed in the **Activity bar** at the top of DevTools:
19+
By default, the following tools are listed in the **Activity Bar** at the top of DevTools:
2020

2121
* ![Inspect tool icon](./about-tools-images/inspect-tool-icon-light-theme.png) **Inspect tool**
2222
* ![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
5454
<!-- ====================================================================== -->
5555
## More tools
5656

57-
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**.
57+
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**.
5858

5959
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**.
6060

microsoft-edge/devtools-guide-chromium/changes/changes-tool.md

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,11 @@ ms.subservice: devtools
99
ms.date: 11/30/2023
1010
---
1111
# Track changes to files using the Changes tool
12+
<!-- https://developer.chrome.com/docs/devtools/changes (indep) -->
1213

13-
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:
14+
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.
15+
16+
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:
1417

1518
![The Changes tool showing two files that have been modified, and the modifications of the selected file](changes-tool-images/changes-tool-open.png)
1619

@@ -24,7 +27,7 @@ On the **Activity Bar** or **Quick View** toolbar, click the **More tools** (![T
2427

2528
![The 'More tools' (+) icon and menu in the Activity Bar, with the Changes tool selected](changes-tool-images/changes-tool-via-plus-menu.png)
2629

27-
The **Changes** tool opens in the **Activity Bar** or in the **Quick View**, depending on which toolbar you used.
30+
The **Changes** tool opens in the **Activity Bar** or in the **Quick View** panel, depending on which toolbar you used.
2831

2932

3033
<!-- ====================================================================== -->
@@ -71,7 +74,7 @@ Clicking a modified line in the **Changes** tool opens the file in the [Sources]
7174

7275

7376
<!-- ====================================================================== -->
74-
## Undo all changes
77+
## Revert changes
7578

7679
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:
7780

@@ -86,3 +89,23 @@ When you've made a change to a minified file, the **Changes** tool enables you t
8689
![Displaying a long line of code](changes-tool-images/changes.png)
8790

8891
To scroll horizontally, click the horizontal scrollbar, or press the left or right arrow keys.
92+
93+
94+
<!-- ====================================================================== -->
95+
## Troubleshooting
96+
97+
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:
98+
99+
* With DevTools displayed, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Empty cache and hard refresh**.
100+
101+
<!--
102+
* In DevTools, select **Customize and Control DevTools** (**...**) > **Restore defaults and refresh**. -->
103+
104+
105+
<!-- ====================================================================== -->
106+
## See also
107+
108+
* [Edit and save files in a workspace (Sources tool Workspace tab)](../workspaces/index.md)
109+
* [Override webpage resources with local copies (Overrides tab)](../javascript/overrides.md) - **Sources** tool > **Overrides** tab
110+
* [Sources tool overview](../sources/index.md)
111+
* [Display or edit source files using the Quick source tool](../quick-source/quick-source-tool.md)

microsoft-edge/devtools-guide-chromium/crash-analyzer/index.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ DevTools doesn't cache source maps when the domain name is `localhost`. This me
143143
<!-- ------------------------------ -->
144144
#### Open the Crash analyzer tool
145145

146-
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**.
146+
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**.
147147

148148

149149
<!-- ---------- -->
@@ -177,7 +177,7 @@ If you want to test the **Crash analyzer** tool but you don't have a stack trace
177177

178178
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.
179179

180-
1. In DevTools, on the **Activity bar**, click **Console** (![Console icon](./index-images/console-icon.png)). The **Console** tool opens.
180+
1. In DevTools, on the **Activity Bar**, click **Console** (![Console icon](./index-images/console-icon.png)). The **Console** tool opens.
181181

182182
1. Select the error stack trace that's displayed in the **Console** tool and copy it.
183183

microsoft-edge/devtools-guide-chromium/elements-tool/elements-tool.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,3 +26,4 @@ Debug your HTML using the DOM tree, and inspect and work on the CSS for your web
2626
* [Edit CSS font styles and settings in the Styles pane](../inspect-styles/edit-fonts.md)
2727
* [Style editing for CSS-in-JS frameworks](../css/css-in-js.md)
2828
* [Get started viewing and changing the DOM](../dom/index.md)
29+
* [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.

microsoft-edge/devtools-guide-chromium/javascript/guides/mark-content-scripts-library-code.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ ms.date: 05/04/2021
2323
limitations under the License. -->
2424
# Add content scripts to the Ignore List
2525

26+
<!-- todo: define _content script_
27+
* [Using the Content scripts tab for Microsoft Edge extensions](../../sources/index.md#using-the-content-scripts-tab-for-microsoft-edge-extensions) in _Sources tool overview_.
28+
* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs.
29+
-->
30+
2631
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.
2732

2833
To avoid pausing on extension code:
@@ -40,6 +45,7 @@ To avoid pausing on extension code:
4045
## See also
4146

4247
* [Step 4: Step through the code](../index.md#step-4-step-through-the-code) in _Get started debugging JavaScript_
48+
* [Content scripts](https://developer.chrome.com/docs/extensions/develop/concepts/content-scripts) in Chrome Extensions docs.
4349

4450

4551
<!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/javascript/overrides.md

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,15 @@ ms.subservice: devtools
99
ms.date: 09/25/2023
1010
---
1111
# Override webpage resources with local copies (Overrides tab)
12+
<!-- equiv https://developer.chrome.com/docs/devtools/overrides -->
1213

1314
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.
1415

15-
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.
16+
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.
17+
18+
The overrides feature is not intended for mapping to your source files.
19+
20+
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.
1621

1722

1823
<!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/overview.md

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -618,21 +618,22 @@ See also:
618618

619619
<!-- todo: remove all but ~5 links -->
620620

621-
* [About the list of tools](about-tools.md)<!--keep link-->
622-
* [Inspect and change the current webpage](dom/index.md)<!--keep link?-->
623-
* [Emulate how your product behaves on different devices](device-mode/index.md)<!--keep link?-->
624-
* [Inspect, tweak, and change the styles of elements](inspect-styles/edit-fonts.md)<!--keep link?-->
625-
* [Debug your JavaScript](javascript/index.md)<!--keep link?-->
626-
* [Live console](console/index.md)<!--keep link?-->
627-
* [Accessibility, performance, compatibility, and security issues](issues/index.md)<!--keep link?-->
628-
* [Inspect the network traffic](network/index.md)<!--keep link?-->
629-
* [Inspect where the browser stored content](storage/sessionstorage.md)<!--keep link?-->
630-
* [Evaluate the performance](evaluate-performance/index.md)<!--keep link?-->
631-
* [Memory problems](memory-problems/index.md)<!--keep link?-->
632-
* [Rendering issues](rendering-tools/index.md)<!--keep link?-->
633-
* [Use a development environment](sources/index.md)<!--keep link?-->
634-
* [Sync changes in DevTools with the file system](workspaces/index.md)<!--keep link?-->
635-
* [Override files from the web](javascript/overrides.md)<!--keep link?-->
621+
* [About the list of tools](./about-tools.md)<!--keep link-->
622+
* [Inspect and change the current webpage](./dom/index.md)<!--keep link?-->
623+
* [Emulate how your product behaves on different devices](./device-mode/index.md)<!--keep link?-->
624+
* [Inspect, tweak, and change the styles of elements](./inspect-styles/edit-fonts.md)<!--keep link?-->
625+
* [Debug your JavaScript](./javascript/index.md)<!--keep link?-->
626+
* [Live console](./console/index.md)<!--keep link?-->
627+
* [Accessibility, performance, compatibility, and security issues](./issues/index.md)<!--keep link?-->
628+
* [Inspect the network traffic](./network/index.md)<!--keep link?-->
629+
* [Inspect where the browser stored content](./storage/sessionstorage.md)<!--keep link?-->
630+
* [Evaluate the performance](./evaluate-performance/index.md)<!--keep link?-->
631+
* [Memory problems](./memory-problems/index.md)<!--keep link?-->
632+
* [Rendering issues](./rendering-tools/index.md)<!--keep link?-->
633+
* [Use a development environment](./sources/index.md)<!--keep link?-->
634+
* [Sync changes in DevTools with the file system](./workspaces/index.md)<!--keep link?-->
635+
* [Override files from the web](./javascript/overrides.md)<!--keep link?-->
636+
* [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.
636637

637638

638639
<!-- ====================================================================== -->

microsoft-edge/devtools-guide-chromium/performance/reference.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ The images in this page show DevTools undocked into its own, dedicated window. T
9999
<!-- upstream doesn't have this section, has section in Overview article https://developer.chrome.com/docs/devtools/performance/overview#open_the_performance_panel -->
100100

101101
<!-- in each section, instead of linking away to this detailed Open h2 or Overview article's Open h2, start w/ inline step:
102-
1. Right-click a webpage, select **Inspect**, and then in DevTools, click the **Performance** tab in the **Activity bar**.
102+
1. Right-click a webpage, select **Inspect**, and then in DevTools, click the **Performance** tab in the **Activity Bar**.
103103
-->
104104

105105
To use the sections in this page, open the **Performance** tool in DevTools:

0 commit comments

Comments
 (0)