How to debug QML filter in general?

Help/How To
#1

Hi,

So I’m trying to adding an UI for a frei0r filter, the UI finally appeared, after spending a lot of time to guessing the problems.

So is there any way to debug QML problems? I’ve checked out “View” - “Application Log” but found nothing related.

#2

If the QML file can not load due to syntax errors, then there will be an error message in the application log.

Also, you can use the JavaScript console.log() function to print messages to the log.

#3

Thanks Brian,

My Shotcut version is: 21.04.06

Say I have a plugin with meta.qml and ui.qml in a cluster-plugin directory,
at startup, I can see it prints below to console:

[Debug  ] <FilterController::loadFilterMetadata> reading filter metadata "cluster-plugin" "meta.qml" 
[Debug  ] <FilterController::loadFilterMetadata> added filter "Frei0r Cluster Effect"

With intentionally “buggy” ui.qml, i.e. unbalanced {:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Layouts 1.12
import Shotcut.Controls 1.0 as Shotcut

Item {

I haven’t seen related error messages in the log.

As for console.log, is it wrong to write it like this, for example:

    Component.onCompleted: {
        console.log('hello shotcut')
        // ... logic
    }

Again, I haven’t seen it in the log:(

#4

It seems you are right. I assumed it would work. I always run shotcut.exe in an msys shell and it shows in there.

I checked the application log and it does not show in there. I also tried cmd.exe, but shotcut does not stay in the console foreground.

Maybe try cygwin, msys or git bash

#5

Actually I run shotcut from a bash shell, and I didn’t see the log in the console too.

Turns out the above problem happens only in version 21.04.06, console.log works with the lastest version 21.05.18, great!

#6

With latest version 21.05.18, this unbalanced bracket still doesn’t cause an error.

But if meta.qml has this “bug”, shotcut will refuse to load it with an error like this:

[Debug  ] <FilterController::loadFilterMetadata> reading filter metadata "cluster-plugin" "meta.qml" 
[Warning] <FilterController::loadFilterMetadata> "file:///path/to/shotcut/share/shotcut/qml/filters/cluster-plugin/meta.qml:10 Expected token `}'\n"
#7

It seems when there is syntax error is filter’s ui.qml, shotcut doesn’t print a log, after reading the source code.

The Loader component of filterview.qml takes care of rendering ui.qml, which reads:

        Loader {
            id: filterConfig
            enabled: !filterMenu.visible
            property int minimumWidth: 0
            onLoaded: {
                minimumWidth = item.width
                filterConfigScrollView.expandWidth()
            }
        }

Per Loader QML Type | Qt Quick 5.15.4, onLoaded is only called when its status becomes Loader.Ready.

I tried to handle status changing with below code, and it shows the log as expected:

            onStatusChanged: {
                console.log("filter loader status changed to:", filterConfig.status)
            }

But I’m now stuck as I don’t know how to get the error message, it seems there is no such way as in the doc link.

#8

I just tried this in Windows and you seem to be correct. I had never noticed this before. I typically develop QML in Linux. In Linux I typically see a lot of useful error messages from the QML engine when there are logic and syntax errors.

If you figure something out, let us know.

#9

Interesting because I also run it on Linux, where to see these errors?

#10

Not sure if this helps: Debugging QML Applications | Qt 5.15

If you use Microsoft Visual Studio as your IDE there is a code-checking/debugging feature, see:

1 Like
#11

Use Qt Creator

1 Like
#12

This topic was automatically closed after 90 days. New replies are no longer allowed.