The
Internal Architecture of
Chrome Developer Tools
Miroslav Bajtoš
About Me
Miroslav Bajtoš

@bajtos

github.com/bajtos

Writing code since ~1992
Serious about Test Driven Development and C...
Chrome Developer Tools
Introduction to Developer Tools

DEMO!
The Internal Architecture
Inside the browser...
Blink
(WebKit)

V8
(JS VM)
C++
glue
Inspector
localhost:9222
Inspect the Inspector

DEMO!
Agents

Agents

Inspector
Page
Network
Runtime
Debugger
Console

Dom
CSS
Profiler
HeapProfiler
Timeline
Worker
+ more (23 ...
Debugger Protocol

DEMO!
RemoteDebug

http://remotedebug.org/
Node Inspector
Introduction to Node Inspector

DEMO!
Architecture of Developer Tools (again)
Inside the browser...
Blink
(WebKit)

V8
(JS VM)
C++
glue
Inspector
localhost:9222
Node Inspector’s Architecture
Debugged application
Node.js
core

C++
glue

V8

Node Inspector
web
server

JS
glue

backend...
Protocols

DEMO!
Evaluate Expression - Frontend
frontend {
"method": "Runtime.evaluate",
"params": {
"expression": "throw new Error("foo")"...
Evaluate Expression - V8 Request
V8 request {
"seq": 23,
"type": "request",
"command": "evaluate",
"arguments": {
"express...
Evaluate Expression - V8 Response
V8 response {
"seq": 23,
"request_seq": 23,
"type": "response",
"command": "evaluate",
"...
Evaluate Expression - Backend
backend {
"id": 33,
"result": {
"result": {
"type": "object",
"objectId": "ERROR",
"classNam...
Evaluate Expression - Blink Backend
{
"id": 33,
"result": {
"result": {
"type": "object",
"objectId":
"{"injectedScriptId"...
BONUS: DevTools Extensions
Links
Slides
Demos:
github.com/bajtos/talk-devtools-internals
Upcoming SlideShare
Loading in …5
×

The Internal Architecture of Chrome Developer Tools

1,843 views

Published on

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.

Published in: Technology, Design

The Internal Architecture of Chrome Developer Tools

  1. 1. The Internal Architecture of Chrome Developer Tools Miroslav Bajtoš
  2. 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. 3. Chrome Developer Tools
  4. 4. Introduction to Developer Tools DEMO!
  5. 5. The Internal Architecture Inside the browser... Blink (WebKit) V8 (JS VM) C++ glue Inspector localhost:9222
  6. 6. Inspect the Inspector DEMO!
  7. 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. 8. Debugger Protocol DEMO!
  9. 9. RemoteDebug http://remotedebug.org/
  10. 10. Node Inspector
  11. 11. Introduction to Node Inspector DEMO!
  12. 12. Architecture of Developer Tools (again) Inside the browser... Blink (WebKit) V8 (JS VM) C++ glue Inspector localhost:9222
  13. 13. Node Inspector’s Architecture Debugged application Node.js core C++ glue V8 Node Inspector web server JS glue backend bridge
  14. 14. Protocols DEMO!
  15. 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. 16. Evaluate Expression - V8 Request V8 request { "seq": 23, "type": "request", "command": "evaluate", "arguments": { "expression": "throw new Error("foo")", "global": true } }
  17. 17. Evaluate Expression - V8 Response V8 response { "seq": 23, "request_seq": 23, "type": "response", "command": "evaluate", "success": false, "message": "Error: foo", "running": true }
  18. 18. Evaluate Expression - Backend backend { "id": 33, "result": { "result": { "type": "object", "objectId": "ERROR", "className": "Error", "description": "Error: foo" }, "wasThrown": true } }
  19. 19. Evaluate Expression - Blink Backend { "id": 33, "result": { "result": { "type": "object", "objectId": "{"injectedScriptId":1,"id":1}", "className": "Error", "description": "Error: foo" }, "wasThrown": true } }
  20. 20. BONUS: DevTools Extensions
  21. 21. Links Slides Demos: github.com/bajtos/talk-devtools-internals

×