Skip to content

Commit

Permalink
Merge pull request #2840 from MicrosoftDocs/user/pabrosse/symbol-serv…
Browse files Browse the repository at this point in the history
…er-aad

Add the new AAD connection type and filtering feature to the symbol server docs
  • Loading branch information
captainbrosset authored Sep 22, 2023
2 parents 7a2d15c + c433704 commit 22006ed
Show file tree
Hide file tree
Showing 13 changed files with 121 additions and 31 deletions.
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 03/02/2022
ms.date: 09/19/2023
---

# Securely debug original code by using Azure Artifacts symbol server source maps
Expand All @@ -26,13 +26,56 @@ To learn about how to publish source maps, see [Securely debug original code by


<!-- ====================================================================== -->
## Step 1: Generate a Personal Access Token for Azure DevOps
## Step 1: Enable source maps in DevTools

To obtain source maps from the Azure Artifacts symbol server, DevTools uses the fetch protocol to talk to Azure DevOps, which requires a valid Personal Access Token (PAT).
To make sure that source maps are enabled in DevTools:

You need to generate a PAT even if you already generated one to publish source maps to the symbol server in [Securely debug original code by publishing source maps to the Azure Artifacts symbol server](publish-source-maps-to-azure.md).
1. To open DevTools, in Microsoft Edge, right-click a webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).

1. In DevTools, click **Settings** (![Settings icon](./consume-source-maps-from-azure-images/settings-gear-icon-light-theme.png)) > **Preferences**.

1. Make sure the **Enable JavaScript source maps** checkbox and the **Enable CSS source maps** checkbox are selected:

![The Preferences configuration screen in DevTools settings](./consume-source-maps-from-azure-images/preferences-source-maps-devtools.png)


<!-- ====================================================================== -->
## Step 2: Connect DevTools to the Azure Artifacts symbol server

DevTools needs to be configured to successfully retrieve the published source maps for your website.

To configure DevTools, you create an Azure Artifacts symbol server connection. There are two types of connections: **Azure Active Directory**, which is the easiest to use, and **Personal Access Token**.

#### Connect to the symbol server by using Azure Active Directory

1. In DevTools, click **Settings** (![Settings icon](./consume-source-maps-from-azure-images/settings-gear-icon-light-theme.png)) > **Symbol Server**.

1. Click **Add Symbol Server connection** to start creating a new connection.

1. In the **Authorization mode** dropdown list, select **Azure Active Directory**.

