Debugging Qt Quick 2 – Console API

Published Thursday March 1st, 2012
10 Comments on Debugging Qt Quick 2 – Console API
Posted in Debugging, Performance, Qt Quick, Qt Quick 2, QtCreator

Qt Quick brings a lot of flexibility and speed to development. Traditionally one had to do the “compile, package, deploy, run” cycle over and over again, whereas with Qt Quick you can now do incremental changes to your source even at runtime! In Qt Creator, we are trying to leverage the power of Qt Quick, version by version. However, as with any programming language there is a downside. Script compilation errors are runtime errors in QML, sometimes you’re trying to wrap your mind around QtDeclarative binding loops, JavaScript has many dark corners that you don’t want to be caught in and so on… All these potential pitfalls mean that a good debugger, profiler and inspector are weapons you really want to have πŸ™‚

The focus in this blog post is on debugging and the most straightforward debugging technique: The console API. Chances are high that you’ve already used it in your first helloworld.qml file, since console.log() is a part of it. We recently updated Qt 5 with some of the most useful methods from the FireBug console API (a defacto standard in web browsers).


We’ve been supporting console.log and console.debug since Qt Quick 1.0. The print() from QtScript days still works but as it has a slightly different meaning, when you execute it in JavaScript code in a web browser, it should be left alone. In Qt 5 we added a few more logging functions. All the calls are directly forwarded to its Qt counterparts:

JavaScript function Qt/C++ counterpart
console.log() qDebug()
console.debug() qDebug() qDebug()
console.warn() qWarning()
console.error() qCritical()

Yes, at the moment, console.log(), console.debug(), and have the same functionality! Since they are some of the most often used methods and can be found in countless JavaScript code snippets on the net, we’re supporting them. Maybe it’s also food for thought that we should add an additional log level to qlogging.h πŸ˜‰


Ever wondered about how long a particular code path takes? Take for example the logic in your onCompleted method.

