Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Tutorial 2

  • Loading branch information...
commit f8f76774a020b8b070bc1f97fd1f67b2f0220337 1 parent 1217281
Aurélien Gâteau authored
22 tut2/broken-alert.html
... ... @@ -0,0 +1,22 @@
  1 +<html>
  2 +<head>
  3 +<script>
  4 +function brokenFunction(arg1, arg2) {
  5 + var result;
  6 + result = arg1 * 2;
  7 + alert("1");
  8 + result += arg2;
  9 + alert("2");
  10 + resul /= 4;
  11 + alert("3");
  12 + return result;
  13 +}
  14 +</script>
  15 +</head>
  16 +<body>
  17 +Complex computation:
  18 +<script>
  19 +document.write(brokenFunction(2, 3));
  20 +</script>
  21 +</body>
  22 +</html>
19 tut2/broken.html
... ... @@ -0,0 +1,19 @@
  1 +<html>
  2 +<head>
  3 +<script>
  4 +function brokenFunction(arg1, arg2) {
  5 + var result;
  6 + result = arg1 * 2;
  7 + result += arg2;
  8 + resul /= 4;
  9 + return result;
  10 +}
  11 +</script>
  12 +</head>
  13 +<body>
  14 +Complex computation:
  15 +<script>
  16 +document.write(brokenFunction(2, 3));
  17 +</script>
  18 +</body>
  19 +</html>
22 tut2/console-log.html
... ... @@ -0,0 +1,22 @@
  1 +<html>
  2 +<head>
  3 +<script>
  4 +function chattyFunction(arg1, arg2) {
  5 + var result;
  6 + result = arg1 * 2;
  7 + console.log("result" + result);
  8 + result += arg2;
  9 + console.log("result" + result);
  10 + result /= 4;
  11 + console.log("result" + result);
  12 + return result;
  13 +}
  14 +</script>
  15 +</head>
  16 +<body>
  17 +Complex computation:
  18 +<script>
  19 +document.write(chattyFunction(2, 3));
  20 +</script>
  21 +</body>
  22 +</html>
22 tut2/console-webinspector.html
... ... @@ -0,0 +1,22 @@
  1 +<html>
  2 +<head>
  3 +<script>
  4 +function chattyFunction(arg1, arg2) {
  5 + var result;
  6 + result = arg1 * 2;
  7 + console.log("result: %d", result);
  8 + result += arg2;
  9 + console.warn("result: %d", result);
  10 + result /= 4;
  11 + console.error("result: %d", result);
  12 + return result;
  13 +}
  14 +</script>
  15 +</head>
  16 +<body>
  17 +Complex computation:
  18 +<script>
  19 +document.write(chattyFunction(2, 3));
  20 +</script>
  21 +</body>
  22 +</html>
29 tut2/loader-log.py
... ... @@ -0,0 +1,29 @@
  1 +import os
  2 +import sys
  3 +
  4 +from PyQt4.QtCore import *
  5 +from PyQt4.QtGui import *
  6 +from PyQt4.QtWebKit import *
  7 +
  8 +from webpage import WebPage
  9 +
  10 +class Window(QWidget):
  11 + def __init__(self):
  12 + super(Window, self).__init__()
  13 + self.view = QWebView(self)
  14 + self.view.setPage(WebPage())
  15 +
  16 + layout = QVBoxLayout(self)
  17 + layout.setMargin(0)
  18 + layout.addWidget(self.view)
  19 +
  20 +def main():
  21 + app = QApplication(sys.argv)
  22 + window = Window()
  23 + html = open(sys.argv[1]).read()
  24 + window.show()
  25 + window.view.setHtml(html)
  26 + app.exec_()
  27 +
  28 +if __name__ == "__main__":
  29 + main()
BIN  tut2/loader-webinspector.png
50 tut2/loader-webinspector.py
... ... @@ -0,0 +1,50 @@
  1 +import os
  2 +import sys
  3 +
  4 +from PyQt4.QtCore import *
  5 +from PyQt4.QtGui import *
  6 +from PyQt4.QtWebKit import *
  7 +
  8 +from webpage import WebPage
  9 +
  10 +class Window(QWidget):
  11 + def __init__(self):
  12 + super(Window, self).__init__()
  13 + self.view = QWebView(self)
  14 +
  15 + self.setupInspector()
  16 +
  17 + self.splitter = QSplitter(self)
  18 + self.splitter.setOrientation(Qt.Vertical)
  19 +
  20 + layout = QVBoxLayout(self)
  21 + layout.setMargin(0)
  22 + layout.addWidget(self.splitter)
  23 +
  24 + self.splitter.addWidget(self.view)
  25 + self.splitter.addWidget(self.webInspector)
  26 +
  27 + def setupInspector(self):
  28 + page = self.view.page()
  29 + page.settings().setAttribute(QWebSettings.DeveloperExtrasEnabled, True)
  30 + self.webInspector = QWebInspector(self)
  31 + self.webInspector.setPage(page)
  32 +
  33 + shortcut = QShortcut(self)
  34 + shortcut.setKey(Qt.Key_F12)
  35 + shortcut.activated.connect(self.toggleInspector)
  36 + self.webInspector.setVisible(False)
  37 +
  38 + def toggleInspector(self):
  39 + self.webInspector.setVisible(not self.webInspector.isVisible())
  40 +
  41 +def main():
  42 + app = QApplication(sys.argv)
  43 + window = Window()
  44 + html = open(sys.argv[1]).read()
  45 + window.show()
  46 + window.view.setHtml(html)
  47 + app.exec_()
  48 +
  49 +if __name__ == "__main__":
  50 + main()
