How to catch javascript error in QWebEngineView in Qt Creator?

Question

I'm debugging a javascript script running in QWebEngineView. I want to catch the js errors(such as calling a non-existed function) in Qt Creator. Currently, the js output through console.log() can be displayed in Qt application output window, but the syntax error messages cannot be caught. How to get those errors to make the debug easier?

Answer 1

one way to do this is by subclassing QWebEnginePage and overriding the method QWebEnginePage::javaScriptConsoleMessage(). For example (tested in Qt 5.15):

#include <QApplication>
#include <QWebEngineView>
#include <QWebEnginePage>
#include <QUrl>
#include <QDebug>


class MyWebEnginePage : public QWebEnginePage{
protected:
    void javaScriptConsoleMessage(QWebEnginePage::JavaScriptConsoleMessageLevel level,
                                  const QString &message,
                                  int lineNumber,
                                  const QString &sourceID) override{
        qDebug()<<"message: "<<message;
        qDebug()<<"level: "<<level;

    }
};

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWebEngineView view;
    MyWebEnginePage *myPage = new MyWebEnginePage;
    myPage->setParent(&view);
    view.setPage(myPage);
    view.setUrl(QUrl("https://www.google.com/"));
//    view.load(QUrl::fromLocalFile("index.html")); // or you can load a local file like this
    view.show();
    return app.exec();
}