Component.onCompleted() {
  // ...

will print the time in milliseconds. The string argument is both an identifier for the particular measurement (you can also make interleaved measurements) and the prefix for the output:

onCompleted: 401ms

For a more in-depth analysis there’s console.profile(), console.profileEnd().

Component.onCompleted() {
Component.onDestruction() {

The API pair profiles both the state of the QDeclarativeEngine as well as V8 method calls. However, to retrieve the data you have to attach the QML Profiler tool to your application before calling console.profileEnd() else the profiling data is lost. Christiaan Janssen has already described the QML Profiler tool that ships with Qt Creator in a previous post here. A standalone profiler tool is available in Qt 5 that saves the profiling data in a file. This file can then be read using Qt Creator.

Still More…

We have also introduced the following APIs:

console.assert() : To test an expression and print an optional message and the stack trace of JavaScript execution if the expression evaluates to false.

console.exception(): Prints an error message and the stack trace of JavaScript execution.

console.trace(): Prints a stack trace of JavaScript execution at the point where it is called.

console.count(): Prints the number of times this function is called along with a user provided message.

Script Console – New Avatar

The QML console was first introduced in Qt Creator 2.1. However, it was a simplified console limited to evaluating simple expressions. We felt that Qt Quick2 developers need a more advanced console to unleash the power of QML.

We introduce to you the new avatar of the QML Console a.k.a. Script Console.


QML Console

Script Console in Qt Creator

Apart from evaluating expressions, the Script Console shows the debug output, both Qt debug messages and JavaScript console messages, in a pretty way πŸ˜‰ You can use the filter buttons located in the top right corner to view logs that appeal to you. For example, if you want to see only the errors, then de-select the info and warning buttons and VoilΓ ! The debug output also shows the file and line info and clicking on it opens the relevant file in the editor with the cursor on the particular line. No more do you need to add context info in your output messages to locate them in your source code. Also you can always rely on the Find toolbar to search for text in the console.

JavaScript objects and arrays are shown in an expandable tree in the console. The current context, which is used to evaluate the expressions,Β  is displayed in the status bar. The Script Console can be used even when not on a debug break to inspect and evaluate QML elements and expressions. The Script Console also supports multi-line input. It also remembers your previous inputs so that you don’t need to type that really long expression again.

The best thing is that you do not have to wait for too long as the Script Console will be a part of Qt Creator 2.5.

What’s missing?

We haven’t implemented the methods dealing with the console so far, just because they don’t make too much sense when your console is just the command line. For example, it would be hard to implement console.clear() in a portable way πŸ˜‰ We left out, console.groupCollapsed(), console.groupEnd(), console.table(), console.dir(), console.dirXml() for similar reasons.

The Script Console in Qt Creator is WIP.Β  Currently, QML objects and arrays are not shown in a tree. The console still needs polishing and do expect more features in later versions.

We are eager to hear your wish list and your experiences with the console. You can contact us via the qtcreator mailing list or on IRC at the freenode server, channel #qt-creator.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Debugging, Performance, Qt Quick, Qt Quick 2, QtCreator


Chris says:

Can QtQuick2/Qt5 get any more awesome?

Vladimir Minenko says:

SUPER! I was looking for this for a while! It would be great to get some properties, e.g. in the Qt global object, to turn different types of the output on and off, i.e. a kind of QT_NO_DEBUG_OUTPUT and QT_NO_WARNING_OUTPUT known in C++. Maybe these properties can even be evaluated by the engine and just let it skip console calls to avoid large performance penalties.

kkoehne says:

@Vladimir: Interesting idea … There are discussions going on right now to have such a filtering on the C++ side: . As soon as it’s there I don’t see why we shouldn’t support categories , and filtering based on it, in QML/JS too.

Btw, if anybody want’s to get the file, line information also if you’re launching from the console / outside of the debugger: Try to set the QT_OUTPUT_PATTERN environment variable to e.g. “%{file}:%{line} %{message}”, and voila … That’s also a feature new in Qt5.

fonzi says:

This is really awesome and should be a great debugging aid. I particularly like the inclusion of console.assert() and console.exception(). πŸ™‚

One wishlist feature I’d like to have (not sure if you already have it in there – it’s hard to tell from the screenshot) is the ability to filter the script console by a keyword. I love that Qt Creator provides a filter search bar in many other places in the UI and I would welcome it here too in case one wants to unclutter the output by focusing in on a particular substring (I’m thinking this may be particularly useful for larger QML-based applications).

Another nice feature would be to have the ability to automatically save the script console output to a file as the program executes (perhaps even format it nicely in XML or other format). I could see this being useful for running some sort of automated tests on the output file (for instance, ensuring no assertions failed or exceptions were thrown).

Aurindam Jana says:

Thanks fonzi πŸ™‚

The Script Console supports Find text functionality (Genie grants your wish!) Thanks for pointing that out since I forgot to mention it. I have updated the blog post.

Saving the output to a file is a good idea, maybe something like console.mark() and console.markEnd() where the pair marks the start and end of the debug output that should be saved to a file.

fonzi says:

Ah yes, that find text search bar is just what I was looking for. Thanks! πŸ™‚

As far as the console.mark()/console.markEnd(), that certainly could work. I’m wondering if it may be more convenient in some scenarios to just have a global setting of some sort so that the code does not need to be modified to include console.mark()/markEnd(). I’m thinking particularly for a larger project with many QML files, it may not be practical to add console.mark()/markEnd() to every file. Perhaps having both approaches may be helpful.

Juh says:

Sorry for offtopic, but will qml2 have pixel density independent UI? That is the showstopper for me. And manually calculation isn’t really an option.

Aurindam says:

@Juh .. email your question to the Development mailing list ..

DaveN says:

Yes it can get more awesome by supporting desktop. I feel Nokia and the trolls have really betrayed Qts roots the last couple years.

kkoehne says:

@DaveN: There’s nothing ‘non-desktop’ in the features described in this blog post.

Commenting closed.

Get started today with Qt Download now