Web Inspector: AngularJS + SocketIO + Web Inspector = Locked Webpage

• Component: Web Inspector
• Status: RESOLVED FIXED

[Chris Moyer]

I have an AngularJS  application that creates several Socket.IO Connections back to a server, and as soon as I open the web inspector, the page freezes up, including the console, and becomes unresponsive. At this point I can't even close the tab, and have to force-close Webkit (the same happens with Safari, but I can close the tab there).

[Radar WebKit Bug Importer]

<rdar://problem/15766290>

[Joseph Pecoraro]

Chris, do you have a sample page or URL we can inspect to reproduce the issue?

[Chris Moyer]

I've gathered a few more details on the issue, and it's not quite what I thought before. I have disabled web sockets, and make Socket.IO use one of the other transports. I also noticed this ONLY happens over SSL.

I've created a simple project to show the problem: https://github.com/kopertop/wkcrasher

You don't even need to have it connect to socket.io on the backend, so I'm not sure if that is exactly the problem, but I know when I try to inspect this over SSL, the app (and inspector) completely hang up.

[Timothy Hatcher]

Thanks for creating a test case for us!

[Chris Moyer]

Digging a little further, if I comment out line 27 of js/services.js, the app works just fine, no crashes with the console opening up.

So it looks like this only happens when I explicitly set the "transports" of socket.io:

         sockets[namespace] = io.connect(namespace, {
            transports: transports, // This line causes the problem
            'connect timeout': 500,
            'reconnect': true,
            'reconnection delay': 500,
            'reopen delay': 500,
            'max reconnection attempts': 10
         });

[Timothy Hatcher]

Can you try your site in a recently nightly?

[Chris Moyer]

This appears to have fixed the problem. Thanks!