使用WinDog根据网页元素渲染

1、使用WinDbg跟踪元素的生成

接下来，我们就可以着手跟踪元素的生成过程了。我们依然以IE和Chromium两个浏览器为例。让我们首先简单地介绍一下思路。

元素最终会成为一个个元素类的形式并通过某些方式展现在网页中。因此，跟踪元素的生成实际上可以简化成跟踪元素类的生成。一个类在生成的同时会调用其构造函数，因此，只要我们能够及时断在类的构造函数中即可确保可以跟踪到后续内容。

让我们构造如下的代码，模拟从脚本中创建一个元素的过程：

因为Chromium包含有源代码，因此在找到处理代码之后，跟踪起来相对简单，只需要在调试器中源代码所在行添加断点，然后直接运行即可。本地有代码调试使用VS Debugger较为简单直观，操作方法如下：

1. 在Chromium启动后，使用VS Debugger附加上去；
2. 在HTMLDivElement::HTMLDivElement处设置断点；
3. 执行示例代码，即可成功断到此处。

我们可以看到，从Chromium的脚本引擎（V8）中执行createElement到最终HTMLDivElement