qt框架，使用webEngine如何调试前端

不断努力的根号七2025-07-26 8:30

解决 Qt 5.14.2 中启用开发者工具的问题

问题在于 Qt 5.14.2 中 QWebEngineSettings::DeveloperExtrasEnabled 属性已被弃用或更改。

正确启用开发者工具的完整方法（Qt 5.14.2）

1. 修改 main.cpp

复制代码

#include <QWebEngineView>
#include <QWebEngineSettings>
#include <QWebEnginePage>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    // 创建主窗口
    QMainWindow window;
    
    // 创建WebEngine视图
    QWebEngineView *webView = new QWebEngineView(&window);
    
    // 启用开发者工具 - Qt 5.14.2 正确方式
    QWebEnginePage *page = webView->page();
    
    // 方法2：启用远程调试（推荐）
    page->setDevToolsPage(page); // 关键设置
    
    // 设置WebChannel（如果使用）
    QWebChannel *channel = new QWebChannel(webView);
    channel->registerObject("backend", backend);
    page->setWebChannel(channel);
    
    // 加载HTML内容
    // ...
    
    return app.exec();
}

2. 设置环境变量（重要）

在代码开头添加环境变量设置：

复制代码

#include <QApplication>
#include <QProcessEnvironment>

int main(int argc, char *argv[])
{
    // 设置远程调试端口
    qputenv("QTWEBENGINE_REMOTE_DEBUGGING", "9222");
    
    QApplication app(argc, argv);
    // ...
}

3. 使用 Chrome 进行远程调试

启动应用程序
打开 Chrome 浏览器
访问地址栏输入 ：
复制代码
```
chrome://inspect
```
配置端口 ：
- 点击 "Configure..."
- 添加 localhost:9222
开始调试 ：
- 在 "Remote Target" 部分找到您的应用
- 点击 "inspect" 打开开发者工具