Troy Sandal

I’ve started debugging an application for the iPhone and thought it decent to post my first thoughts and discoveries. Apologies for the bad code formatting, I’ve never posted code to my blog before and WordPress really gave me a bad time. I’ll figure this out.
Logging via console.log

First off was console output. The simple console.log() method supported by Safari and FireBug is what I use in much of my code. Though supported on the iPhone one cannot view the console at the same time. Instead of falling back to alert() I instead redirect the console output to the server. John Hewitt built a solution similar to mine which is to have your web server accept log messages. Since I’m working on a Java web server I wrote a Servlet that accepts a URL of the form

http://localhost/app/logger.js?msg=Hello%20World

and logs the output to a local file, in my case /tmp/logger.log. Here’s the Servlet code.

public class LoggerServlet extends HttpServlet {
@Override
protected void doGet(
HttpServletRequest request,
HttpServletResponse response)
throws ServletException, IOException {

   response.addHeader("Cache-Control", "no-cache");
   response.addHeader("pragma", "no-cache");
   response.addHeader("Expires", "-1");
   response.setContentType("text/javascript");
   response.getWriter().write("//Done");
   response.setContentLength(6);

   String message = request.getParameter("msg");
   message = message.replaceAll("rn", "n").replaceAll("r", "n");

  try {
    File x = new File("/tmp/logger.log");
    FileOutputStream fos = new FileOutputStream(x, true);
    PrintWriter pw = new PrintWriter(fos);
    pw.println(message);
    pw.close();
  } catch (java.io.FileNotFoundException fnfe) {
}
} }

On the client I detect if I’m using an iPhone and redirect console.log() to GET this URL instead using a SCRIPT GET. Perhaps using the Image object is better as it doesn’t clutter the DOM. That’s an optimization. Here’s the code.

// This causes browsers without a console or the iPhone to log on the server.
if (typeof console == "undefined" || /iPhone/.test(navigator.platform)) {
var oldConsole = window['console'];
if (typeof console == "undefined")
window.console = { };

console.log = function(msg) {
// Might be too early to do this - can we add directly to the body?
if (typeof document.body == "undefined") {
if (oldConsole) oldConsole.log(msg);
return;
}
var script = document.createElement("script");
script.type = 'text/javascript';
script.src = './logger.js?msg=' + encodeURIComponent(msg);
document.body.appendChild(script);
}
}

It’s simple and works well for my scenarios. To see the log output I just open a Terminal window and run ‘tail -f -n 50 /tmp/logger.log’ which continuously displays new log output.

Trapping Enter Key

I’ve got lots of key handlers that check for the enter key by looking for (event.charCode || event.keyCode) == 13. Sadly this fails on the iPhone as it returns 10 (line-feed) instead of 13 (carriage return). I find it odd that Safari returns 13 like IE and FireFox but the iPhone is different.  If you are handling the enter key then you must check for 10 on the iPhone and 13 on other browsers, or check for both which seems safe.
No Scroll bars with CSS Overflow

The next thing I’ve found but have no fix for is displaying scroll bars on block elements with overflowing content. I use this as do many sites and it’s really too bad the iPhone won’t display a scroll bar. Below is an example that, when viewed on the iPhone, shows no scroll bars but does in all other browsers.

troy Development