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.
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.
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.
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.