All about Google Chrome & Google Chrome OS

10 May 12 Inspecting WebSocket Traffic with Chrome Developer Tools – SYS

What makes working with WebSockets challenging at times is that the messages are extremely tiny and incredibly fast – making it hard to see them.

With the updated Chrome Dev Tools,  you can now see the WebSocket traffic coming and going to and from your browser without using tools like Wireshark. Here are the simple steps to make the invisible visible:

1. At the time of writing this post (May 8, 2012), you need to get Chrome Canary or a fresh Chromium build.
2. Navigate to the Echo demo, hosted on the site.
3. Turn on the Chrome Developer Tools.
4. Click Network, and to filter the traffic shown by the Dev Tools, click WebSockets (all the way on the bottom).
5. In the Echo demo, click Connect.

6. Click on the left, representing the WebSocket connection.
7. Make sure you’re on the Headers tab. This tab shows the WebSocket handshake.

Request URL:ws://
Request Method:GET
Status Code: 101 Web Socket Protocol Handshake

Request Headers

Cookie:__utma=9925811.1340073179.1336513627.1336513627.1336513627.1; __utmb=9925811.4.10.1336513627; __utmc=9925811;|utmccn=(referral)|utmcmd=referral|utmcct=/
Query String Parameters view URL encoded

Response Headers

Date:Tue, 08 May 2012 22:14:46 GMT
Server:Kaazing Gateway
(Challenge Response):00:00:00:00:00:00:00:00:00:00:00:00:00:00:00:00

8. Click the Send button in the Echo demo.

THIS STEP IS IMPORTANT: To see the WebSocket frames in the Chrome Developer Tools, under Name/Path, click the entry, representing your WebSocket connection. This refreshes the main panel on the right and makes the WebSocket Frames tab show up with the actual WebSocket message content.
Note: Every time you send or receive new messages, you have to refresh the main panel by clicking on the entry on the left.

The little arrow indicates the direction of the message, after the timestamp, op code, and mask you see the length and contents of the WebSocket message.

Article source:

Tags: , , , , ,

10 Mar 12 WebGL Hangout For Chrome Developers

This appears to be becoming a regular thing – Google uploading developer hangouts (from Google+) to YouTube for all to watch and learn from. We recently looked at one about Chrome Developer Tools and one on developing for Chrome For Android.

Today’s is all about WebGL. It’s about an hour long, and it’s full of Googlers who have plenty to say on the subject, including some discussion about some map-related things the company has been discussing at Strata and a SXSW.

Google has a workshop area of its WebGL experiments site here, which you may also find of use.

Article source:

Tags: ,