Debug your webApps using browser profiles

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 my SPFx extensions, and I'm using 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.

{
  "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

and a new profile has been automatically created:

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

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! 💥 ✨ 🎉

And what about Edge?

Edge is based on Chromium 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:

{
  "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:

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 😆

Comments

[Mauricio]

Thanks for your explanation!
This approach creates a new profile per workspace I think.
You could use 'userDataDir' for a steady profile across workspace:

{
  "configurations": [
    {
      "name": "ListViewCommandSet debug EDGE",
      "type": "msedge",
      "request": "launch",
      "url": "{URL}",
      "webRoot": "",
      //...
      "userDataDir": "your-profile-name"        
      ]
    },
//....
]
}

This way the profile is created in a VSCode folder common for all projects:
'C:\Users\<user>\AppData\Local\Programs\Microsoft VS Code\<your-profile-name>\Default'