The Internal Architecture of Chrome Developer Tools

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

RemoteDebug

http://remotedebug.org/

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