1

I am new to spfx and have to write an application customizer that changes the key of a query in the url. I have already implemtend this functionality and now want to test/debug. When I run gulp serve, my localhost starts with the debug string attached to the url which is fine. But if I navigate to a different list in sharepoint, the debug string is gone. Unfortunately, I have to navigate to different lists on sharepoint to check if my code works as intended. So, is there a way to debug app customizers conveniently?

0

You can format the query string for the list that you will be redirected to, and append your own query string to it. For example, here I am using a ListViewCommandSet extension, but the idea is the same.

Once you run gulp serve, it will open the url you provided in serve.json and it will append some information to it like the following:

?debugManifestsFile=https://localhost:4321/temp/manifests.js&loadSPFX=true&customActions={"4f2a3722-bf06-4b78-a185-27b93948a597":{"location":"ClientSideExtension.ListViewCommandSet.CommandBar","properties":{"sampleTextOne":"One+item+is+selected+in+the+list","sampleTextTwo":"This+command+is+always+visible."}}}

In this case, the customActions is the same ID you get from the Component.manifest.json (it's also available in serve.json). So you can replace the variables (including customAction ID) in this url, and append them to url of the page you are redirecting to, so that the page will be in the context of the current debugging session and will show the extension for you (and you can add the key/value pair you want to the query string).

| improve this answer | |
  • Do you mean, I should just copy the whole debugstring? – maxE Jun 10 at 8:02
  • Yes, you can do that and append it to the url where you want to redirect to – Mohamed Derhalli Jun 10 at 8:25
  • but what variables do I have to replace? – maxE Jun 10 at 11:21
  • You will replace the customAction ID, as mentioned in the instructions in the answer, you can get the ID from the manifest.json of your extension. You can just copy the same url I pasted up there, and replace the GUID with the GUID of your custom action, then append it to the list url you are redirecting to. – Mohamed Derhalli Jun 10 at 12:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.