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.
The Error.stack offers a trace of which functions were called, in what order, from which line and file, and with what arguments.
Test it yourself by opening the following example in IE10 on a Windows 8 (virtual) machine:
Want to learn more?
- MSDN library: Windows Internet Explorer 10 Consumer Preview Guide for Developers
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
- HTML5 rocks: Introducing websockets: Bringing sockets to the web
- W3C specification: The WebSocket API
- ietf: The WebSocket protocol
- Mozilla Developer Network: WebSockets
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?