v8从入门到入土:调试篇二(Inspector)

1,150 阅读1分钟

通过手动输入 chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:8082/debugger-proxy?role=chrome 的这种调试方式是不是有点low?而且界面也不简洁,有很多我们没有用的Tab。

那我们是否可以像nodejs inspector那样,让chrome://inspector自动识别,自动连接呢?界面也跟他一样简洁?

\

答案是肯定的,但网上没查到什么资料,怎么办?老办法,直接看源码,拉出nodejs inspector代码研究一番,最后弄清楚的流程如下:

首先你需要打开 chrome://inspector,然后做如下设置:

\

\

设置好后,chrome会向你设置的 ip、port 轮询发送两个请求,一个是  /json,一个是  /json/version,对于这两个请求按如下格式返回数据即可:

// 这是 /json
[{
"description": "xxx instance",
"devtoolsFrontendUrl": "chrome-devtools://devtools/bundled/js_app.html?experiments=true&v8only=true&ws=127.0.0.1:8082/debugger-proxy?role=chrome",
"devtoolsFrontendUrlCompat": "chrome-devtools://devtools/bundled/inspector.html?experiments=true&v8only=true&ws=127.0.0.1:8082/debugger-proxy?role=chrome",
"faviconUrl": "http://.../logo.ico",
"title": "xxx debug tools for V8",
"type": "node", // 这个type很重要,node这个类型会简化界面,也正是我们需要的
"url": "",
"webSocketDebuggerUrl": "ws://127.0.0.1:8082/debugger-proxy?role=chrome"
}]\

// 这是 /json/version
{ "Browser": "xxx/v1.0.0", "Protocol-Version": "1.1" // 这里代码inspect的协议版本 }

然后启动 server,就会在 chorme://inspector 看到这样的界面:

\

\

但这个模式下,在source里面没有file,如果想找个文件下断点怎么办?

不着急,点击下面红框内的,我们用nodejs定制的版本即可

\

然后就可以看见下面的界面了

\

大功告成!