Jupyter Notebook中PyQt5 QWebEngineView下拉框点击按钮无控制台输出如何修复

在Jupyter Notebook中使用Python开发PyQt5应用，通过QWebEngineView嵌入HTML下拉框（而非QComboBox），点击页面中的「Print Selected Value」按钮后，前端console.log的内容没有任何输出，需要解决这个问题。

原代码如下：

import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView    
from PyQt5.QtWidgets import QApplication, QMainWindow

html = """
<!DOCTYPE html>
<html>
<head>
    <title>HTML ComboBox</title>
    <script>
        function printSelectedValue() {
            var combobox = document.getElementById("myComboBox");
            var selectedValue = combobox.value;
            console.log("Selected Value: " + selectedValue);
        }
    </script>
</head>
<body>
    <select id="myComboBox">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
    </select>

    <button onclick="printSelectedValue()">Print Selected Value</button>
</body>
</html>
"""


app = QApplication(sys.argv)
web_engine_view = QWebEngineView()
web_engine_view.setHtml(html)
web_engine_view.show()

sys.exit(app.exec_())

问题原因 #

QWebEngineView默认不会将前端JavaScript的console.log输出转发到Python控制台，也没有默认显示Chrome风格的开发者工具，因此点击按钮后看不到任何输出。

修复方案 #

方案1：将前端控制台输出转发到Python控制台

通过监听QWebEnginePage的javaScriptConsoleMessage信号，把前端的console内容打印到Python控制台中。

修改后的代码：

import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView, QWebEnginePage  
from PyQt5.QtWidgets import QApplication, QMainWindow

html = """
<!DOCTYPE html>
<html>
<head>
    <title>HTML ComboBox</title>
    <script>
        function printSelectedValue() {
            var combobox = document.getElementById("myComboBox");
            var selectedValue = combobox.value;
            console.log("Selected Value: " + selectedValue);
        }
    </script>
</head>
<body>
    <select id="myComboBox">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
    </select>

    <button onclick="printSelectedValue()">Print Selected Value</button>
</body>
</html>
"""

class ConsolePage(QWebEnginePage):
    def javaScriptConsoleMessage(self, level, message, lineNumber, sourceID):
        # 转发前端console内容到Python控制台
        print(f"JS Console: {message} (行号: {lineNumber})")

app = QApplication(sys.argv)
web_engine_view = QWebEngineView()
# 替换为自定义的ConsolePage
web_engine_view.setPage(ConsolePage(web_engine_view))
web_engine_view.setHtml(html)
web_engine_view.show()

sys.exit(app.exec_())

方案2：开启开发者工具（类似Chrome控制台）

直接启用QWebEngineView的开发者工具，可像在Chrome中一样查看console输出、调试HTML和JS。

修改后的代码：

import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtWebEngineWidgets import QWebEngineView    
from PyQt5.QtWidgets import QApplication, QMainWindow

html = """
<!DOCTYPE html>
<html>
<head>
    <title>HTML ComboBox</title>
    <script>
        function printSelectedValue() {
            var combobox = document.getElementById("myComboBox");
            var selectedValue = combobox.value;
            console.log("Selected Value: " + selectedValue);
        }
    </script>
</head>
<body>
    <select id="myComboBox">
        <option value="Option 1">Option 1</option>
        <option value="Option 2">Option 2</option>
        <option value="Option 3">Option 3</option>
    </select>

    <button onclick="printSelectedValue()">Print Selected Value</button>
</body>
</html>
"""

app = QApplication(sys.argv)
web_engine_view = QWebEngineView()
web_engine_view.setHtml(html)
# 开启开发者工具支持
web_engine_view.page().settings().setAttribute(
    web_engine_view.page().settings().WebAttribute.DeveloperExtrasEnabled, 
    True
)
# 右键点击页面选择「检查」或按F12即可打开开发者工具查看console输出
web_engine_view.show()

sys.exit(app.exec_())

内容的提问来源于stack exchange，提问作者John