Enabling Web Inspector in QtWebKit

Qt embeds a complete WebKit browser that works on Mac OSX and Windows complete with advanced HTML5 features like websockets, the video tag, and local storage. It evens offers a straightforward way of communicating between JavaScript and C++. This makes it easy to embed a website in a larger app (e. g. to implement OAuth in a desktop app) or to build a desktop app entirely in HTML5 (like Adobe AIR but with local storage, websockets, and the video tag).

The only annoyance is that it’s not immediately clear from the documentation how to enable the WebKit Inspector. Fortunately, this is relatively straightforward.

Start by creating a new HTML5 Application in Qt Creator.
Give it a cool name.
Tell Qt Creator to generate an index.html to be displayed by the app.
Default build options are fine.
Click “Done” to make it happen
Run the app. After a few seconds you’ll see an app appear containing the ugliest of websites. But hey, it’s running HTML+JS so that’s pretty cool.
Let’s introduce a JS error. Open up Other files/html/index.html and break the JS, perhaps by removing a precious curly brace. If you run the app again you’ll see that the beautiful animation is gone. At this point you have a couple options like resorting to alert() debugging, trying the app in a desktop browser, selectively rolling back changes, etc but they all have shortcomings, especially when you have complex changes that rely on native code exposed by the Qt wrapper. The correct choice is to enable the Web Inspector, so let’s do that.
To display the web inspector change main.cpp to look like this:

#include <QtGui/QApplication>
#include <QtWebKit/QWebInspector>
#include <QtWebKit/QGraphicsWebView>

#include "html5applicationviewer.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    Html5ApplicationViewer viewer;
    viewer.setOrientation(Html5ApplicationViewer::ScreenOrientationAuto);
    viewer.showExpanded();

    viewer.webView()->page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);

    QWebInspector inspector;
    inspector.setPage(viewer.webView()->page());
    inspector.setVisible(true);

    viewer.loadFile(QLatin1String("html/index.html"));


    return app.exec();
}

If you run the app again you’ll be greeted with a friendly web inspector displaying the error you created earlier. Now, console.logs will appear in the console and be pretty-printed, you’ll be able to inspect cookies and local storage, place breakpoints, observe network requests and do everything else you can do with the developer tools in Chrome or Safari.
07_webkit_inspector