Sp-dev-docs: 'Allow debug scripts' popup only showing once

[MatthiasDh]

Category

• [x] Bug

Describe the bug

When I'm serving a WebPart it opens the browser to the corresponding page in my serve.json file. I get the popup screen to allow debug scripts. However when I reload my page it doesn't show this popup anymore only on initial serve. By this popup not showing anymore I can't debug my webpart.

Expected behavior

Every refresh shows the 'Allow debug scripts' popup

Developer environment

• OS: [MacOS]
• Browser(s): [Chrome, Edge, Safari]
• Tooling: [VS Code, SPFx]

Additional context

This issue happend out of nowhere, didn't change anything.

Serve.json file:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://localhost:5432/workbench",
  "api": {
    "port": 5432,
    "entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
  },
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://xxxxx.sharepoint.com/Sites/IntranetContoso/SitePages/dev-page.aspx",
      "customActions": {
        "2dc60fe8-90cf-49ce-8650-7d0d6da14bf1": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {
            "testMessage": "Test"
          }
        }
      }
    }
  }
}

@andrewconnell editted code fencing (_use 3 backticks, not 2, for fenced blocks_) for readability

Thanks for your contribution! Sharing is caring.

[msft-github-bot]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[jhholm]

I got the same issue with a few tenants starting on monday. The debugging popup stops showing after the first approval. I noticed that an item with the key "spfx-debug" is set to your browsers session storage. On page loads after the first approval, the debugging popup does not show up and my solutions won't load correctly from localhost.

If I remove that session storage item, I can continue working as before. All page loads require explicit confirmation for debugging. I guess there might be some kind of a change that only requires you to approve once and it's not working.

A quick hack that I'm using currently to circumvent the issue:

sessionStorage.setItem("spfx-debug", "");

Adding this to your webpart/application customizer onInit() -method, so the spfx-debug -item is cleared on each pageload. I guess you could also use sessionStorage.removeItem("spfx-debug") as well.

[MatthiasDh]

@jhholm this fixed my issue for now! I hope they fix this soon, thank you! :)

[andrewconnell]

@MatthiasDh Web part? You mean extension?

Can you share more context? Have you tested in an SR or TR tenant?

[msft-github-bot]

The more context details you can provide, the easier it is to help assist on issues. Any code you can provide and/or screenshots of the issue also help. The easier you can make it to reproduce the issue, the easier and quicker it is for someone to help you. Please refer to How to Create Good Issues, specifically How to Create Good Issues: Include context, in our wiki for more details.

[MatthiasDh]

@andrewconnell I mean a SPFx WebPart.

Every tenant that I tested this in is TR I think.

This issue is happening in a SharePoint Online tenant and multiple tenants are having the same issue.

Tested in chrome, firefox, newest edge they all have the same issue. Same issue on macOS and windows 10. Also tried with different users.

When running the command 'gulp serve' it opens the browser and it serves my code and gives me the 'allow debug scripts' popup.

When I reload the page it doesn't show that popup anymore so it doesn't serve.

The fix of @jhholm works by clearing that cache key so it is probably caching related. However this suddenly started happening.

[russgove]

same issue here working on an extension.
I notice in the debug console that the /temp/manifests.js gets loaded when i refresh but not the actual package.

[ng-lboyle]

Hi, we have been seeing this problem for a few days now, intermittently to begin with, but now our whole team is seeing it.

As our work is entirely done in SP Debug, this is a massive problem preventing us from working effectively.

To be SUPER explicit, we have made a webpart and we output a .sppkg that we deploy with AppCatalog.
We are running our project with gulp serve and loading the scripts in our SP tenant using the string
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

The first time, when we paste this string into the browser, we get the popup.
But for any subsequent reloads, we don't get the popup asking to load debug scripts.

We will try the fix suggested above by jholm but we can't ship that hack in the production version of our app, and we're only human, so it'll eventually make it out with the production app somehow.

We need this fixed ASAP so SP returns to the normal behaviour of always asking to load the debug scripts regardless of whether they have been loaded before.

