chrome_devtools

DevTools 我们天天在用,然而你真正了解它么,未必

了解

  • DevTools 的源码就在Google的blink项目中,高度的开放。目前这么多丰富的功能,正是 Google 和其社区的共同贡献。同时它的 License 也不拒绝任何的二次开发。
  • DevTools 仅仅是简单的由 HTML、JavaScript、CSS、Images 组成的,本质上就是一个 WebApp,纯粹的前端应用。当你去了解、修改它时,你不需要理解 C++ 和任何编译的知识。
  • 事实上Devtools是一个充分模块化的JavaScript网页应用。它的每个功能你都可以去扩展(仅需要了解 JavaScript)。

初探

  • 开启调试命令: chrome –remote-debugging-port=9222

    i) 请确认关闭所有chrome页签
    ii) 把chrome 加入到你的 path 中(环境变量)
  • 你可以访问 http://localhost:9222/ 获取devtools列表,点击可进入debug界面,是不是很熟悉。然后你可以继续ctrl+shift+i 调试这个debug界面,network里面可以看到socket通信,当鼠标与debug界面发生交互,那么socket会不断的有消息发出、接收。

  • 使用json列表里面其中之一的 webSocketDebuggerUrl 来构建自己的websocket通讯,获取我们的数据

    • 这里需要注意,devtools的ws只支持单信道,所以同一时刻只能有一个连接
    • 直接上代码,使用h5的websocket连接

      var ws = new WebSocket("ws://localhost:9222/devtools/page/1e799774-96de-405f-bc3d-5f63daccc03b");

      ws.onopen = function (e) {

      console.log('Connection to server opened');
      var msg1 = {
      id: 1,
      method: "Network.enable",
      params: {}
      }

      ws.send(JSON.stringify(msg1));
      }
      ws.onmessage = function(e){
      console.log("accept server's data");
      console.log(e.data);
      }
    • 这里的消息格式要注意,同时你也可以用nodejs进行模拟,推荐ws模块

    • 根据我们发送的信息,我们就可以获得我们需要的数据,数据有了,各种问题的分析就可以迎刃而解了。具体的应用场景后面在讨论。

深入remote_debug

  • 远程调试android chrome/webview

    • chrome remote debug 命令 (可以调试也可以查看数据)

      adb forward tcp:9222 localabstract:chrome_devtools_remote
    • webview remote debug 命令 (只能用来查看数据,调试要使用inspect方式)

      adb shell pidof info.isteven.demo(包名) 获取进程id
      adb forward tcp:9222 localabstract:webview_devtools_remote_<pid>
  • chrome 普通调试方法

    chrome://inspect 都可以远程调试js(包括chrome/webview), 但是无法查看ws通讯数据
  • 总结:需要深入数据研究的要使用命令调试,不喜欢折腾的inspect够玩了