QT集成CEF06-F12开启DevTools窗口

​ CefClient 类中提供了 GetKeyboardHandler() 的回调,要求在CefClient 中提供 CefKeyboardHandler 对象。这个对象可以用来响应键盘事件。

​ 本节我们为应用添加

  • F12 用来打开开发者工具(DevTools)
  • F5 刷新页面
class CefClient : public virtual CefBaseRefCounted {
 public:
  /// ...省略
  ///
  // Return the handler for keyboard events.
  ///
  /*--cef()--*/
  virtual CefRefPtr<CefKeyboardHandler> GetKeyboardHandler() { return nullptr; }
  /// ...省略
};

CefKeyboardHandler 接口的定义:

class CefKeyboardHandler : public virtual CefBaseRefCounted {
 public:
  ///
  // Called before a keyboard event is sent to the renderer. |event| contains
  // information about the keyboard event. |os_event| is the operating system
  // event message, if any. Return true if the event was handled or false
  // otherwise. If the event will be handled in OnKeyEvent() as a keyboard
  // shortcut set |is_keyboard_shortcut| to true and return false.
  /// 键盘事件还没有被浏览器网页中的接收到之前,先执行这个方法。如果返回true,表示这个
  /// 事件已经被处理过了。
  /*--cef()--*/
  virtual bool OnPreKeyEvent(CefRefPtr<CefBrowser> browser,
                             const CefKeyEvent& event,
                             CefEventHandle os_event,
                             bool* is_keyboard_shortcut) {
    return false;
  }

  ///
  // Called after the renderer and JavaScript in the page has had a chance to
  // handle the event. |event| contains information about the keyboard event.
  // |os_event| is the operating system event message, if any. Return true if
  // the keyboard event was handled or false otherwise.
  /// 浏览器网页中的JavaScript 已经处理过之后调用
  /*--cef()--*/
  virtual bool OnKeyEvent(CefRefPtr<CefBrowser> browser,
                          const CefKeyEvent& event,
                          CefEventHandle os_event) {
    return false;
  }
};

本节要实现的 F12 , F5 都应该在 OnPreKeyEvent 方法中实现,因为这些不需要经过网页。

1 .实现思路

  • SimpleHandler 类中继续继承 CefKeyboardHandler, 重写 GetKeyboardHandler 方法与 OnPreKeyEvent 方法

  • OnPreKeyEvent 方法的 event 参数中包含键盘的 Key Code,根据Key Code 做出响应的逻辑

  • F5刷新页面,直接调用OnPreKeyEvent 方法的browser 参数的 Reload 方法即可

  • F12 用独立的窗口打开开发者工具可以使用 CefWindowInfoCefBrowserHost::ShowDevTools 配合完成。

2. 实现步骤

只需要修改 simple_handler.h 和 simple_handler.cc即可. 新加入了 继承 CefKeyboardHandler

// simple_handler.h  文件
class SimpleHandler : public CefClient
                      ,public CefLifeSpanHandler
                      ,public CefKeyboardHandler {
    // ... 省略其它代码
    //CefKeyboardHandler
  virtual CefRefPtr<CefKeyboardHandler> GetKeyboardHandler() OVERRIDE 
  { 
      return this; 
  }
  virtual bool OnPreKeyEvent(CefRefPtr<CefBrowser> browser,
      const CefKeyEvent& event,
      CefEventHandle os_event,
      bool* is_keyboard_shortcut);

    // ... 省略其它代码
}

// simple_handler.cc 文件
// ... 省略其它代码
bool SimpleHandler::OnPreKeyEvent(CefRefPtr<CefBrowser> browser, const CefKeyEvent& event, CefEventHandle os_event, bool* is_keyboard_shortcut)
{

    if (event.type == KEYEVENT_RAWKEYDOWN) {
        switch (event.windows_key_code) {
        case VK_F5: //刷新页面
            browser->Reload();
            return true;
        case VK_F12: // 打开浏览器开发者工具
                CefWindowInfo windowInfo;
                CefBrowserSettings settings;
                windowInfo.SetAsPopup(NULL, "Dev Tools");
                browser->GetHost()->ShowDevTools(windowInfo, this, settings, CefPoint());
            return true;
        }
    }
    return false;
}
// ... 省略其它代码

代码请访问 GitHub qt_cef_06分支

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
要在CEF中添加F12调用控制台窗口的功能,可以按照以下步骤进行操作: 1. 在你的CEF应用程序中,找到处理键盘事件的代码。这通常是在你的键盘事件处理函数中。 2. 在键盘事件处理函数中,检查按下的键是否为F12键。你可以使用相关的键码或键标识来判断。 3. 如果检测到按下的是F12键,你需要执行一个操作来显示控制台窗口。在CEF中,可以通过调用`CefDevToolsManager::ToggleDevTools`方法来实现。 示例代码(C++): ```cpp CefRefPtr<CefBrowser> browser; // 获取到当前的CEF浏览器实例 CefRefPtr<CefFrame> frame = browser->GetMainFrame(); CefRefPtr<CefDevToolsManager> devToolsManager = CefDevToolsManager::GetInstance(); devToolsManager->ToggleDevTools(frame); ``` 示例代码(Python): ```python browser = ... # 获取到当前的CEF浏览器实例 frame = browser.GetMainFrame() dev_tools_manager = cefpython.GetDevToolsManager() dev_tools_manager.ToggleDevTools(frame) ``` 4. 确保在你的应用程序中正确设置了CEF DevTools。这通常涉及到在初始化CEF时启用DevTools,并注册相应的消息处理函数。 示例代码(C++): ```cpp void InitializeCef() { CefSettings settings; // 其他CEF设置... settings.remote_debugging_port = 8088; // 启用远程调试端口 CefInitialize(settings, nullptr, nullptr, nullptr); CefRefPtr<CefMessageRouterBrowserSide> messageRouter = CefMessageRouterBrowserSide::Create(); // 添加其他消息处理器... CefDevToolsMessageHandler::Register(messageRouter); // 注册DevTools消息处理器 } ``` 示例代码(Python): ```python def InitializeCef(): settings = {...} # 其他CEF设置 settings.remote_debugging_port = 8088 # 启用远程调试端口 cefpython.Initialize(settings) message_router = cefpython.GetGlobalMessageRouter() # 添加其他消息处理器... cefpython.AddDevToolsMessageHandler(message_router) # 注册DevTools消息处理器 ``` 通过以上步骤,你就可以在CEF中添加F12调用控制台窗口的功能了。当用户按下F12键时,控制台窗口将会被显示出来,供开发人员进行调试和查看页面信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

paopao_wu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值