the internal architecture of chrome developer tools
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.TRANSCRIPT
![Page 1: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/1.jpg)
TheInternal Architecture of Chrome Developer Tools
Miroslav Bajtoš
![Page 2: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/2.jpg)
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
![Page 3: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/3.jpg)
Chrome Developer Tools
![Page 4: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/4.jpg)
Introduction to Developer Tools
DEMO!
![Page 5: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/5.jpg)
The Internal Architecture
Inside the browser...
Blink(WebKit)
V8(JS VM)
Inspector
localhost:9222
C++glue
![Page 6: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/6.jpg)
Inspect the Inspector
DEMO!
![Page 7: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/7.jpg)
AgentsInspectorPageNetworkRuntimeDebuggerConsole
https://developers.google.com/chrome-developer-tools/docs/protocol/tot/index
DomCSSProfilerHeapProfilerTimelineWorker+ more (23 in total)
Agents
![Page 8: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/8.jpg)
DEMO!
Debugger Protocol
![Page 10: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/10.jpg)
Node Inspector
![Page 11: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/11.jpg)
DEMO!
Introduction to Node Inspector
![Page 12: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/12.jpg)
Architecture of Developer Tools (again)
Inside the browser...
Blink(WebKit)
V8(JS VM)
Inspector
localhost:9222
C++glue
![Page 13: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/13.jpg)
Node Inspector’s Architecture
Debugged application
Node.jscore V8
C++ glue
Node Inspector
web server
backendbridge
JS glue
![Page 14: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/14.jpg)
DEMO!
Protocols
![Page 15: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/15.jpg)
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}
![Page 16: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/16.jpg)
Evaluate Expression - V8 Request
V8 request { "seq": 23, "type": "request", "command": "evaluate", "arguments": { "expression": "throw new Error(\"foo\")", "global": true }}
![Page 17: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/17.jpg)
Evaluate Expression - V8 Response
V8 response { "seq": 23, "request_seq": 23, "type": "response", "command": "evaluate", "success": false, "message": "Error: foo", "running": true}
![Page 18: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/18.jpg)
Evaluate Expression - Backend
backend { "id": 33, "result": { "result": { "type": "object", "objectId": "ERROR", "className": "Error", "description": "Error: foo" }, "wasThrown": true }}
![Page 19: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/19.jpg)
Evaluate Expression - Blink Backend
{ "id": 33, "result": { "result": { "type": "object", "objectId":
"{\"injectedScriptId\":1,\"id\":1}", "className": "Error", "description": "Error: foo" }, "wasThrown": true }}
![Page 20: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/20.jpg)
BONUS: DevTools Extensions
![Page 21: The Internal Architecture of Chrome Developer Tools](https://reader034.vdocuments.us/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/21.jpg)
Slides
Demos:github.com/bajtos/talk-devtools-internals
Links