WebKit WebInspector 与websocket

<?xml version="1.0" encoding="utf-8"?>

接入chromium远程调试的记录

Table of Contents

• 1 Web Inspector in mobile chromium
  • 1.1 frontend/backend comunication in remote debug
    • 1.1.1 The Welcome Page which list all tabs: json query, and ws locatin return
    • 1.1.2 the click debug page location generation: ws WebSocket established connection
    • 1.1.3 A Picture say hundred
    • 1.1.4 some unorganized details
  • 1.2 struct & interface in chromium
  • 1.3 IMPROVE the format between Host/Target(FrontEnd/Backend)
  • 1.4 Introduce of how remote inspector work on android
  • 1.5 HOW-TO use mercury debug mobile page

1 Web Inspector in mobile chromium    export

1.1 frontend/backend comunication in remote debug

1.1.1 The Welcome Page which list all tabs: json query, and ws locatin return

when after "adb tcpforward", we open the entry page in hostbrowser.How does it work?

First of all it query the httpserver the indexpage("localhost:port/").In server part, the simple httpserver willreceive "OnHttpRequest" in the content api, then according theclient's index page requerst, it step into the'OnDiscoveryPageRequestUI' routine, ask delegate get std::string asresponse, send back to the client.In chrome level's delegateimplementation it simply return a html(in grid packaged) asstd::string(in subdir, easily to find.And some machinesm in contentlevel).After that, A welcome page showed.

In a very second, the same welcome page, itself query the httpserver's'\/json' (hardcode in"chrome/devtools/frontend/devtools_{discoverypage}.html", simaliar incontent) use head included javascript, then parse it into item, atlast add each item into specified position entry page of itscontain.In the server part, like the welcome page abrove, this time itstep into 'OnJsonRequestUI' routine, build the data, then send back.Inthe time, "build the data" abrove.A extra things happend inside.Itcreate "DevToolsAgentHost" for each "RenderViewHost"(or "RenderView",or "WebDevToolsAgent" in WebKit).Take it's Seriliaze ID write tojson.For the ID, will use then later reversion finding Agent.

Now you can see all the tabs(renders), on the host's browser page.

1.1.2 the click debug page location generation: ws WebSocket established connection

when a Click on webcontent item, the url query take ws location asan argument.Then the js process will take the argument, to ask targetopen a ws connection(WebSocket, TODO link out for more detail) thatcound transform msg both from and to target orientation.

After that, frontend and backend can communication both way, useInspector's protocal through ws connection. All struct mentionhere

1.1.3 A Picture say hundred

1.1.4 some unorganized details

void DevToolsHttpHandlerImpl::OnWebSocketRequestUI(

构建能够client的分发类， 后续通过manager, 来向backend投递消息

  DevToolsClientHostImpl* client_host =
      new DevToolsClientHostImpl(thread_->message_loop(),
                                 server_,
                                 connection_id);

将server中唯一的id号注册到map中去， 方便后续查找

  connection_to_client_host_ui_[connection_id] = client_host;

注册到 DevToolsManager 中去

  DevToolsManager::GetInstance()->
      RegisterDevToolsClientHostFor(agent, client_host);
  AcceptWebSocket(connection_id, request);
}

–——————————example of ipc in dev msg

