The talk explains that Chrome Developer Tools are actually just an (un)usual web page, every Blink browser has an embedded WebSocket server and that allows Node Inspector to reuse Developer Tools GUI for building Node.js debugger.

1. The
Internal Architecture of
Chrome Developer Tools
Miroslav Bajtoš

2. About Me
Miroslav Bajtoš
@bajtos
github.com/bajtos
Writing code since ~1992
Serious about Test Driven Development and Clean Code
Co-organizing Code Retreat events
Blogging at http://devblog.cz
Maintaining Node Inspector and Reggie
Developing LoopBack mobile backend and client SDKs

3. Chrome Developer Tools

4. Introduction to Developer Tools
DEMO!

5. The Internal Architecture
Inside the browser...
Blink
(WebKit)
V8
(JS VM)
C++
glue
Inspector
localhost:9222

6. Inspect the Inspector
DEMO!

7. Agents
Agents
Inspector
Page
Network
Runtime
Debugger
Console
Dom
CSS
Profiler
HeapProfiler
Timeline
Worker
+ more (23 in total)
https://developers.google.com/chrome-developer-tools/docs/protocol/tot/index

8. Debugger Protocol
DEMO!

9. RemoteDebug
http://remotedebug.org/

10. Node Inspector

11. Introduction to Node Inspector
DEMO!

12. Architecture of Developer Tools (again)
Inside the browser...
Blink
(WebKit)
V8
(JS VM)
C++
glue
Inspector
localhost:9222

13. Node Inspector’s Architecture
Debugged application
Node.js
core
C++
glue
V8
Node Inspector
web
server
JS
glue
backend
bridge

14. Protocols
DEMO!

15. Evaluate Expression - Frontend
frontend {
"method": "Runtime.evaluate",
"params": {
"expression": "throw new Error("foo")",
"objectGroup": "console",
"includeCommandLineAPI": true,
"doNotPauseOnExceptionsAndMuteConsole":
false,
"returnByValue": false,
"generatePreview": true
},
"id": 33
}

16. Evaluate Expression - V8 Request
V8 request {
"seq": 23,
"type": "request",
"command": "evaluate",
"arguments": {
"expression": "throw new Error("foo")",
"global": true
}
}

17. Evaluate Expression - V8 Response
V8 response {
"seq": 23,
"request_seq": 23,
"type": "response",
"command": "evaluate",
"success": false,
"message": "Error: foo",
"running": true
}

18. Evaluate Expression - Backend
backend {
"id": 33,
"result": {
"result": {
"type": "object",
"objectId": "ERROR",
"className": "Error",
"description": "Error: foo"
},
"wasThrown": true
}
}

19. Evaluate Expression - Blink Backend
{
"id": 33,
"result": {
"result": {
"type": "object",
"objectId":
"{"injectedScriptId":1,"id":1}",
"className": "Error",
"description": "Error: foo"
},
"wasThrown": true
}
}

20. BONUS: DevTools Extensions

21. Links
Slides
Demos:
github.com/bajtos/talk-devtools-internals