本篇簡介
本篇的小目標：
- 借助Qt自家的QWebEngineView實現瀏覽器的基本功能：輸入地址訪問頁面和刷新頁面
- 定制QWebEngineView的ContextMenu，實現Inspector調試界面的調用
QWebEngineView基礎
首先在所創建項目的.pro配置中添加webenginewidgets模塊：
QT += webenginewidgets
然后在主窗口初始化時創建QWebEngineView對象：
1 m_webView = new QWebEngineView(this); 2 QStackedLayout* layout = new QStackedLayout(ui->frame); 3 ui->frame->setLayout(layout); 4 layout->addWidget(m_webView);
界面上有一個輸入地址的控件(adressEdit)和兩個按鈕——訪問按鈕（btnGo）和刷新按鈕(btnRefresh)，使用QWebEngineView的load和reload方法，可以很方便地實現這兩個按鈕的功能：
1 connect(ui->btnGo, &QPushButton::clicked, this, [this]() { 2 QString url = ui->addressEdit->text(); 3 if (!url.isEmpty()) 4 { 5 m_webView->load(url); 6 } 7 }); 8 connect(ui->btnRefresh, &QPushButton::clicked, this, [this]() { 9 m_webView->reload(); 10 });
這樣一個簡單的瀏覽器就實現好了，訪問一下百度看看效果：
實現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就實現完成了，試試效果：
