QWebEngineView 中是否有用于检查元素的预定义功能？

Question

创建浏览器（例如此示例）时，如何添加调试器功能，例如 Google Chrome 的检查元素？

我知道它可以用 pywebview 本地完成，但我正在使用 PyQt5，但我还没有找到任何本地解决方案。那么有可能吗？如果可以的话我可以为其添加快捷方式吗？

Answer 1

我已经尝试过：

您可以将 Chrome 开发者工具 (DevTools) 集成到基于 PyQt5 的浏览器中以进行调试。 Chrome DevTools 可以在单独的窗口中运行，并使用 Chrome DevTools 协议 (CDP) 与您的应用程序进行通信。

下面的示例创建了一个简单的 PyQt5 浏览器，其中包含“检查元素”操作，该操作在单独的窗口中打开 Chrome DevTools。

import sys
from PyQt5.QtCore import Qt, QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtWidgets import QApplication, QMainWindow, QAction, QVBoxLayout, QWidget

from pyqtwebengine import QtWebEngineTools

class Browser(QMainWindow):
    def __init__(self):
        super().__init__()

        self.browser = QWebEngineView()
        self.browser.setUrl(QUrl("https://www.example.com"))

        self.setCentralWidget(self.browser)

        self.create_actions()
        self.create_menus()

        self.setWindowTitle("Simple Browser")
        self.setGeometry(100, 100, 1024, 768)

    def create_actions(self):
        self.inspect_element_action = QAction("Inspect Element", self)
        self.inspect_element_action.setShortcut(Qt.CTRL + Qt.Key_I)
        self.inspect_element_action.triggered.connect(self.inspect_element)

    def create_menus(self):
        menubar = self.menuBar()
        dev_menu = menubar.addMenu("Developer")
        dev_menu.addAction(self.inspect_element_action)

    def inspect_element(self):
        # Load Chrome DevTools in a separate window
        QtWebEngineTools.qWebEngineView_inspector(self.browser)

if __name__ == "__main__":
    app = QApplication(sys.argv)
    browser = Browser()
    browser.show()
    sys.exit(app.exec_())