Question

Here’s an answer for a similar question in Objective C but I’m not sure what’s the right way to translate it to MonoTouch.

Basically, I want to be able to catch JavaScript errors and know at least filename and line number—unfortunately, window.onerror doesn’t give this crucial information.

In particular, I’m not sure if I should expose a native library or if I can write this in pure MonoTouch.

Answer 1

I adopted Pablo’s UIWebView+Debug category inspired by Robert Sanders and Kresimir Prcela’s answers.

Note that his code also includes a private API call you can use to enable remote web inspector.
(For some reason this thing doesn’t work for me though.)

Update: here‘s how to debug UIWebView in Mountain Lion—you need to download an older version of Chromium.

Remember to only use private API while debugging—if you submit an app and forget to remove these calls, Apple will reject your app. For this reason both Xcode and MonoDevelop code use DEBUG conditions.

Here is the complete source code I’m using:

Xcode project

UIWebView+Debug.h

//
//  WebView+Debug.h
//  VOL
//
//  Created by Pablo Guillen Schlippe on 26.07.11.
//  Copyright 2011 Medienhaus.
//

/*

 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
 associated documentation files (the "Software"), to deal in the Software without restriction, 
 including without limitation the rights to use, copy, modify, merge, publish, distribute, 
 sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is 
 furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or 
 substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT 
 NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 
 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, 
 DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT
 OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 

 */

// This little drop in category is based on the following StackOverflow article:
// https://stackoverflow.com/questions/193119/


#ifdef DEBUG

// Use this to toggle logging
#define kDidParseSource         0
#define kFailedToParseSource    1
#define kExceptionWasRaised     1
#define kDidEnterCallFrame      0
#define kWillExecuteStatement   0
#define kWillLeaveCallFrame     0

void enableRemoteWebInspector(void);

#endif

UIWebView+Debug.m

//
//  WebView+Debug.m
//  VOL
//
//  Created by Pablo Guillen Schlippe on 26.07.11.
//  Copyright 2011 Medienhaus. All rights reserved.
//
    
#ifdef DEBUG

#import <objc/runtime.h>
#import "UIWebView+Debug.h"

@class WebView;
@class WebFrame;
@class WebScriptCallFrame;

#pragma mark -

static NSString* getAddress() {
    id myhost =[NSClassFromString(@"NSHost") performSelector:@selector(currentHost)];
    
    if (myhost) {
        for (NSString* address in [myhost performSelector:@selector(addresses)]) {
            if ([address rangeOfString:@"::"].location == NSNotFound) {
                return address;
            }
        }
    }
    
    return @"127.0.0.1";
}

void enableRemoteWebInspector() {
    [NSClassFromString(@"WebView") performSelector:@selector(_enableRemoteInspector)];
    NSLog(@"Point your browser at http://%@:9999", getAddress());
}

#pragma mark -

@interface ScriptDebuggerDelegate : NSObject

-(id)functionNameForFrame:(WebScriptCallFrame*)frame;
-(id)callerForFrame:(WebScriptCallFrame*)frame;
-(id)exceptionForFrame:(WebScriptCallFrame*)frame;

@end

#pragma mark -

@implementation ScriptDebuggerDelegate

// We only have access to the public methods declared in the header / class
// The private methods can also be accessed but raise a warning.
// Use runtime selectors to suppress warnings

#pragma clang diagnostic push
#pragma clang diagnostic ignored "-Warc-performSelector-leaks"

-(id)functionNameForFrame:(WebScriptCallFrame*)frame {
    SEL functionNameSelector = @selector(functionName);
    return [(id)frame performSelector:functionNameSelector];
}

-(id)callerForFrame:(WebScriptCallFrame*)frame {
    SEL callerSelector = @selector(caller);
    return [(id)frame performSelector:callerSelector];
}

-(id)exceptionForFrame:(WebScriptCallFrame*)frame {
    SEL exceptionSelector = @selector(exception);
    return [(id)frame performSelector:exceptionSelector];
}

#pragma clang diagnostic pop

- (void)webView:(WebView *)webView      didParseSource:(NSString *)source
 baseLineNumber:(unsigned)lineNumber
        fromURL:(NSURL *)url
       sourceId:(int)sid
    forWebFrame:(WebFrame *)webFrame {
    if (kDidParseSource)
        NSLog(@"ScriptDebugger called didParseSource: \nsourceId=%d, \nurl=%@", sid, url);
}

// some source failed to parse
- (void)webView:(WebView *)webView failedToParseSource:(NSString *)source
 baseLineNumber:(unsigned)lineNumber
        fromURL:(NSURL *)url
      withError:(NSError *)error
    forWebFrame:(WebFrame *)webFrame {
    if (kFailedToParseSource)
        NSLog(@"ScriptDebugger called failedToParseSource:\
              \nurl=%@ \nline=%d \nerror=%@ \nsource=%@",
              url, lineNumber, error, source);
}