[reusto]

Same issue here with a "target release for selected users" tenant (I'm not included in this selected users group).

Thanks @jhholm for the workaround, this one does help massively for debugging purposes.

[yukumura]

Same issue here.

We are running our project with gulp serve and loading the scripts in our SP tenant using the string
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

The first time, when we paste this string into the browser, we get the popup.
But for any subsequent reloads, we don't get the popup asking to load debug scripts.

The workaround suggested by @jhholm it doesn't work for us because we are testing our webpart within Teams Web.

[andrewconnell]

See #5395 for another workaround

[djmrky]

Same here, started happening several days ago

When appending the
?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

We never had any issues like this for the past year in our current project. Same spfx version, same test site. It just started happening suddenly

This is a real showstopper.

Adding sessionStorage.setItem("spfx-debug", ""); to the Init() in web part does not solve the issue in our case

[jhholm]

You could also try to manually clear your session storage via your browsers developer tools. That's how I started searching for the issue culprit. If that 'spfx-debug' item already exists, the popup will not show again and thus the "hacky fix" within Init will not work as your development code is not being run.

[pkmelee337]

Same issue on our first release tenants. The sessionStorage.setItem("spfx-debug", ""); fixes this for us though. Thanks @jhholm!

[jrichmond4]

I got the same issue with a few tenants starting on monday. The debugging popup stops showing after the first approval. I noticed that an item with the key "spfx-debug" is set to your browsers session storage. On page loads after the first approval, the debugging popup does not show up and my solutions won't load correctly from localhost.

If I remove that session storage item, I can continue working as before. All page loads require explicit confirmation for debugging. I guess there might be some kind of a change that only requires you to approve once and it's not working.

A quick hack that I'm using currently to circumvent the issue:

sessionStorage.setItem("spfx-debug", "");

Adding this to your webpart/application customizer onInit() -method, so the spfx-debug -item is cleared on each pageload. I guess you could also use sessionStorage.removeItem("spfx-debug") as well.

@jhholm Can you explain a little more where to put this within the webpart?

[pkmelee337]

@jrichmond4 onInit should work. I did put it in the render, and this also works.

[jhholm]

If you are using Chrome, I would start by clearing the session storage manually via developer tools. If that fixes your problem, you can also test by clearing that exact item in developer tools console
sessionStorage.removeItem("spfx-debug")
There are two reasons why it might not work onInit. If if the item is already set, no code from your local development solution will be run. Secondly I'm not 100% sure that the item is always set before onInit is run. For me it does work that way. If that is the case, you could also use setTimeout to clear the item e.g. 5 seconds after onInit -call.

Remember, that this is just a hacky way to circumvent this issue and you should not leave it in production code.

[yukumura]

Any news?
As I mentioned last friday the solution to clear the session storage cannot work for us because to reach Teams Web for debug our webpart we must necessarily go first from a Sharepoint page where the debug is loaded with a popup.

In this way we are unable to debug our webpart within a teams tab.

[johnguy0]

A fix should be rolling out. If folks are still experiencing issues tomorrow, feel free to @ mention me. Thanks!

[rabwill]

This is working now today . I am getting the prompts and changes reflected
Browser : MS edge (chromium) @johnguy0 . Thank you.

[yukumura]

@johnguy0 we still can't debug our webpart within a teams tab.
Here are the steps we are taking:

• We enter a Sharepoint site with the link of the manifest (xxxx.sharepoint.com/sites/mysite?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js)
• We load the debug scripts
• From the app launcher we open the teams application

Two weeks ago, the popup to load the debug script appeared at this point.
At the moment the pop-up does not appear and we are unable to debug our webpart.

Any suggestion?

[rayanvga]

Still seeing this issue today.

[DRamalho92]

@johnguy0 I've made the workaround on onInit but if I don't have on the query string the ?debugManifestsFile it will not load the extension.

[johnguy0]

@yukumura This may be a separate but related issue. We'll investigate today.

@rayanvga What scenario isn't working?

@DRamalho92 The workaround shouldn't be needed. Yes, having the query string parameter is necessary to load the debug manifests across extensions.

[johnguy0]

@yukumura We can't seem to repro the issue. Can you make sure you've visited a SharePoint page with the query string parameter first, and then navigating to the Tab within the same session?

[andrewconnell]

@yukumura in addition to @johnguy0's last comment, in reference to your first bullet:

We enter a Sharepoint site with the link of the manifest (xxxx.sharepoint.com/sites/mysite?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js)

You must also include the part that loads the component on the page in the query string. All you've done is load SPFx & told it where the manifest file is. You then need to tell it what component to load.

[yukumura]

@andrewconnell

I load debug scripts this way

I land on the sharepoint page (with the link that generates the gulp serve: https://xxxxxx.sharepoint.com/sites/yyyyyyy?loadSPFX=true&debugManifestsFile=https%3A%2F%2Flocalhost%3A4321%2Ftemp%2Fmanifests.js&customActions=%7B%22703518b8-a3d2-40bf-8de2-5698992457e3%22%3A%7B%22location%22%3A%22ClientSideExtension.ListViewCommandSet.CommandBar%22%2C%22properties%22%3A%7B%22sampleTextOne%22%3A%22One+item+is+selected+in+the+list%22%2C%22sampleTextTwo%22%3A%22This+command+is+always+visible.%22%7D%7D%7D)

I open the teams via the launcher app

Then I am unable to debug my webpart. Am I doing something wrong?

[yukumura]

Hello, any news?

[JJungbluth]

@johnguy0 we are still having issues with this.

This is our serve.json:

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "serveConfigurations": {
    "default": {
      "pageUrl": "https://***.sharepoint.com/sites/***/Lists/Angebote/AllItems.aspx",
      "customActions": {
        "78a5ba9a-3409-444c-ad79-f10b80661dd2": {
          "location": "ClientSideExtension.ApplicationCustomizer"
        }
      },
      "fieldCustomizers": {
        "salesOpenAvb": {
          "id": "1e782eeb-baac-405a-bc1d-7928336ce8fa",
          "properties": {}
        },
        "avbOfferState": {
          "id": "ef9cd4a3-d8c0-4ec2-857f-40c48168cc94",
          "properties": {}
        },
        "avbOpenOfferDetail": {
          "id": "933b1e3c-581d-4848-b3c1-d93424075bd3",
          "properties": {}
        }
      }
    },
    "salesQuicklinks": {
      "pageUrl": "https://***.sharepoint.com/sites/***",
      "customActions": {
        "78a5ba9a-3409-444c-ad79-f10b80661dd2": {
          "location": "ClientSideExtension.ApplicationCustomizer",
          "properties": {}
        }
      }
    },
    "salesOpenAvb": {
      "pageUrl": "https://***.sharepoint.com/sites/***/Lists/Angebote/AllItems.aspx",
      "fieldCustomizers": {
        "AVB_Vorlage": {
          "id": "1e782eeb-baac-405a-bc1d-7928336ce8fa",
          "properties": {}
        }
      }
    },
    "avbOfferState": {
      "pageUrl": "https://***.sharepoint.com/sites/***/Lists/Angebote/AllItems.aspx",
      "fieldCustomizers": {
        "AVB_Angebot_Status": {
          "id": "ef9cd4a3-d8c0-4ec2-857f-40c48168cc94",
          "properties": {}
        }
      }
    },
    "avbOpenOfferDetail": {
      "pageUrl": "https://***.sharepoint.com/sites/***/Lists/Angebote/AllItems.aspx",
      "fieldCustomizers": {
        "AVB_Angebot_Nummer": {
          "id": "933b1e3c-581d-4848-b3c1-d93424075bd3",
          "properties": {}
        }
      }
    }
  }
}

which I then serve like this:

"scripts": {
    "serve": "gulp serve",
    "serve-quicklinks": "gulp serve --config=salesQuicklinks",
    "serve-openavb": "gulp serve --config=salesOpenAvb",
    "serve-offerstate": "gulp serve --config=avbOfferState",
    "serve-openofferdetail": "gulp serve --config=avbOpenOfferDetail",
    },

which generates a url like this:

https://***.sharepoint.com/sites/***/Lists/Angebote/AllItems.aspx?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&fieldCustomizers={"AVB_Angebot_Nummer":{"id":"933b1e3c-581d-4848-b3c1-d93424075bd3","properties":{}}}

This used to work until like 3 weeks ago. On every page refresh the "load debug scripts" dialog would show up. Now we have to either clear the session storage item or open a new tab every time we change the code.

We are not trying to debug Teams web parts just plain SharePoint extensions/webparts.
This issue is occurring over multiple solutions.

SPFX version: 1.9.1
Typescript (rush stack) version: 2.9
Node version: 8.16.1

[idboyd01]

I was having this issue a couple of weeks ago, then it stopped (probably around the time that @johnguy0 said a fix was rolling out) but it has started happening for me again yesterday. I've only just found this issue thread.

Does anyone know why the issue has started happening again?

I've been using Chrome and SPFx 1.9.1

[MatthiasDh]

Issue is still happening

[andrewconnell]

@JJungbluth @idboyd01 @MatthiasDh

I see from the last few posts you guys are using SPFx 1.9.1... have you confirmed it's not working in it the latest SPFx v1.10? I'm not sure if the fix referenced above by @johnguy0 was just in the service but also depends on the latest SDK, but regardless, using the latest version of SPFx would help eliminate that being an issue...

[jhholm]

I can actually reproduce this with SPFx v1.10. Though symptoms are different, and you could even say it's a good change.

SPFX v1.10 seems to have updated the debugging query parameter to:

?debug=true&noredir=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

from

?loadSPFX=true&debugManifestsFile=https://localhost:4321/temp/manifests.js

Both parameters still work. Now SharePoint just asks for the permission for debugging once and stops asking on subsequent full page reloads. If I don't give the permission, I still get the popup on new page loads if I have the debugging query parameter set. I remember being asked on the permission on every page load. So far so good.

I used to use an extension in my browser to auto click the "Allow" button on the popup after each page load to make debugging easier/faster. Now I only seem to get asked permission once. That information seems to be still saved in browser session storage under key "spfx-debug". Currently the issue is that if I stop debugging and remove the debugging query parameter. My session still tries to continue to load the debug manifest from my development server.

Steps to reproduce

1. Create a new spfx 1.10 solution (e.g. webpart) and run gulp serve
2. Open your tenant of choice and add the debug query parameter
3. Allow debugging from popup
4. Navigate to another site or page within the same tenant without keeping the debugging query parameter in the URL
5. You should notice that manifest and spfx files is still loaded from your development server
6. Stop development server
7. Navigate to another site/page within the same tenant
8. Session still tries to load the manifest, but is unable to load

Only way to get back to not use debugging is to close the session/browser or empty the spfx-debug session storage value. A small inconvenience, but it is a good thing you do not need to press "Allow" on each page load. Is this change intentional?

[idboyd01]

Hi, @andrewconnell. Yeah, I tested with a freshly created SPFx 1.10.0 solution just now and it is still happening for me.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author

[johnguy0]

@jhholm Good analysis! Yes, we changed the behavior to when the debug scripts are allowed once it will continue using debug scripts throughout the session. If you would like to disable the debug scripts loading without having to end the session or manually delete the session data, then you can use this query string parameter ?reset=true.

I'll look into getting our documentation updated to reflect this information.

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author

[andrewconnell]

@johnguy0 added a section to the debugging SFPx on modern pages doc (see https://github.com/andrewconnell/sp-dev-docs/commit/9127d17370b0a2ae7aca90c29d1179bb29121960#diff-92a6b1ceafde35fc19ef2c11f0b7cee9R78-R81)

[msft-github-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author

[msft-github-bot]

Closing issue due to no response from the original author. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: No response from the original issue author