实现Chrome Devtools调试JavaScript V8引擎

摘要： 最近开发小程序JavaScript的运行时，通过在客户端嵌入JavaScript V8引擎来实现。前端同学需要调试JavaScript代码，正好Chrome浏览器的Devtools是与V8的Inspector调试协议是一脉相承的，理论上是可以使用Chrome Devtools调试JavaScript V8引擎。 [V8的文档](https://github.com/v8/v8/wiki/De

最近开发小程序JavaScript的运行时，通过在客户端嵌入JavaScript V8引擎来实现。前端同学需要调试JavaScript代码，正好Chrome浏览器的Devtools是与V8的Inspector调试协议是一脉相承的，理论上是可以使用Chrome Devtools调试JavaScript V8引擎。

V8的文档里提到可以把Chrome Devtools作为调试器的前端来调试JavaScript。d8工程里虽然有个例子，但是无法run起来。写一下我实现。

InspectorAgent创建一个Websocket服务，假设打开一个9224端口等待调试器前端连接。Chrome浏览器打开chrome-devtools://devtools/bundled/inspector.html?ws=127.0.0.1:9224就会呈现一个Devtools调试页面。点击页面上的Reconncet DevTools按钮，Devtools通过Websocket连接上InspectorAgent。InspectorAgent把来自Devtools的消息通过v8_inspector::V8InspectorSession的dispatchProtocolMessage转发给V8调试后端。然后V8调试后端通过v8_inspector::V8Inspector::Channel接口发消息给Devtools。
InspectorAgent在中间仅仅扮演消息转发的角色。

这里有两个细节：

在创建context的时候，需要指定一个名字，这个会在devtools的Sources栏显示。不指定名字的话，则通过debugger:///VMXX找到，不够方便
调试器的断点，单步调试支持，需要实现V8InspectorClient的runMessageLoopOnPause，quitMessageLoopOnPause等方法

最后效果如下图：

原文链接

本文为云栖社区原创内容，未经允许不得转载。

实现Chrome Devtools调试JavaScript V8引擎相关推荐

使用 Chrome DevTools 调试 JavaScript
参考网址如下: http://www.css88.com/archives/8175 https://jingyan.baidu.com/article/67508eb423d2929ccb1ce45 ...
在Chrome 中调试Javascript
在前面的两篇文章中我们讲了如何在IE中调试Javascript和在Visual Studio中调试Javascript,在本篇内容中,我们讲一下如何在谷歌 Chrome中调试Javascript. C ...
v8引擎处理html,JavaScript V8引擎基础教程
本篇教程介绍了JavaScript V8引擎基础教程,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 一.浏览器内核-渲染引擎渲染,就是根据描述或者定义构 ...
学习Chrome Devtools 调试
前言(共分2部分内容) 常用命令和调试黑盒脚本:Blackbox Script 控制台内置指令远程调试WebView 1. Chrome Devtools 的用处前端开发:开发预览.远程调试.性 ...
28个超实用Chrome DevTools 调试技巧参考了前端调试通关秘籍
使用金丝雀版(其他基于谷歌浏览器内核的以下方法都适用) 如果你想使用谷歌最新的版本和开发者工具,你可以下载金丝雀版本(不能访问google.com也没用,普通谷歌浏览器也可以),正式版浏览器只比这个晚 ...
JavaScript V8引擎编译
下载: 1. 找到下载源代码的Google网站. 2.提示使用svn命令下载源文件.svn是subversion的意思.请下载subversion控制台客户端. 3.执行提示的命令,即可下载. 编译: ...
javascript V8引擎垃圾收集机制
V8引擎使用的垃圾收集机制是标记清除,那么javascript在垃圾收集会阻塞其他程序执行.V8引擎使用了增量标记的方式进行优化增量标记 V8不是直接对整个栈堆遍历标记,而是标记一部分堆后回复正常执 ...
Chrome Devtool 调试 Javascript
重现错误单击打开演示.演示在新选项卡中打开. 在 Number 1 中输入数字5 在 Number 2 中输入数字2 点击 Add Number 1 and Number 2 熟悉 Sources ...
chrome DevTools 调试技巧
九大功能面板 Elements:检查和调整页面,调试DOM,调试CSS Network:调试请求,了解页面静态资源分布,网页性能检测 Console:调试js,查看log日志,交互式代码调试 Sour ...

实现Chrome Devtools调试JavaScript V8引擎

实现Chrome Devtools调试JavaScript V8引擎相关推荐

最新文章

热门文章