PyQt+WebKit experiments part 2: debugging
written on Friday, February 3, 2012
(This is part 2 of the PyQt+WebKit experiments series)
In Part 1 I described how to embed WebKit in a PyQt application and how to expose PyQt objects in WebKit and manipulate them with JavaScript.
Even if you are a great JavaScript master, you can't avoid the occasional typo while writing JavaScript code in your application. This can be quite frustrating with QtWebKit because it likes to stay quiet: it won't tell you about any error.
Let's have a look at an example.
First here is loader.py, a simple Python script which loads a block of HTML:
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
class Window(QWidget):
def __init__(self):
super(Window, self).__init__()
self.view = QWebView(self)
layout = QVBoxLayout(self)
layout.setMargin(0)
layout.addWidget(self.view)
def main():
app = QApplication(sys.argv)
window = Window()
html = open(sys.argv[1]).read()
window.show()
window.view.setHtml(html)
app.exec_()
if __name__ == "__main__":
main()
And here is "broken.html", our broken HTML code:
<html>
<head>
<script>
function brokenFunction(arg1, arg2) {
var result;
result = arg1 * 2;
result += arg2;
resul /= 4;
return result;
}
</script>
</head>
<body>
Complex computation:
<script>
document.write(brokenFunction(2, 3));
</script>
</body>
</html>
Notice the missing 't' in "resul /= 4"?
The last-resort, grandpa-debugged-js-this-way, debugging tool is still there: the mighty alert() function. Just stuff your code with calls to alert() and be happy... Anyone ever wrote code like that?
<html>
<head>
<script>
function brokenFunction(arg1, arg2) {
var result;
result = arg1 * 2;
alert("1");
result += arg2;
alert("2");
resul /= 4;
alert("3");
return result;
}
</script>
</head>
<body>
Complex computation:
<script>
document.write(brokenFunction(2, 3));
</script>
</body>
</html>
Easy enough, no? With the great alert() function we can quickly pinpoint the bug in our brokenFunction() is between alert("2") and alert("3").
Can we do better?
alert()-style debugging gets old very fast. Clicking that "OK" button is a pain. Fortunately, there is a way to get more useful feedback from our PyQt application.
The job of the QWebView class is to show the content of a QWebPage instance. By default QWebView creates its own instance of QWebPage, but it is possible to replace this instance with our own QWebPage. The QWebPage class has a few virtual methods. Among them, the javaScriptConsoleMessage() method is the one we are looking for: it is called every time console.log() is called from JavaScript.
Here is an implementation of WebPage which uses Python logging module to get JavaScript console messages out:
import logging
from PyQt4.QtWebKit import *
class WebPage(QWebPage):
"""
Makes it possible to use a Python logger to print javascript console messages
"""
def __init__(self, logger=None, parent=None):
super(WebPage, self).__init__(parent)
if not logger:
logger = logging
self.logger = logger
def javaScriptConsoleMessage(self, msg, lineNumber, sourceID):
self.logger.warning("JsConsole(%s:%d): %s" % (sourceID, lineNumber, msg))
And here is "loader-log.py", a loader which uses this class:
import os
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
from webpage import WebPage
class Window(QWidget):
def __init__(self):
super(Window, self).__init__()
self.view = QWebView(self)
self.view.setPage(WebPage())
layout = QVBoxLayout(self)
layout.setMargin(0)
layout.addWidget(self.view)
def main():
app = QApplication(sys.argv)
window = Window()
html = open(sys.argv[1]).read()
window.show()
window.view.setHtml(html)
app.exec_()
if __name__ == "__main__":
main()
If we load "broken.html" with "loader-log.py" we get the following on stderr:
$ python loader-log.py broken.html
WARNING:root:JsConsole(undefined:0): ReferenceError: Can't find variable: resul
That should make it easier to find and fix our bug, even if we don't get very useful file names or line numbers.
javaScriptConsoleMessage() receives all console messages. This means our logger will also print out calls to console.log(). Here is "console-log.html":
<html>
<head>
<script>
function chattyFunction(arg1, arg2) {
var result;
result = arg1 * 2;
console.log("result" + result);
result += arg2;
console.log("result" + result);
result /= 4;
console.log("result" + result);
return result;
}
</script>
</head>
<body>
Complex computation:
<script>
document.write(chattyFunction(2, 3));
</script>
</body>
</html>
When loaded with "loader-log.py", we get this output:
$ python loader-log.py console-log.html
WARNING:root:JsConsole(about:blank:5): result: 4
WARNING:root:JsConsole(about:blank:5): result: 7
WARNING:root:JsConsole(about:blank:5): result: 1.75
Not good enough?
Getting the output of console.log() is nice, but modern browsers have much more efficient tools: if you open "broken.html" with Rekonq and look at the output in the Web Inspector Console, you can not only see console output, but you can also easily inspect your HTML tree and many other things.
Like us, Rekonq uses QtWebKit, so is there a way to get a similar tool?
It is actually possible. Rekonq uses a class named QWebInspector. All that is necessary to get a nice inspector tool for our application is to:
- Get the QWebView page
- set the QWebSettings.DeveloperExtrasEnabled attribute on this page
- Instantiate a QWebInspector
- Pass the view page to the inspector
Here is "loader-webinspector.py", a new HTML loader which can show a web inspector when one presses F12:
import os
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
from webpage import WebPage
class Window(QWidget):
def __init__(self):
super(Window, self).__init__()
self.view = QWebView(self)
self.setupInspector()
self.splitter = QSplitter(self)
self.splitter.setOrientation(Qt.Vertical)
layout = QVBoxLayout(self)
layout.setMargin(0)
layout.addWidget(self.splitter)
self.splitter.addWidget(self.view)
self.splitter.addWidget(self.webInspector)
def setupInspector(self):
page = self.view.page()
page.settings().setAttribute(QWebSettings.DeveloperExtrasEnabled, True)
self.webInspector = QWebInspector(self)
self.webInspector.setPage(page)
shortcut = QShortcut(self)
shortcut.setKey(Qt.Key_F12)
shortcut.activated.connect(self.toggleInspector)
self.webInspector.setVisible(False)
def toggleInspector(self):
self.webInspector.setVisible(not self.webInspector.isVisible())
def main():
app = QApplication(sys.argv)
window = Window()
html = open(sys.argv[1]).read()
window.show()
window.view.setHtml(html)
app.exec_()
if __name__ == "__main__":
main()
The four steps I described are done in the "setupInspector()" method.
And here is "console-webinspector.html":
<html>
<head>
<script>
function chattyFunction(arg1, arg2) {
var result;
result = arg1 * 2;
console.log("result: %d", result);
result += arg2;
console.warn("result: %d", result);
result /= 4;
console.error("result: %d", result);
return result;
}
</script>
</head>
<body>
Complex computation:
<script>
document.write(chattyFunction(2, 3));
</script>
</body>
</html>
It is similar to "console-log.html" but takes advantage of two new features which do not work with the previous approach:
- printf-style formatting: that is, printing the value of
resultwith"result: %d", result, not"result: " + result - log categorization: you can use console.warn() and console.error() to get different type of output. These methods worked with the previous approach, but the categorization was lost.
Loading "console-webinspector.html" with "loader-webinspector.py" and pressing F12 we get this:
Closing words
These two approaches should help you track down the nastiest bugs in your embedded JavaScript code. The Web Inspector approach is probably the most powerful one, but the Python logging approach can also be useful when tracking down bugs where it is more practical to have one single log output for both the PyQt and the JavaScript sides.