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.

  1. Start by creating a new HTML5 Application in Qt Creator.

  2. Give it a cool name.

  3. Tell Qt Creator to generate an index.html to be displayed by the app.
  4. Default build options are fine.
  5. Click “Done” to make it happen
  6. 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.
  7. 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.
  8. 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.webView()->page()->settings()->setAttribute(QWebSettings::DeveloperExtrasEnabled, true);

    QWebInspector inspector;


    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.

Posted by Manuel Wudka-Robles

Manuel is a sponge for software knowledge. Manuel’s software development expertise ranges from Rails web development to obscure 3rd party APIs and long-forgotten web properties. Manuel was the “API guy” at Genius.com, recognized for his deep knowledge of how to build and scale APIs. At Turn, Manuel focused on improving the exciting world of display advertising. Most recently at Tello, Manuel led the integration with Twilio and KISSMetrics. At Palomino Labs, Manuel also serves as Director of IE Compatibility.

About Palomino Labs

Palomino Labs unlocks the potential of software to change people and industries. Our team of experienced software developers, designers, and product strategists can help turn any idea into reality.

See the Palomino Labs website for more information, or send us an email and let's start talking about how we can work together.