Your SlideShare is downloading. ×
The Internal Architecture of Chrome Developer Tools
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

The Internal Architecture of Chrome Developer Tools

751
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 …

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

2 Comments
1 Like
Statistics
Notes
No Downloads
Views
Total Views
751
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
2
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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