To generate a PAT in Azure DevOps:
If the **Azure Active Directory** option is disabled, sign in to Microsoft Edge. To learn more, see [Sign in to sync Microsoft Edge across devices](https://support.microsoft.com/microsoft-edge/sign-in-to-sync-microsoft-edge-across-devices-e6ffa79b-ed52-aa32-47e2-5d5597fe4674).

1. Under **Azure DevOps organization**, click **Select**.

![The Symbol Server setting screen in DevTools](./consume-source-maps-from-azure-images/select-aad-org.png)

The list of DevOps organizations that you're a member of appears.

1. Double-click the organization that you want to connect to, or click it and then press **Enter**.

1. Click **Add** to create the connection.

![The Symbol Server setting screen in DevTools, showing the Add button to create a new connection](./consume-source-maps-from-azure-images/create-new-add-connection.png)

1. Click the **Close** (![Close settings icon](./consume-source-maps-from-azure-images/close-settings-icon.png)) button in the upper right to close the **Settings** panel, and then click the **Reload DevTools** button.

#### Connect to the symbol server by using a Personal Access Token

To connect to the symbol server by using a Personal Access Token (PAT), first generate a new PAT in Azure DevOps, and then configure DevTools.

<!-- ---------- -->
###### Generate a new PAT in Azure DevOps

1. Sign in to your Azure DevOps organization by going to `https://dev.azure.com/{yourorganization}`.

Expand Down Expand Up @@ -64,37 +107,32 @@ To generate a PAT in Azure DevOps:

To learn more about PAT, see [Use personal access tokens](/azure/devops/organizations/accounts/use-personal-access-tokens-to-authenticate).

Your new PAT has now been generated. Next, configure DevTools.

<!-- ====================================================================== -->
## Step 2: Configure DevTools
<!-- ---------- -->
###### Configure DevTools

DevTools now needs to be configured with the personal access token (PAT) to successfully retrieve the source maps.
1. In DevTools, click **Settings** (![Settings icon](./consume-source-maps-from-azure-images/settings-gear-icon-light-theme.png)) > **Symbol Server**.

To configure DevTools:
1. Click **Add Symbol Server connection** to start creating a new connection.

1. To open DevTools, in Microsoft Edge, right-click a webpage, and then select **Inspect**. Or, press **Ctrl+Shift+I** (Windows, Linux) or **Command+Option+I** (macOS).

1. In DevTools, click **Settings** (![Settings icon](./consume-source-maps-from-azure-images/settings-gear-icon-light-theme.png)) > **Preferences**.

1. Make sure the **Enable JavaScript source maps** checkbox and the **Enable CSS source maps** checkbox are selected:

![The Preferences configuration screen in DevTools settings](./consume-source-maps-from-azure-images/ado-preferences-source-maps-devtools.png)

1. In the sidebar of the **Settings** page, click **Symbol Server**.
1. In the **Authorization mode** dropdown list, select **Personal Access Token**.

1. In the **Azure DevOps organization** text box, enter the Azure DevOps organization where you created the PAT.

1. In the **Azure DevOps personal access token** text box, paste your personal access token (PAT).
1. In the **Personal access token** text box, paste your personal access token (PAT):

![The Symbol Server configuration screen in DevTools settings, showing the fields required to create a new PAT connection](./consume-source-maps-from-azure-images/create-new-pat-connection.png)

![The Symbol Server configuration screen in DevTools settings](./consume-source-maps-from-azure-images/ado-pat-devtools.png)
1. Click the **Add** button. The connection is created.

1. Click **x** in the upper right to close the **Settings** panel, and then click the **Reload DevTools** button.
1. Click the **Close** (![Close settings icon](./consume-source-maps-from-azure-images/close-settings-icon.png)) button in the upper right to close the **Settings** panel, and then click the **Reload DevTools** button.


<!-- ====================================================================== -->
## Step 3: Retrieve original code in DevTools

After the above setup steps, when you use DevTools to work on a build of your web site for which symbols have been published, you can now see your original source code, instead of the transformed code.
After doing the above setup steps, when you use DevTools to work on a build of your website for which symbols have been published, you can now see your original source code, instead of the transformed code.

* In the **Console** tool, links from log messages to source files go to the original files, not the compiled files.

Expand All @@ -103,6 +141,58 @@ After the above setup steps, when you use DevTools to work on a build of your we
* In the **Sources** tool, the links to source files that appear in the **Call Stack** of the **Debugger** pane open the original source files.


<!-- ====================================================================== -->
## Connect to multiple Azure Artifacts symbol servers

To fetch sourcemaps from multiple Azure DevOps organizations, configure DevTools to connect to multiple Azure Artifacts symbol servers, as follows:

1. In DevTools, click **Settings** (![Settings icon](./consume-source-maps-from-azure-images/settings-gear-icon-light-theme.png)) > **Symbol Server**.

1. Click **Add Symbol Server connection** to create an additional connection.

1. Configure the new connection. See [Connect to the symbol server with Azure Active Directory](#connect-to-the-symbol-server-by-using-azure-active-directory) or [Connect to the symbol server with a Personal Access Token](#connect-to-the-symbol-server-by-using-a-personal-access-token).

To edit or remove an existing connection, hover over the connection, and then click the **Edit** (![Edit icon](./consume-source-maps-from-azure-images/edit-connection-icon.png)) or **Remove** (![Remove icon](./consume-source-maps-from-azure-images/remove-connection-icon.png)) button next to the connection on the **Symbol Server** settings page:

![The remove and edit buttons, on a connection item, in the Symbol Server settings page](./consume-source-maps-from-azure-images/edit-remove-connection.png)


<!-- ====================================================================== -->
## Filter source maps by URL

To decide which source maps to download via the Azure Artifacts symbol server connection, use the **Filter behavior** feature.

1. In DevTools, click **Settings** (![Settings icon](./consume-source-maps-from-azure-images/settings-gear-icon-light-theme.png)) > **Symbol Server**.

1. Create a new connection or edit an existing connection.

1. In the **Filter behavior** dropdown list, select either **Exclusion List** to exclude specific source maps, or **Inclusion List** to only include specific source maps.

1. In the text box below the dropdown list, enter one URL per line for the source maps that you want to exclude or include:

![The inclusion list setting in a symbol server connection edit screen](./consume-source-maps-from-azure-images/filter-inclusion-list.png)

1. Click the **Save** button.

The following wildcards are supported:

| Wildcard | Meaning |
|---|---|
| ? | Matches a single character. |
| * | Matches one or more of any character. |

If you select **Exclusion List**, DevTools attempts to look up any source maps for scripts except those that have a URL that matches one of the entries in the list.

If you select **Inclusion List**, DevTools only attempts to look up source maps for scripts that have URLs that match one of the entries in the list. For example, suppose you select **Inclusion List** in the **Filter behavior** dropdown list, and then enter the following in the **Filter behavior** text box:

```
https://cdn.contoso.com/*
https://packages.contoso.com/*
```

In this example, DevTools only attempts to resolve source maps that match these two URL patterns, and doesn't attempt to load source maps for other scripts.


<!-- ====================================================================== -->
## Check the status of downloaded source maps

Expand Down
18 changes: 9 additions & 9 deletions microsoft-edge/web-platform/os-regional-settings.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: Operating System Regional Data Display
title: Operating System regional data display
description: How users and web developers can use the OS regional format in Microsoft Edge for improved site experiences
author: MSEdgeTeam
ms.author: msedgedevrel
ms.topic: conceptual
ms.prod: microsoft-edge
ms.date: 08/19/2022
---
# Operating System Regional Data Display
# Operating System regional data display

Microsoft Edge provides operating system (OS) regional preference information to help website authors create regional experiences on their web site, when viewing your site using Microsoft Edge. This feature allows website authors to deliver value to users who specifically change their regional preferences in the OS to reflect their personal preferences.
Microsoft Edge provides operating system (OS) regional preference information to help website authors create regional experiences on their website, when viewing your site using Microsoft Edge. This feature allows website authors to deliver value to users who specifically change their regional preferences in the OS to reflect their personal preferences.

Users want to see dates, times, numbers, and other formatting printed according to their preferences. For example, the US geographic region translates **7/2/2022** into **July 2nd, 2022**. Another geographic region could translate that same date into **February 7, 2022** because they read the month and day inversely.

Expand All @@ -25,7 +25,7 @@ Granting access to this setting allows websites to have visibility into more use


<!-- ====================================================================== -->
## OS Regional Data Display Codes
## OS regional data display codes

The user's formatting preferences are abstracted into a simple regional code, which is used by web applications to infer the various details noted above about dates, times, and other formatting preferences.

Expand All @@ -49,7 +49,7 @@ The UI, HTTP header, and API interact as follows:


<!-- ====================================================================== -->
## Regional Data Display options
## Regional data display options

Users have three options on Microsoft Edge to select the level of information their browser will share about their regions:

Expand Down Expand Up @@ -80,7 +80,7 @@ Users can disable the sharing of OS regional information by selecting **Never**.


<!-- ====================================================================== -->
## Policy Controls
## Policy controls

A related new policy in Microsoft Edge, [DefaultShareAdditionalOSRegionSetting](/DeployEdge/microsoft-edge-policies#defaultshareadditionalosregionsetting), provides a setting for corporate or enterprise-level default configurations. This setting accepts an integer with the following potential values:

Expand All @@ -99,22 +99,22 @@ In addition, an older policy, [ApplicationLocaleValue](/DeployEdge/microsoft-edg
We believe that **Limited** is the right option for most users. **Limited** respects the user's regional preferences while introducing the least amount of risk of the website misusing this information.


#### Fingerprinting Entropy
#### Fingerprinting entropy

OS regional information could be misused to compromise the user's privacy. The regional information would help hackers establish fingerprinting entropy. In combination with many other pre-existing bits of entropy in the platform today, the user could be uniquely identified leading to more potential secondary harm.

While a user's region and language are already available via the web platform, users generally fall into well-recognized regional codes that are similar across geographies. Because the sample sizes are so large, the risk of any specific regional code standing out is small, and thus the risk is small. If the user changes their OS preferences to a unique language + region, websites may be able to identify the anomaly in a population, and uniquely identify the associated user.


#### Content Presentation
#### Content presentation

The OS regional information can also be misused and lead to inconsistency of a website's language presentation. Microsoft Edge provides multiple language and regional APIs to websites developers. Websites may process regional information in one place, while deriving language preferences from another.

When the language and regional information is self-consistent, then it doesn't really matter which APIs the website uses to assemble its content presentation. However, if a website reads the language information from multiple APIs and those APIs return different language codes, then the website may inadvertently start to mix-and-match regional preferences, resulting in strange user experiences. For example, phrasing that mixes languages and regional preferences together, such as "Email sent on miércoles, 5 de enero de 2021".


<!-- ====================================================================== -->
## Developer Details
## Developer details

The new setting to **Share additional OS regional format** directly impacts the JavaScript `Intl` object's default regional value and all other JavaScript APIs that use the default region (such as the `Date` constructor).

Expand Down

0 comments on commit 22006ed

Please sign in to comment.