We want to debug our web extension on iOS, by default, we can access web extension background page from Desktop Safari -> Top Menu -> Develop -> Web Extension Background Pages
This works perfectly for extensions installed on macOS, but how to access the ones installed on iOS/iPadOS?
You need to enable Web Inspector on your device in Settings > Safari > Advnaced. Then your extension pages and popups will appear in the device submenu under the Develop menu.
On the iOS device, enable Web Inspector in Settings > Safari > Advanced. The device name will appear under the Develop menu on macOS and you'll be able to inspect your extension's background page from there.
I believe the issue here is that the background scripts in iOS are non-persistent, so they aren't continuously available to view under the Develop -> Web Extension Background Pages menu, as they appear for macOS extensions. It is possible to debug the background script if an action is performed whilst the extension is currently active, by inspecting the _generated_background_page.html under the Develop -> Simulator menu item. However it gets frustrating if you need to debug your extension earlier on in the extension lifecycle. I'm not sure there currently is a way to do this. Hope that helps a little though.