Notable changes in weinre 1.6, which was released last week. More weinre links here.
Element Highlighter Color Changes
The "element highlighter" is the coloring you get on your web page when you hover over DOM elements in weinre's Elements panel. Previously, the colors were very muddled.
Below are the new colors, with the orange-ish margin, turquoise-ish padding, and purple-ish body. Not shown is the border (this element has none), which is a bright yellow.
There are still some issues with this highlighter, which was about the 6th different one I had tried. As a result of all those attempts, the element highlighter is now fairly pluggable, and it should be straight-forward for you to create a better one. I dare ya.
JavaScript Callback Error Diagnostics
I often hear people talk about debugging their JavaScript with weinre, but weinre really just provides a REPL and console logging. New in 1.6 is an attempt to provide some additional JavaScript diagnostics.
For a set of built-in functions in JavaScript that have callbacks as parameters, weinre overrides those functions to run an instrumented version of the callback instead. The instrumented version just runs the specified callback within a try/catch statement and reports if an exception occurred. The functions that weinre overrides are:
- window.setTimeout()
- window.setInterval()
- window.addEventListener()
- Node.prototype.addEventListener()
- XMLHttpRequest.prototype.addEventListener()
The Node.prototype.addEventListener() override should handle document and all DOM elements in your document. The XMLHttpRequest.prototype.addEventListener() will handle your XHR's. Unfortunately, I'm not quite sure how to override the on-family of event properties, because browser host objects suck.
As an example of what you'll see in the Console window when an exception occurs, here's some JavaScript code which will generate a runtime error when the specified button is clicked:
Below is what you see in the console when the button is clicked.
Description of the five error messages in the console:
- This is the toString() of the exception that was caught when the callback was invoked.
- The callsite is an informational description of the call which registered the callback. In this case, it tells us the callback was registed to an <input> element's click handler, and that the callback registered was a function named buttonClicked().
- If the caught exception has a stack property, the stack will be dumped following this line. Otherwise, you won't see this line or the stack.
- This is the stack at the time the runtime exception occurred, if available. Note that the last two lines (at <error: TypeError: ...) seem to be bugs of some kind in the browser (couldn't be in my code!).
- This is actually a line from the new onerror handler that weinre registers, unrelated to the new callback exception logging described here.
Not all browser's JavaScript engines support the error.stack property (eg, WebKit's JavaScriptCore), so this is what you'll see if you're running on one of those lame engines:
Also note the third line is, again, from the new onerror handler, which seems to like to not contain useful information. Why not? See here, here, here, and here.
The New Resources Panel
The Resources panel is brand new for version 1.6. It provides diagnostics for all the XHRs that you code issues. Below is an example of a web page that has issued five XHR's.
Clicking on one of those rows will display additional information in the right hand side of the window, as shown below.
There are two tabs here, one to show "header" information, the other to show the "content". The content for the XHR is shown below.
To dismiss the detail view and get back to the table view, click the circled X button to the left of the Headers/Content tabs.
