Debug your webApps using browser profiles
Tags: webdev, debug
Published: 2023-01-27 08:07:39

The idea is not new: you have multiple browser profiles, and you want to use a specific one for debugging your web applications. 

Using `--incognito` (Chrome) or `--inPrivate` (Edge) is so passé. How many times can you sign in over and over, without losing it?

There are many articles describing how to configure debugging using profiles: create shortcut, run PowerShell... does it really have to be so complicated? Let's have a look...

> I already have my `.launch.json` prepared for [debugging](https://learn.microsoft.com/en-us/sharepoint/dev/spfx/debug-in-vscode) my SPFx extensions, and I'm using [Microsoft 365 Developer Program](https://learn.microsoft.com/en-us/office/developer-program/microsoft-365-developer-program) tenant with the sample data packs, which give me 25 users to run my tests with.

## .launch.json configuration

Add `"--profile-directory=debug-adeleV"` to `runtimeArgs`.

```json
{
  "configurations": [
    {
      "name": "ListViewCommandSet debug CHROME",
      "type": "chrome",
      "request": "launch",
      "url": "{URL}",
      "webRoot": "",
      //...
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "--profile-directory=debug-adeleV"        
      ]
    },
//....
]
}
```
## Debugging

The first time I start debugging with this new configuration, I am asked to sign in. I'm using one of accounts created by M365 data pack, and I'm accepting the _Stay signed in?_ prompt.

Now I'm in. Adele is signed in to the SharePoint site 
![Adele signed in to SharePoint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m6buhlvwrvo2yafjawtu.png)

and a new profile has been automatically created:
![New profile created](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ftl3wzjgau40y6g73vq3.png)

I like configuring the profiles to always see it right away, in whose context the site is open:

![Updated profile information](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mnd4rovnyoxb3y051erh.png)

The see where the profile files created by Visual Studio are stored, check the Profile Path property on the `chrome://version` page. It will be c:\Users\_username_\AppData\Roaming\Code\User\workspaceStorage\_ID_\ms-vscode.js-debug\.profile\debug-adeleV.
It isn't the same location that Chrome normally uses, and you also won't see Adele on the _other profiles_ page if you open Chrome yourself. 

Now, let's close the browser and start debugging again. The browser opens immediately using Adele's profile. Yay! :boom: :sparkles: :tada:

### And what about Edge?
Edge is based on [Chromium](https://www.chromium.org/) and therefore, great news, no additional effort is required to start using the profile you just crated in MS Edge.

Let's add another configuration:
```json
{
  "configurations": [
    {
      "name": "ListViewCommandSet debug EDGE",
      "type": "msedge",
      "request": "launch",
      "url": "{URL}",
      "webRoot": "",
      //...
      "runtimeArgs": [
        "--remote-debugging-port=9222",
        "--profile-directory=debug-adeleV"        
      ]
    },
//....
]
}
```
And start debugging with Edge:

![Correct profile used](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4daapj805upoex7rlabh.png)

Awesome! I'm immediately signed in as Adele. The only detail that doesn't match is the profile picture
Poor Adele looks like a BigFoot now :laughing:

![Avatar is different in Edge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9p7i0xn5vsjqxqwseyhi.png)