DEV Community

Kinga
Kinga

Posted on

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"        
      ]
    },
//....
]
}
Enter fullscreen mode Exit fullscreen mode

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

and a new profile has been automatically created:
New profile created

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

Updated profile information

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"        
      ]
    },
//....
]
}
Enter fullscreen mode Exit fullscreen mode

And start debugging with Edge:

Correct profile used

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 😆

Avatar is different in Edge

Top comments (1)

Collapse
 
mqd-uy profile image
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'
Enter fullscreen mode Exit fullscreen mode