SPFX: How to debug an application customizer extension

Question

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?

Answer 1

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).