The Internal Architecture of Chrome Developer Tools
-
Upload
miroslav-bajtos -
Category
Technology
-
view
903 -
download
1
description
Transcript of The Internal Architecture of Chrome Developer Tools
![Page 1: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/3.jpg)
Chrome Developer Tools
![Page 4: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/4.jpg)
Introduction to Developer Tools
DEMO!
![Page 5: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/6.jpg)
Inspect the Inspector
DEMO!
![Page 7: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/8.jpg)
DEMO!
Debugger Protocol
![Page 10: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/10.jpg)
Node Inspector
![Page 11: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/11.jpg)
DEMO!
Introduction to Node Inspector
![Page 12: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/14.jpg)
DEMO!
Protocols
![Page 15: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/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.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/20.jpg)
BONUS: DevTools Extensions
![Page 21: The Internal Architecture of Chrome Developer Tools](https://reader034.fdocuments.net/reader034/viewer/2022042607/554f5eaab4c905bb178b456d/html5/thumbnails/21.jpg)
Slides
Demos:github.com/bajtos/talk-devtools-internals
Links