*** browser/devtools/ipc_devtools_agent_host.cc:
<global>[23]                   SendMessageToAgent(new DevToolsAgentMsg_DispatchOnInspectorBackend(

*** renderer/devtools/devtools_agent.cc:
<global>[93]                   IPC_MESSAGE_HANDLER(DevToolsAgentMsg_DispatchOnInspectorBackend,

IPC_MESSAGE_HANDLER(DevToolsAgentMsg_DispatchOnInspectorBackend,
                    OnDispatchOnInspectorBackend)

void DevToolsAgent::OnDispatchOnInspectorBackend(const std::string& message) {
  WebDevToolsAgent* web_agent = GetWebAgent();
  if (web_agent)
    web_agent->dispatchOnInspectorBackend(WebString::fromUTF8(message));
}

WebKit/Source/WebKit/chromium/public:
 WebDevToolsAgentClient.h
 WebDevToolsAgent.h
 WebDevToolsFrontendClient.h
 WebDevToolsFrontend.h

---

On http server part, when received request that is resource, it will:

1. ask delegate if GetDebugFrontendDir exist, if exist, use resource under this dir.
2. Use internal resource. Generated from compile time:

"grit/devtools_resources_map.h"

contain control the resource store location(offset).

kDevtoolsResourcesSize
kDevtoolsResources

Or if the delegate override the frontend url, the first '\/json'request (), will use the delegate's override url, as the htmllocation.

where in set:

DevToolsHttpHandler* DevToolsHttpHandler::Start(
    const net::StreamListenSocketFactory* socket_factory,
    const std::string& frontend_url,
    DevToolsHttpHandlerDelegate* delegate) {

where in used return, when '\/json' request happend

std::string DevToolsHttpHandlerImpl::GetFrontendURLInternal(
    const std::string id,
    const std::string& host) {
  return base::StringPrintf(
      "%s%sws=%s%s%s",
      overridden_frontend_url_.c_str(),
      overridden_frontend_url_.find("?") == std::string::npos ? "?" : "&",
      host.c_str(),
      kPageUrlPrefix,
      id.c_str());
}

About BundlesFrontendResources packaged, check out gyp any time

1.2 struct & interface in chromium

• file in "/content/public/browser", and their purpose.

  filename	descript
  devtools_agent_host.h	browser's ipc filter from render's devtoolsagent, which agent to webkit
  devtools_client_host.h	browser's ipc filter, send message to frontend. Subclass by Native Window or Remote Debug
  devtools_http_handler.h	If a frontend is remote debug, this class instance for handle forther msg delegate
  devtools_http_handler_delegate.h	decider for devtools_http_handler, like use which frontend resource
  devtools_manager.h	hold map<agent, client>, deliver msg each other
  devtools_external_agent_proxy_delegate.h	unknow
  devtools_external_agent_proxy.h	unknow
  devtools_frontend_host_delegate.h	unknow

• subclass from "devtools_agent_host.h"

  DevToolsAgentHost

  DevToolsAgentHostImpl

  IPCDevToolsAgentHost

  RenderViewDevToolsAgentHost

• subclass from "devtools_client_host.h" for native window use(I guess)

  *** browser/devtools/devtools_frontend_host.h:
  <global>[24]                   class DevToolsFrontendHost : public DevToolsClientHost,
  

  anonymous class for remote-debug, msg deliver

  browser/devtools/devtools_http_handler_impl.cc:
  <global>[94]                   class DevToolsClientHostImpl : public DevToolsClientHost {
  

1.3 IMPROVE the format between Host/Target(FrontEnd/Backend)

Need to improve, devtools' detail.

1.4 Introduce of how remote inspector work on android

almost same like abrove

Abrove all It setup the 'http-server'(explain later) on the targetmachine, listen to the it.Receive http request, give the properresponse.The conmunication between host and target happend this way.

The word 'http-server' is not very precise, which is the onlydifferent from pc implemention.Actually, in android it use Unix DomainSocket instead of Http Socket which use in pc implementation(gtk,content_shell, etc.), that more effcicently in local ipc of UnixSystem.

1.5 DONE HOW-TO use mercury debug mobile page

1. enable USB debug on devices
2. open browser, enable remote in setting
3. forward port

   adb forward tcp:[localport] [remote-protocol]:[remote-interface]
   

   currently is

   adb froward tcp:[localport] tcp:9997
   

4. use chrome open remote entry page

   http://localhost:[localport] (localport is same as forward before)
   

   currently is

   http://localhost:9997
   

http://trac.webkit.org/wiki/WebInspector
http://trac.webkit.org/wiki/HackingWebInspector

Date: 2014-01-19 11:08:16 CST

Validate XHTML 1.0