- (void)webView:(WebView *)webView  exceptionWasRaised:(WebScriptCallFrame *)frame
       sourceId:(int)sid
           line:(int)lineno
    forWebFrame:(WebFrame *)webFrame {
    if (kExceptionWasRaised)
        NSLog(@"ScriptDebugger exception:\
              \nsourceId=%d \nline=%d \nfunction=%@, \ncaller=%@, \nexception=%@",
              sid,
              lineno,
              [self functionNameForFrame:frame],
              [self callerForFrame:frame],
              [self exceptionForFrame:frame]);
}

// just entered a stack frame (i.e. called a function, or started global scope)
- (void)webView:(WebView *)webView    didEnterCallFrame:(WebScriptCallFrame *)frame
       sourceId:(int)sid
           line:(int)lineno
    forWebFrame:(WebFrame *)webFrame {
    if (kDidEnterCallFrame)
        NSLog(@"ScriptDebugger didEnterCallFrame:\
              \nsourceId=%d \nline=%d \nfunction=%@, \ncaller=%@, \nexception=%@",
              sid,
              lineno,
              [self functionNameForFrame:frame],
              [self callerForFrame:frame],
              [self exceptionForFrame:frame]);
}

// about to execute some code
- (void)webView:(WebView *)webView willExecuteStatement:(WebScriptCallFrame *)frame
       sourceId:(int)sid
           line:(int)lineno
    forWebFrame:(WebFrame *)webFrame {
    if (kWillExecuteStatement)
        NSLog(@"ScriptDebugger willExecuteStatement:\
              \nsourceId=%d \nline=%d \nfunction=%@, \ncaller=%@, \nexception=%@",
              sid,
              lineno,
              [self functionNameForFrame:frame],
              [self callerForFrame:frame],
              [self exceptionForFrame:frame]);
}

// about to leave a stack frame (i.e. return from a function)
- (void)webView:(WebView *)webView   willLeaveCallFrame:(WebScriptCallFrame *)frame
       sourceId:(int)sid
           line:(int)lineno
    forWebFrame:(WebFrame *)webFrame {
    if (kWillLeaveCallFrame)
        NSLog(@"ScriptDebugger willLeaveCallFrame:\
              \nsourceId=%d \nline=%d \nfunction=%@, \ncaller=%@, \nexception=%@",
              sid,
              lineno,
              [self functionNameForFrame:frame],
              [self callerForFrame:frame],
              [self exceptionForFrame:frame]);
}

@end

#pragma mark -

@interface UIWebView ()

-(id)setScriptDebugDelegate:(id)delegate;

@end

#pragma mark -

@implementation UIWebView (Debug)

- (void)webView:(id)sender didClearWindowObject:(id)windowObject
       forFrame:(WebFrame*)frame {
    ScriptDebuggerDelegate* delegate = [[ScriptDebuggerDelegate alloc] init];
    objc_setAssociatedObject(sender, @"ScriptDebuggerDelegate", delegate, OBJC_ASSOCIATION_RETAIN);
    [sender setScriptDebugDelegate:delegate];
}

@end

#endif

MonoTouch project

AppDelegate.cs

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    [Conditional("DEBUG")]
    [DllImport ("__Internal", EntryPoint = "enableWebInspector")]
    public extern static void EnableRemoteWebInspector ();

    public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
    {
        // It will tell you the port in the console,
        // More info here: http://antony_perkov.blogspot.com/2012/03/debugging-uiwebview-content-in.html
        EnableRemoteWebInspector(); 
        return true;
    }
}    

Because I couldn’t get LinkWith attribute to work properly, I put this in project properties:

iPhone Build Project Options

Simulator

-gcc_flags "-L${ProjectDir}/Native -lNativeLib-arm7 -force_load ${ProjectDir}/Native/libNativeLib-arm7.a"

Device

-gcc_flags "-L${ProjectDir}/Native -lNativeLib-i386 -force_load ${ProjectDir}/Native/libNativeLib-i386.a"

Custom Commands > Before Build

Command

Simulator

sh ${SolutionDir}/NativeLib/compile-arm "${ProjectConfigName}"

Device

sh ${SolutionDir}/NativeLib/compile-arm "${ProjectConfigName}"

Working directory

${SolutionDir}/NativeLib

Finally, these are the build scripts:

compile-i386

xcodebuild -project NativeLib.xcodeproj -target NativeLib -sdk iphonesimulator -configuration $1 clean build
cp build/$1-iphonesimulator/libNativeLib.a ../ProjectName/Native/libNativeLib-i386.a

compile-arm

xcodebuild -project NativeLib.xcodeproj -target NativeLib -sdk iphoneos -arch armv6 -configuration $1 clean build
cp build/$1-iphoneos/libNativeLib.a ../ProjectName/Native/libNativeLib-arm6.a
xcodebuild -project NativeLib.xcodeproj -target NativeLib -sdk iphoneos -arch armv7 -configuration $1 clean build
cp build/$1-iphoneos/libNativeLib.a ../ProjectName/Native/libNativeLib-arm7.a

---

I realize this may not be the best way to do this, but it works just fine.
Feel free to post a simpler solution if you know one.