Web Inspector 及其原理

Contributing to Chrome DevTools:https://developers.google.com/chrome-developer-tools/docs/contributing

DevTools Reviews:https://groups.google.com/a/chromium.org/forum/#!forum/devtools-reviews

DOMAgent.setInspectModeEnable: InspectorBackendDispatcherImpl::DOM_setInspectModeEnabled

DOMAgent.requestNode:InspectorBackendDispatcherImpl::DOM_requestNode

One of the primary goals of this experiment was to reuse existing Web Inspector code. Web Inspector consists of the following bits:

• HTML, CSS, and JS files used in the Web Inspector user interface
• C++ code running in the user interface coordinating with the page being debugged
• C++ code running in the page being debugged coordinating with the Web Inspector user interface.

Since the primary goal was to reuse Web Inspector goal, and another goal is to run the code using user-land facilities, the implicit goal was to reuse as much of the HTML, CSS, and JS code, and replace the C++ code.

Web Inspector (the version of code used for this experiment) uses two "classes" to provide the multi-process message handling. One runs in the debug client, and is called InspectorBackend. The other runs in the debug target and is called InspectorFrontendHost. In traditional Web Inspector, these classes are implemented in C++ code and made available to the respective JavaScript environments as plain old JavaScript objects.

------------------------------------------------------------------------------
front end
------------------------------------------------------------------------------
          |

------------------------------------------------------------------------------
InspectorControler(own to page)                                |
          |                                                    |
DispatchMessageFromend                                         |
          |                                                    |
InspectorBackendDispatch::dispatch                             |
          |                                                    |
InspectorInstrunmentation::staic Methods               sendMessageToFrontEnd
          |                                                    |
InstrumentAgent                                     InspectorFront::format(JSON)
          |                                                    |
InspectorAgent--------------------------------------InspectorFrontEndChannel
          |
InspectorDom|debug|css|...Agent（doThtings）
          |

InspectorBackend

----------------------------------------------------------------------------------

如何修改web inspector前端：

webkit代码中的前端代理是被编译成资源添加到c++文件中，所以每次修改完前端后，需要重新编译webkit，增量编译很快。

在前端代码中，各个模块的实现形式行对独立，可以简单的在模块初始化部分将不需要的部分在注册时移除就可以了，但是不要动其逻辑，因为很多模块之间的耦合性还是很高的。

在开发过程中，可以通过google官方的文档来操作，构建一个远程调试环境，这样方便开发。

参考文章

http://muellerware.org/papers/weinre/manual.html

http://blog.csdn.net/cutesource/article/details/8976555