Published 2010-06-11 14:32:09

One of the key reasons to create the app.Builder, was so I could speed up the development of Web applications using the Roo library. The web based version saved considerable time, and led to quite an improvement in delivery times for projects. 

It's key drawback was the very limited editing enviroment offered by web based textarea, the slight latency and klunky file writing method. However the ability to use Firebug or Webkit inspector was very usefull in debugging in-development applications.

As I eat my own dogfood by developing with the desktop version, most of the previous issues with the development platform had been solved, however debugging was very difficult - I effectively had to run the application in a browser to get debugging information. So after a day of fustration with that, I decided to investigate the Webkit API a bit further, and to my delight discovered that the Inspector you see in Chromium / Chrome is just a few lines of code away.


As you can see above, I can fully debug the application as it's being modified.

The basic code to do this was quite simple. It needs a couple of fixes to the WebKit Gir file, (which has been submitted as a bug report to Webkit), but this simple bit of code should illustrate how to use it in seed.

//<Script type="text/javascript">

/**
 *  Test of web kit inspector.
 *  create a window + 2 webviews. inside scrolled window.
 *     load google in first, then hook in the inspector..
 * 
 * needs the transfer ownship fixing on return value in  WebKit-1.0.gir
 * 
 *  <method name="get_inspector"
 *             c:identifier="webkit_web_view_get_inspector">
 *       <return-value transfer-ownership="none">
 *         <type name="WebInspector" c:type="WebKitWebInspector*"/>
 *       </return-value>
 *     </method>
 *
 * then compile it..
 * g-ir-compiler /usr/share/gir-1.0/WebKit-1.0.gir -o /usr/lib/girepository-1.0/WebKit-1.0.typelib 
 *
 */
 
 
Gtk = imports.gi.Gtk;
WebKit = imports.gi.WebKit;

Gtk.init(null,null);

// build the UI..
w = new Gtk.Window.c_new( Gtk.WindowType.TOPLEVEL);
v = new Gtk.VBox();
s1 = new Gtk.ScrolledWindow();
s2 = new Gtk.ScrolledWindow();
w1 = new WebKit.WebView();
w2 = new WebKit.WebView();
s1.add(w1);
s2.add(w2);
v.add(s1);
v.add(s2);
w.add(v);

// enable inspector..
w1.get_settings().enable_developer_extras = true;

// load google on show..
w1.signal.show.connect(function() {
    w1.load_uri("http://www.google.com");
});

// load the inspector when loading has finished!
w1.signal.load_finished.connect(function(wv) {
    w1.get_inspector().show();
});

// return the bottom window as the inspector..
w1.get_inspector().signal.inspect_web_view.connect(function() {
    return w2;
})

// show and go..
w.show_all();
Gtk.main();

 
Mentioned By:
google.com : 118 (39 referals)
www.planet-php.net : Planet PHP (28 referals)
phpcamp.net : PHPCamp - Toolbar-Using WebKit Inspector with seed (26 referals)
google.com : seed webkit (22 referals)
phpcamp.net : Using WebKit Inspector with seed | PHPCamp (10 referals)
www.dzone.com : Using WebKit Inspector with seed (8 referals)
google.com : webkit inspector (8 referals)
planet-php.org : Planet PHP (2 referals)
google.com : "webkit-1.0.gir" (2 referals)
google.com : imports.gi.webkit (2 referals)
www.phpeye.com : Using WebKit Inspector with seed - Alan Knowles - PHP教程|PHP5|PEAR|框架 - Powered by HappyCMS (1 referals)
google.com : allintitle: seed webkit (1 referals)
google.com : get_inspector () pygtk webkit (1 referals)
google.com : gir seed webkit (1 referals)
google.com : google.com.gir (1 referals)
google.com : gtk webkit javascript textfield value (1 referals)
google.com : gtk webkit seed (1 referals)
google.com : gtk webview inspector (1 referals)
google.com : javascript webkit inspector signal (1 referals)
google.com : php webkit inspector (1 referals)

Add Your Comment