Qt混合式开发—网页调试

Qt混合式开发—网页调试

Qt混合式开发时有些问题需要在运行环境下才会出现，这时候就需要在app上调试网页，qt就提供了调试网页的方法，下面就是调出调试窗口的方法：

//调试界面的实现

#ifndef INSPECTOR_H

#define INSPECTOR_H

#include

#include

#include

#include

#include

class Inspector : public QDialog

{

public:

Inspector(QWebEnginePage *source,QWidget *parent = nullptr);

private:

QWebEngineView* m_webView = nullptr;

protected:

void closeEvent(QCloseEvent *event);

};

#endif // INSPECTOR_H

#include “inspector.h”

Inspector::Inspector(QWebEnginePage *source, QWidget *parent):QDialog(parent)

{

resize(1500,800);

m_webView = new QWebEngineView(this);

source->setDevToolsPage(m_webView->page());

source->triggerAction(QWebEnginePage::InspectElement);

QStackedLayout* layout = new QStackedLayout(this);

this->setLayout(layout);

layout->addWidget(m_webView);

QDialog::show();

}

void Inspector::closeEvent(QCloseEvent *)

{

this->accept();

delete m_webView;

}

实现网页右击弹出菜单选项，点击调试按钮弹出调试窗口

class QWebview : public QWebEngineView

{

Q_OBJECT

public:

QWebview(QString sUrl,QWidget *parent = nullptr);

~QWebview() override;

protected:

void contextMenuEvent(QContextMenuEvent *event) override;

};

void QWebview::contextMenuEvent(QContextMenuEvent *event)

{

QMenu *menu = page()->createStandardContextMenu();

const QList actions = menu->actions();

auto inspectElement = std::find(actions.cbegin(), actions.cend(), page()->action(QWebEnginePage::InspectElement));

if (inspectElement == actions.cend()) {

auto viewSource = std::find(actions.cbegin(), actions.cend(), page()->action(QWebEnginePage::ViewSource));

if (viewSource == actions.cend())

menu->addSeparator();

QAction *action = new QAction(menu);

action->setText(“Open inspector in new window”);

QAction *before(inspectElement == actions.cend() ? nullptr : *inspectElement);

menu->insertAction(before, action);

connect(action, &QAction::triggered,this,[this](){new Inspector(page());});

} else {

(*inspectElement)->setDisabled(true);

}

menu->popup(event->globalPos());