soledad penadés

I am getting my early Web Audio experiments up and running again (of which I will talk in a separate post) and it occurred to me to try some in my phone.

Now, when I built these things, not only was the Web Audio API in 'draft' form, but I also did not own an iPhone or had access to any iDevice. I also very rarely made things work in mobile at all, as 10 years ago it was hard to even get WebGL or WebAudio working on desktop! Mobile was not my first consideration...

So when I tried running them, I found that some of them just did not work (but I could not tell why, because there is no developer console on the phone). Others did not outright refuse to work, but also there was no sound coming out. What was happening?

I figured out how to debug the browser running on the phone. I suppose this would also apply if you use a tablet, but I've only used a phone.

1. Connect the device to your computer with USB

Of course, your computer has to be a macOS running device.

When I plugged the phone into the computer it asked me if I wanted to trust the device. I said yes.

2. Open Safari in your computer

If you haven't enabled the Developer mode yet, you'll have to do that so you can see the Develop... menu. I had done this ahead of time so I don't remember exactly how I did it, but a quick search tells me you have to go to Settings, click Advanced, then select “Show features for web developers”.

3. Enable Web Inspector in your phone

Go to Settings, scroll down to the Safari specific settings, scroll all the way down to the bottom, then Advanced and then enable Web Inspector.

4. Open the browser and website you want to debug in your phone

Interestingly enough, you can debug both Safari and Firefox for iOS (at least for now), because they are both running Safari at heart.

With that open and the phone unlocked, go back to your computer...

5. In Safari, select the device and browser to inspect

Go to the Develop menu and select the device and browser you want to debug.

An interesting thing I realised here is that this drop-down menu not only shows my phone, but also other applications running on my computer such as Dictionary.app. I presume it's listing all the applications that are running a full WebView or something like that?

Anyway, once you select one of these device and browser or context combinations, a "Web Inspector" window opens in a detached mode, and you can do all the usual things such as debugging, looking at elements, the console, etc.

I'm positively impressed

This was very smooth... as in, I didn't need to even quit Safari or restart it after connecting my phone, or any of those things that we are used to doing when trying to debug things. It, for once in a very long time, just worked.

I guess that's what you get when you control EVERYTHING in the stack.