Welcome to Code Couch

Remote debugging Mobile Safari web apps that have been added to the home screen

Posted by at 11:55pm on November 27, 2011.

On his blog, Nathan de Vries shows how to remotely debug code running in Mobile Safari by calling a private WebKit API. This is a great discovery if you’ve got a problem that doesn’t show itself on the desktop version of Safari.

Unfortunately I had such a problem, and unfortunately, I didn’t realise that as I was running my code from an icon that I’d added to the home screen, Nathan’s script wouldn’t work for me. All I’d get was the error “Mobile Safari.app must be running in the Simulator to enable the remote inspector.”

A bit of debugging and one “man grep” later, I’d got a solution, and it’s pretty easy: modify the parameter passed to grep to look for “Web.app” as well as “MobileSafari”. There are many ways that this particular cat could be skinned, but I opted for a very straightforward locigal OR in the regular expression:

grep "MobileSafari|Web.app"

I’m fairly good with regular expressions, so couldn’t work out why my pipe character (“|”) wasn’t doing the job, so had to admit defeat and RTFM, which gave me the answer:

Grep understands two different versions of regular expression syntax: “basic” and “extended.”

In basic regular expressions the metacharacters ?, +, {, |, (, and ) lose their special meaning; instead use the backslashed versions \?, \+, \{, \|, \(, and \).

And so I had the answer to my problem. Of course, as I’ve come to expect from man pages, it wasn’t exactly stated right at the beginning, nor in big bold letters that said “By default, grep on OS X uses the basic syntax”. Clearly the people who write man pages take great delight in forcing you to read the description of every damn option to find out what the defaults are. Ironically, I could have found out by using grep, for example:

man grep | grep -C 2 " default"

Meh.

Anyway, I had the answer: either place a backslash before the pipe, tell grep to use the extended syntax, or use egrep. Telling grep to use the extended syntax is as simple as using the -E command-line parameter (or –extended-regexp for those who prefer typing a whole essay to get anything done), and so any of these would do the trick:

ps x | egrep "MobileSafari|Web.app"
ps x | grep "MobileSafari\|Web.app"
ps x | grep -E "MobileSafari|Web.app"
ps x | grep --extended-regexp "MobileSafari|Web.app"

I chose to use egrep. Job done. I’m sure Nathan won’t mind me reproducing his script here with my update in place:

MobileSafari_PID=$(ps x | egrep "MobileSafari|Web.app" | grep -v grep | awk '{ print $1 }')
 
if [ "$MobileSafari_PID" == "" ]; then
  echo "Mobile Safari.app must be running in the Simulator to enable the remote inspector."
else
 
  cat <<EOM | gdb -quiet > /dev/null
  attach $MobileSafari_PID
  p (void *)[WebView _enableRemoteInspector]
  detach
EOM
 
fi

Then you point your desktop webkit (Chrome or Safari) at http://localhost:9999 and there you have it. Bob’s your uncle, and Fanny’s a rude word.

Post to Twitter

Comments

There are no responses to this post.

Leave a reply

You must either log in or enter your name and email address to post a comment.

Your email address will not be published.

  • You do not need to log in to comment, but you can if you wish.
  • Log in