I am sure every JavaScript developer is familiar with the “Inspect Element” feature in Chrome and Safari. It is a very useful tool for debugging web applications. On an embedded target, pulling up the web inspector is technically possible, but may not be practical with limited screen real estate or limited inputs. Luckily, WebKit.org has recently added support to make all this easier with the Remote Web Inspector.

The Remote Web Inspector allows you to open up the Inspector in your desktop browser (Chrome or Safari) and connect to your target platform. Now you can use the luxuries of a desktop environment to debug your web application on the embedded target.

If you want to try it out launch Chrome Canary with the following Option:

The inspector backend is the agent that interacts with WebKits engine. The inspector frontend and backend communicate with each other via a Json formatted debug protocol.

In the case of the local inspector the backend calls for receiving and sending message to/from the frontend are as follows:
Receive Message from Frontend:

InspectorController::dispatchMessageFromFrontend()

Send Message to Frontend:

InspectorClient:: doDispatchMessageOnFrontendPage(..)

For the Remote Web Inspector the JSON debug protocol messages are sent over a Web Socket. To enable this, a new component was added called WebInspectorServer. The WebInspectorServer is a mini webserver that is able to serve up the inspector frontend, establish a websocket connection for the debug JSON message communication and tie in to the Inspector backend.

The Web Inspector Server listens on a specified port (in the chrome example above port 9222 is used). When you initiate the connection via the remote browser by navigating to landing page (ex. http://localhost:9222), the inspector backend returns a list of webviews (note of you have a single view implementation you could bypass this and load the inspector frontend directly). When you load the Inspector Frontend, the front-end will establish a Web Socket connection. The Web Inspector server will notify the Inspector backend of the remote Frontend.

The send and receive functions for the Remote communication are as follows: