Embed Size (px)
DESCRIPTION
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.
Citation preview
TheInternal Architecture of Chrome Developer Tools
Miroslav Bajtoš
About Me
Miroslav Bajtoš @bajtos github.com/bajtos
Writing code since ~1992Serious about Test Driven Development and Clean CodeCo-organizing Code Retreat eventsBlogging at http://devblog.cz
Maintaining Node Inspector and ReggieDeveloping LoopBack mobile backend and client SDKs
Chrome Developer Tools
Introduction to Developer Tools
DEMO!
The Internal Architecture
Inside the browser...
Blink(WebKit)
V8(JS VM)
Inspector
localhost:9222
C++glue
Inspect the Inspector
DEMO!
AgentsInspectorPageNetworkRuntimeDebuggerConsole
https://developers.google.com/chrome-developer-tools/docs/protocol/tot/index
DomCSSProfilerHeapProfilerTimelineWorker+ more (23 in total)
Agents
DEMO!
Debugger Protocol
Node Inspector
DEMO!
Introduction to Node Inspector
Architecture of Developer Tools (again)
Inside the browser...
Blink(WebKit)
V8(JS VM)
Inspector
localhost:9222
C++glue
Node Inspector’s Architecture
Debugged application
Node.jscore V8
C++ glue
Node Inspector
web server
backendbridge
JS glue
DEMO!
Protocols
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}
Evaluate Expression - V8 Request
V8 request { "seq": 23, "type": "request", "command": "evaluate", "arguments": { "expression": "throw new Error(\"foo\")", "global": true }}
Evaluate Expression - V8 Response
V8 response { "seq": 23, "request_seq": 23, "type": "response", "command": "evaluate", "success": false, "message": "Error: foo", "running": true}
Evaluate Expression - Backend
backend { "id": 33, "result": { "result": { "type": "object", "objectId": "ERROR", "className": "Error", "description": "Error: foo" }, "wasThrown": true }}
Evaluate Expression - Blink Backend
{ "id": 33, "result": { "result": { "type": "object", "objectId":
"{\"injectedScriptId\":1,\"id\":1}", "className": "Error", "description": "Error: foo" }, "wasThrown": true }}
BONUS: DevTools Extensions
Slides
Demos:github.com/bajtos/talk-devtools-internals
Links
