This question is related to my earlier question How to Debug Javascript in IOS Action App Extension. Basically, I am developing an mobile safari extension, and part of the work is to develop a javascript (operating on top of "document" provided by mobile safari) to run inside the app extension.
However, I have not found a way to debug a javascript file inside an app extension. Now, I am trying to ask the question a bit differently - given mobile safari on a page, can I somehow run an external javascript on that page and debug this external javascript? I suppose that Safari Web Inspector could help with that? Thanks.
(This is a slightly customized answer from your other question)
The official documentation for this is [here][1].
It's not too hard, although recently I've had an issue with the page showing up when connected to the iOS simulator. In that case I just ended up using my phone directly. (Apparently you need to start desktop Safari after the iOS Simulator has started to inspect "remote" Simulator sessions)
- Ensure that on the device
Settings->Safari->Advanced->Web Inspector
is on.
- (Make sure you've Trusted the computer from the device)
- Start MobileSafari on your device.
- Start Safari on your desktop, make sure
Show Develop menu in menu bar
is on in Preferences
.
- In the
Develop
menu you will see your device name, say 'BSharer's iPhone'.
- select the page name underneath your device name, say 'en.m.wikipedia.org - Wikipedia'.
You are now debugging that device's page on your desktop. The developer page will open and you can debug as if it was running on the desktop machine. You should now see all the JavaScript that is available to that page and set breakpoints.
(The app extension requires the debugger;
statement because we don't see the javascript files injected by the app extension. You can still use the debugger
statement but it's not usually necessary.)