25 tut2/loader.py
... ... @@ -0,0 +1,25 @@
  1 +import sys
  2 +
  3 +from PyQt4.QtCore import *
  4 +from PyQt4.QtGui import *
  5 +from PyQt4.QtWebKit import *
  6 +
  7 +class Window(QWidget):
  8 + def __init__(self):
  9 + super(Window, self).__init__()
  10 + self.view = QWebView(self)
  11 +
  12 + layout = QVBoxLayout(self)
  13 + layout.setMargin(0)
  14 + layout.addWidget(self.view)
  15 +
  16 +def main():
  17 + app = QApplication(sys.argv)
  18 + window = Window()
  19 + html = open(sys.argv[1]).read()
  20 + window.show()
  21 + window.view.setHtml(html)
  22 + app.exec_()
  23 +
  24 +if __name__ == "__main__":
  25 + main()
BIN  tut2/rekonq-webinspector.png
97 tut2/tut2.markdown
Source Rendered
... ... @@ -0,0 +1,97 @@
  1 +# PyQt+WebKit experiments part 2: debugging
  2 +
  3 +----
  4 +
  5 +(This is part 2 of the [PyQt+WebKit experiments series](/article-series/pyqtwebkit-experiments/))
  6 +
  7 +In [Part 1](/2012/01/20/swimming-against-the-stream-or-preparing-for-next-stream-change-pyqtwebkit-experiments/) I described how to embed WebKit in a PyQt application and how to expose PyQt objects in WebKit and manipulate them with JavaScript.
  8 +
  9 +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.
  10 +
  11 +Let's have a look at an example.
  12 +
  13 +First here is loader.py, a simple Python script which loads a block of HTML:
  14 +
  15 + ${loader.py}
  16 +
  17 +And here is "broken.html", our broken HTML code:
  18 +
  19 + ${broken.html}
  20 +
  21 +Notice the missing 't' in "resul /= 4"?
  22 +
  23 +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?
  24 +
  25 + ${broken-alert.html}
  26 +
  27 +Easy enough, no? With the great alert() function we can quickly pinpoint the bug in our brokenFunction() is between alert("2") and alert("3").
  28 +
  29 +## Can we do better?
  30 +
  31 +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.
  32 +
  33 +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.
  34 +
  35 +Here is an implementation of WebPage which uses Python logging module to get JavaScript console messages out:
  36 +
  37 + ${webpage.py}
  38 +
  39 +And here is "loader-log.py", a loader which uses this class:
  40 +
  41 + ${loader-log.py}
  42 +
  43 +If we load "broken.html" with "loader-log.py" we get the following on stderr:
  44 +
  45 + $ python loader-log.py broken.html
  46 + WARNING:root:JsConsole(undefined:0): ReferenceError: Can't find variable: resul
  47 +
  48 +That should make it easier to find and fix our bug, even if we don't get very useful file names or line numbers.
  49 +
  50 +javaScriptConsoleMessage() receives all console messages. This means our logger will also print out calls to console.log(). Here is "console-log.html":
  51 +
  52 + ${console-log.html}
  53 +
  54 +When loaded with "loader-log.py", we get this output:
  55 +
  56 + $ python loader-log.py console-log.html
  57 + WARNING:root:JsConsole(about:blank:5): result: 4
  58 + WARNING:root:JsConsole(about:blank:5): result: 7
  59 + WARNING:root:JsConsole(about:blank:5): result: 1.75
  60 +
  61 +## Not good enough?
  62 +
  63 +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.
  64 +
  65 +![Rekonq Web Inspector](rekonq-webinspector.png)
  66 +
  67 +Like us, Rekonq uses QtWebKit, so is there a way to get a similar tool?
  68 +
  69 +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:
  70 +
  71 +1. Get the QWebView page
  72 +1. set the QWebSettings.DeveloperExtrasEnabled attribute on this page
  73 +1. Instantiate a QWebInspector
  74 +1. Pass the view page to the inspector
  75 +
  76 +Here is "loader-webinspector.py", a new HTML loader which can show a web inspector when one presses F12:
  77 +
  78 + ${loader-webinspector.py}
  79 +
  80 +The four steps I described are done in the "setupInspector()" method.
  81 +
  82 +And here is "console-webinspector.html":
  83 +
  84 + ${console-webinspector.html}
  85 +
  86 +It is similar to "console-log.html" but takes advantage of two new features which do not work with the previous approach:
  87 +
  88 +- printf-style formatting: that is, printing the value of `result` with `"result: %d", result`, not `"result: " + result`
  89 +- 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.
  90 +
  91 +Loading "console-webinspector.html" with "loader-webinspector.py" and pressing F12 we get this:
  92 +
  93 +![Loader with web inspector](loader-webinspector.png)
  94 +
  95 +## Closing words
  96 +
  97 +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.
17 tut2/webpage.py
... ... @@ -0,0 +1,17 @@
  1 +import logging
  2 +
  3 +from PyQt4.QtWebKit import *
  4 +
  5 +class WebPage(QWebPage):
  6 + """
  7 + Makes it possible to use a Python logger to print javascript console messages
  8 + """
  9 + def __init__(self, logger=None, parent=None):
  10 + super(WebPage, self).__init__(parent)
  11 + if not logger:
  12 + logger = logging
  13 + self.logger = logger
  14 +
  15 + def javaScriptConsoleMessage(self, msg, lineNumber, sourceID):
  16 + self.logger.warning("JsConsole(%s:%d): %s" % (sourceID, lineNumber, msg))
  17 +

0 comments on commit f8f7677

Please sign in to comment.
Something went wrong with that request. Please try again.