Debug JavaScript in Qt Creator

Print to the console

The preferred method to debug your AppStudio apps is to use console.log messaging in your QML code, as these messages are displayed in the Qt Creator console and are the same for all platforms. This method works without the installation of the Qt kit; only AppStudio is required.

To run your app in Qt Creator, click Run on the Tools > External > AppStudio menu. You can also press Alt+Shift+R on your keyboard, or click the Run button at the lower left of the Qt Creator window.

Qt Creator debug mode

The version of Qt Creator bundled with AppStudio version 4.0 provides immediate access to the Qt Creator debugging tools. To open your app in debug mode, either press F5 in Qt Creator, or click the Start debugging of startup project button at the lower left of the Qt Creator window.

See Interacting with the Debugger in the Qt documentation for more information on how to use the debugging tools in Qt Creator.

Note:

While the Qt documentation includes information on debugging C++, a Qt SDK license is required to use this language, which is not provided with AppStudio.

Breakpoints

Breakpoints can be used in Qt Creator to interrupt your app when it reaches specific lines of code, passing control to you. You can then examine the state of the app, and continue the execution either line by line or continuously.

You can insert a breakpoint in your app in the following ways:

  • Press F9 (F8 on macOS) with the text pointer on the line where you want to insert the breakpoint.
  • Click the space to the left of the line number.
  • Double-click the empty part of the Breakpoints view, and provide a line number in the Add Breakpoints window that appears.
  • Select Add Breakpoint in the Breakpoints view, and provide a line number in the Add Breakpoints window that appears.

Your app will now stop at the point where you set the breakpoint, with the debugger in Qt Creator providing options to resume as normal, stop the app, or skip to another line of code.

To open the Edit Breakpoints window, either double-click the breakpoint in the Breakpoints view or right-click the breakpoint in the code view, and click Edit Breakpoint. In this window, you can set different types of breakpoints, as well as conditions before the app stops at the breakpoint, the number of times the breakpoint will be ignored before stopping the app, and commands to automatically pass when reaching the breakpoint.

To move a breakpoint, select it and drag it to the desired location. To delete a breakpoint, either press F9 (F8 on macOS) again, click the breakpoint's icon, or right-click the breakpoint and select either Delete Selected Breakpoints or Delete All Breakpoints.

For more information about breakpoints, see Setting Breakpoints in the Qt documentation.

QML Profiler

In addition to possibly causing unexpected errors that prevent an app from working as expected, JavaScript may also be responsible for reduction in performance in a QML app. Executing too much JavaScript in a short period of time, for example, can cause delay or frames to drop. You can use the QML Profiler tool to find the cause of these drops in performance by monitoring data such as JavaScript functions in use, memory usage, and input events.

To enable the QML Profiler, first ensure that your app is not currently running Qt Creator. Then, with your app's Project view open, select Analyze > QML Profiler. Your app will open, with the QML Profiler section opening in Qt Creator behind it. Perform the actions in your app that you want to profile, and click Stop in the QML Profiler section. The QML Profiler section provides you a Scene Graph of your app's behavior. Your code view will also display percentage values for the time your app spent running each part of its code.

For more information about the QML Profiler, see Profiling QML Applications in the Qt documentation.