Debugging HTML5 web apps with Error.stack, websocket frame inspection and breakpoints for dynamic Web Worker threads

With HTML5 on the rise, there also grows the need for good debugging tools.

Three of the newer additions to the web developer’s debugging toolset are error.stack, websocket frame inspection and breakpoints for dynamic web worker threads.

Error.stack

Although it is not an ECMAScript 5 standard, beginning with Internet Explorer 10 in Windows 8 Consumer Preview now all major browsers offer support for Error.stack.

The Error.stack offers a trace of which functions were called, in what order, from which line and file, and with what arguments.

Error.stack browser compatibility (Source: Mozilla Developer Network / MDN)

Test it yourself by opening the following example in IE10 on a Windows 8 (virtual) machine:

Explore Error.stack

Want to learn more?

• IEBlog: Diagnosing JavaScript Errors Faster with Error.stack
• MSDN library: Windows Internet Explorer 10 Consumer Preview Guide for Developers
• Mozilla Developer Network: JavaScript Reference > Global > Objects > Error > stack

Websocket frame inspection

Thanks to a WebKit patch from RIM from 04/27/2012, you can now look into websocket pakets and see the data sent and received in Google Chrome. Before the patch, you could only see that a web socket connection had been established.

How to test this yourself:

• Download the latest Chrome Canary build and run it
• Open a web application that makes use of web sockets, e.g. http://html5demos.com/web-socket
• Open the developer console  (Control-Shift-J or ⌥⌘J), go to the tab “Network” filter by “WebSockets” select the web socket connection you want to debug and then click on the tab “Websocket Frames“
• Now if data is sent or received, you will see little arrows indicating the direction (ingoing/outgoing traffic), Time, OpCode, Mask, Length and Data

Breakpoints for dynamic Web Worker threads

With Web Workers, you can run processor-intensive code in background threads to keep the UI responsive. Debugging a multithreaded app can get difficult because of the asynchronous multiple threads.

The F12 Developer Tools in Windows Internet Explorer 10 now can help you debug these threads, letting you view individual worker scripts, set breakpoints, and watch variables.

Want to learn more?

• F12 Developer Tools: Debugging Web Workers in F12 Developer Tools
• HTML5 rocks: The basics of web workers
• whatwg specification: Web Workers