Hey I Got My iPhone to talk to MacBook Pro Yesterday.

As you know, when you visit Mapertunty on an iPhone, the google Map is not showing. This si a problem. Mapertunity is all about finding employment Opportunities on a Map.

This has been a bug I have not had time to fix because I never had the time so far and because I had not way to get inside the iPhone to troubleshoot why the mapertunity javascript was not firing the google map.

Well big breakthrough yesterday. Someone gave me a old MacBook about a year ago. So I asked google the question, how to trouble shoot iPhone on Chrome. It turns out, you can’t do it through windows 10 without because Apple stop support for windows Webkit about 10 years ago. But google also said Apple is still supporting iPhone to MacBook Safari troubleshooting through the Chrome version for Apple. And you also need a Cable to plug the iPhone directly into the MacBook.

I though “Oh Boy this is gonna be EASY”. Well it’s never easy and it took all day yesterday and now I am into the second day. But HEY at least I got the iPhone to Talk to the MacBook and I can prove to myself the Safari browser is seeing what webpage the iPhone is seeing.

I’m not totally there yet. Safari is showing me blank screens. According to more internet searches, this is usually caused by the iOS and OSX operating systems being out of sync. Well this MacBook has not been updated for 2 years and I never update my phone OS cause everytime I do, it’s never the same as I had it working before. But in this case, I had to do it.

I updated the iOS on the Phone and the OSX on the MacBook is still updating so I can not yet see if that solves the issues. If it works, this will at least get me a development environment setup between iPhone and MacBook basically with COVID-19 going on “at my kitchen table” like everyone else in the world right now.

The Mapertunity user experience is pretty good on PC using a Chrome browser and I would really like to get an equally nice user experience up and running on the iPhone for everyone else.

So how did I do it?

Well according to the internet I could get the iPhone to talk to the MacBook if I had the “remotedebug-ios-webkit-adapter”  utitlity running on the PC.

I tried to run this command from the MacBook command line Terminal and all I got was a “Command Not Found” error message. So it was obvious I did not have this utility already on the PC and I needed to install it.

I found out I could install “remotedebug-ios-webkit-adapter” with a second utility called “Brew”.

Brew I found out, I did not have on the MacBook either.

I further found out, a third utility called “Scoop” . I did not need scoop because brew had an installer script that did the job for me.

So I was able to run the brew package manager and I got Brew Installed on the MacBook.

Normally, during the past bunch of years, none of this online how to stuff ever worked but I was happily surprised I at least got Brew set up on the mac.

brew is a package manager that installs other software on the Mac. Yay.

Now that I had Brew running on the MacBook PC, I was able to install the 2 missing libraries needed before “remotedebug-ios-webkit-adapter” will function.

Those 2 libraries are “libimobiledevice” and  “ios-webkit-debug-proxy” and they are installed with Brew.

Not there yet but we are almost there. So far so good. Nothing has blown up yet and so far everything we are supposed to need installed has installed.

Now that we have the 2 missing OSX libraries installed we can install the webkit adapter library.

To install that I needed “npm”.

A quick check and I discovered I did not have “npm” installed on the MacBook either.

I found out npm is a Node.js function and i could not run npm without installing Node.js on the MacBook as well.

I hope I have enough memory to install all this new code on this old machine.

Cross your fingers.

More reading “how to install Node.js on the MacBook”.

As it turns out, Brew can do this too.

The command was “brew install node”.

Sounds too easy but hey it worked!

Ok I think I have everything now installed to be able to install “remotedebug_ios_webkit_adapter”.

Let’s try it

run> npm install remotedebug-ios-webkit-adapter -g

TaDAAA. It worked!

So now I had the iPhone to MacBook communication protocol software installed to be able to monitor what the iPhone was seeing on the MacBook.

The rest of it was fairly easy. I had to put the iPhone Safari into “web inspector” mode. Connect the iphone to the MacBook with a usb cable.  Then on the Mac put Safari into developer mode, then in Chrome, view the Remote Devices pages.

But still getting blank pages and the internet is saying they see this when the iOS and OSX are out of sync. So doing the updates!

Doug Ayers

Lead Software Developer, Mapertunity