Skip to content
Miroslav Bajtoš edited this page Aug 1, 2013 · 1 revision

Directory structure

The project follows the usual convention for node projects:

  • bin for executables
  • lib for implementation files
  • test for unit-tests
  • tools for helper scripts
  • front-end contains a snapshot of Blink's Developer Tools GUI
  • front-end-node contains Node Inspector files that are added to the GUI

Backend

The backend consist of several parts (all files are in lib).

  • Web server which handles browser requests, sends back front-end files and handles socket.io connections.

    Files: debug-server.js, session.js

  • Agents implement Developer Tools Protocol, which is used for communication between front-end and back-end. The protocol itself has a concept of agents, Node Inspector's agents are the same.

  • DebuggerClient.js, debugger.js and callback.js implement a client for V8 debugger protocol. (The protocol documentation is very incomplete.)

  • A lot of functionality is extracted into standalone classes, which makes it easier to test it in isolation.

    • convert.js implements conversions between types used by DevTools and V8 debugger.
    • BreakEventHandler handles the break event and prepares stack trace for the front-end with the help of CallFramesProvider.js
    • FrontendCommandHandler listens for front-end messages and dispatches them to Agents
    • ScriptManager keeps track of javascript files loaded in V8 runtime
    • ScriptFileStorage can load, save and list javascript source on disk

Reverse-engineering the front-end

The internal documentation for Blink Developer Tools front-end and protocol is quite often incomplete and you have to intercept the communication between DevTools and the backend in Chrome to understand how it works.

There are two tools to help:

  1. Enable this.dumpInspectorProtocolMessages in front-end/InspectorBackend.js. All messages (requests, responses, events) will be logged to DevTools console.

  2. Run the front-end against the Chrome/Chromium back-end to see what does the "real" implementation do. See "Running" in Chrome Developer Tools documentation.

Upgrading the front-end

(TBD)

Clone this wiki locally