Qt 嵌入浏览器 QWebEngineView实现浏览器基本功能 |
您所在的位置：网站首页 › qtwebengineview › Qt 嵌入浏览器 QWebEngineView实现浏览器基本功能 |
Qt 嵌入浏览器 QWebEngineView实现浏览器基本功能
|
实现Inspector调试界面
在谷歌浏览器中按一下F12可以调出功能强大的调试界面，QWebEngine中也包含了这个功能。这里我们稍微简化一下，改成在页面上点击右键并选择"Inspect"，即可呼出调试界面。 首先需要设置一个环境变量QTWEBENGINE_REMOTE_DEBUGGING来指定调试页面所使用的端口号。例如，将7777端口设为调试端口，可在主窗口初始化方法的最开头添加下面的代码： qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "7777");如果设置成功，在终端上会打印如下提示： Remote debugging server started successfully. Try pointing a Chromium-based browser to http://127.0.0.1:7777然后实现一个QDialog作为Inspector的界面，里面内嵌另一个QWebEngineView，这个view专门用来加载调试页面： 1 Inspector::Inspector(QWidget *parent) : 2 QDialog(parent), 3 ui(new Ui::Inspector) 4 { 5 ui->setupUi(this); 6 7 connect(ui->btnClose, &QPushButton::clicked, this, [this](){ 8 hide(); 9 }); 10 11 m_webView = new QWebEngineView(this); 12 QStackedLayout* layout = new QStackedLayout(ui->frame); 13 ui->frame->setLayout(layout); 14 layout->addWidget(m_webView); 15 m_webView->load(QUrl("http://localhost:7777")); 16 QDialog::show(); 17 }因为这里的关闭按钮实际上只是把界面隐藏起来了，所以重载一下show方法，保证每次打开时调试的页面是最新的： 1 void Inspector::show() 2 { 3 m_webView->reload(); 4 QDialog::show(); 5 } 最后在主窗口初始化时修改一下QWebEngineViewContextMenu设置。因为QWebEngineView继承了QWidget，所以可以使用与处理QWidget类似的方式定制ContextMenu： 1 m_webView->setContextMenuPolicy(Qt::CustomContextMenu); 2 m_inspector = NULL; 3 connect(m_webView, &QWidget::customContextMenuRequested, this, [this]() { 4 QMenu* menu = new QMenu(this); 5 QAction* action = menu->addAction("Inspect"); 6 connect(action, &QAction::triggered, this, [this](){ 7 if(m_inspector == NULL) 8 { 9 m_inspector = new Inspector(this); 10 } 11 else 12 { 13 m_inspector->show(); 14 } 15 }); 16 menu->exec(QCursor::pos()); 17 });这样一个简单的Inspector就实现完成了，试试效果：
|
【本文地址】
今日新闻 |
推荐新闻 |