search

jareguo / test-clone-issue

0 stars 0 forks source link

[Research] DevTools扩展研究 #10

Open jareguo opened 6 years ago

jareguo commented 6 years ago

Issue by jwu Saturday Jun 06, 2015 at 04:56 GMT Originally opened as https://github.com/cocos-creator/fireball/issues/20 (9 comment(s))

I wish someone can help me research the way to extends dev-tools. I'm curious in:

jareguo commented 6 years ago

Comment by nantas Sunday Oct 25, 2015 at 14:28 GMT

目的：

jareguo commented 6 years ago

Comment by 2youyou2 Sunday Oct 25, 2015 at 14:51 GMT

dev tools source: https://chromium.googlesource.com/chromium/blink/+/master/Source/devtools/ dev tools remote debugging Protocol : https://developer.chrome.com/devtools/docs/protocol/1.1/index 如何用dev tools 调试 dev tools : https://developer.chrome.com/devtools/docs/contributing
dev tools 的文档都在这了：https://developer.chrome.com/devtools

chrome 会开一个 websocket 接听调试信息，dev tools 就是通过与这个socket使用protocol进行交互，比如设置断点，获取当前堆栈等。 dev tools 的核心其实就是 protocol 的传递，其他的就是界面交互了

chrome 和 brackets 可以在启动的命令行参数里面 enable and set remote debugging port 来供外部使用 electron 得看下是否一样

jareguo commented 6 years ago

Comment by jwu Monday Oct 26, 2015 at 03:13 GMT

@2youyouo2 你这个 report 里虽然说明了 devtools 的工作原理, 但是没有进一步在 electron 中验证过. 我比较关心的几个点:

  1. 在 electron/chrome 中, 如何正确给 devtools 发送 websocket 消息.
  2. 像这样的 https://developer.chrome.com/devtools/docs/protocol/1.1/debugger#command-setBreakpoint 接口, 其正确的调用方式是什么? 是否有更进一步的文档?
  3. 如何扩展 inspector ? 还是没有找到具体文档.
jareguo commented 6 years ago

Comment by 2youyou2 Thursday Oct 29, 2015 at 07:24 GMT

  1. electron/chrome 中提供 websocket 连接的不是 devtools, 而是 v8 提供的一个protocol, devtool 也是通过 socket 连接 protocol 进行操作的. 目前同时连接 protocol 的数量只能为1个，issue: https://developer.chrome.com/devtools/docs/debugger-protocol#simultaneous https://code.google.com/p/chromium/issues/detail?id=129539 所以如果在外部通过 websocket 的方式连接了 protocol，这时开启devtools的话 会把之前外部的连接断掉。
  2. 写了个小 demo : https://github.com/2youyouo2/remote-debugging 这里需要还需要按照这个 commit 修改下fireball

  3. 扩展 devtools 看这: https://developer.chrome.com/extensions/devtools https://github.com/atom/electron/blob/master/docs/tutorial/devtools-extension.md

    然而 electron 里还不能完全使用 chrome extension 的api, Background Pages 和 chrome.* APIs 没有完全实现 发现了两个 extension React Devtools 和 polymer-devtools-extension，不过electron里好像还有 问题

    这里也写了个demo: https://github.com/2youyouo2/devtools-extension

clone demo 后需要在 package 内执行 npm install

jareguo commented 6 years ago

Comment by jareguo Thursday Oct 29, 2015 at 07:26 GMT

我们基本没有在 electron 里扩展 dev tools 的必要吧？

jareguo commented 6 years ago

Comment by jwu Thursday Oct 29, 2015 at 07:27 GMT

@jareguo 加断点

jareguo commented 6 years ago

Comment by 2youyou2 Thursday Oct 29, 2015 at 07:30 GMT

加断点不是扩展 devtools了，是我们自己使用remote debugging protocol 来做。 而且如果是在我们自己的编辑器里加断点的话，这时 devtools应该是关闭着的，关闭着的devtools 的断点是不生效的

jareguo commented 6 years ago

Comment by jareguo Thursday Oct 29, 2015 at 07:30 GMT

我觉得比较好的参考是 egret 的 inspector，功能本身很完整了，包括如何注入代码到 scene 里面，如何实现属性面板。 加断点的功能，建议参考下 JB 这个插件。

jareguo commented 6 years ago

Comment by 2youyou2 Thursday Oct 29, 2015 at 07:38 GMT

看了下 egret 的 inspector chrome 插件介绍，如果本issue的目标是让运行起来的游戏更好调试，我觉得像egret 这样做个chrome 插件是比较可行的