dump tree

There are code in webkit that can dump the dom tree and render tree.

"RenderObject::showRenderTreeAndMark" and "Node::showTreeAndMark"

You can use it or change it. But it will take a lot of time to compile, and the log function doesn't work very well in Windows environment.

Below is the simplified code and will work well on Windows:

DumpRenderNode:

//Render
void showRenderObject(RenderObject* renderObject, int depth)
{
    char buffer[128] = {0};
    int pos = 0;
    if (!renderObject)
    {
        pos += sprintf(buffer+pos,"%s","null");
    }else
    {
        for (int i = 0; i<depth; i++)
            pos += sprintf(buffer+pos,"%s"," ");
        pos += sprintf(buffer+pos, "%s ", renderObject->renderName());
        //sprintf(buffer+pos, "%s", )
        if (renderObject->node())
        {
            pos += sprintf(buffer+pos, "%s", renderObject->node()->nodeName().utf8().data());
        }else
        {
            pos += sprintf(buffer+pos, "%s", "noname");
        }
        if (renderObject->isRenderBlock())
        {
            RenderBlock *block = (RenderBlock*)(renderObject);
            pos += sprintf(buffer+pos, "(%d,%d,%d,%d)", block->x(),block->y(),
                block->width(),block->height());
        }//else if (renderObject->isRender)

    }
    LOG(Loading,"%s",buffer);
}
void visitRenderNode(RenderObject * renderNode, int depth)
{
    showRenderObject(renderNode, depth);
    if (!renderNode)
        return;
    for (RenderObject* child = renderNode->firstChild();
        child; child=child->nextSibling())
    {
        visitRenderNode(child,depth+1);
    }
}
void dumpRenderNode(RenderObject * renderNode, int depth)
{
    visitRenderNode(renderNode, depth);
}

result:

lyftest begin dump
RenderView #document(0,0,936,473)
 RenderBlock HTML(0,0,936,473)
  RenderBody BODY(8,8,920,449)
   RenderBlock P(0,0,920,18)
    RenderText #text
   RenderBlock (anonymous) noname(0,34,920,0)
    RenderImage IMG
   RenderBlock DIV(0,34,920,24)
    RenderText #text
   RenderBlock UL(0,74,920,54)
    RenderListItem LI(40,0,880,18)
     RenderListMarker noname
     RenderText #text
    RenderListItem LI(40,18,880,18)
     RenderListMarker noname
     RenderText #text
    RenderListItem LI(40,36,880,18)
     RenderListMarker noname
     RenderText #text
lyftest end dump

 

dump DOM node:

void showDomNode(const Node* node, int depth)
{
    char buffer[128] = {0};
    int pos = 0;
    if (!node)
    {
        pos += sprintf(buffer+pos,"%s","null");
    }else
    {
        for (int i = 0; i<depth; i++)
            pos += sprintf(buffer+pos,"%s"," ");
        pos += sprintf(buffer+pos, "%s", node->nodeName().utf8().data());
        //sprintf(buffer+pos, "%s", )
    }
    LOG(Loading,"%s",buffer);
}
void visitDomNode(Node * node, int depth)
{
    showDomNode(node,depth);
    if (!node)
        return;
    for (Node* child = node->firstChild();
        child; child=child->nextSibling())
    {
        visitDomNode(child,depth+1);
    }
}
void dumpDomNode(Node * node, int depth)
{
    visitDomNode(node,depth);
}

result:

lyftest begin dump
#document
 html
 HTML
  HEAD
   #text
   TITLE
    #text
   #text
   META
   #text
   META
   #text
   META
   #text
   META
   #text
  #text
  BODY
   #text
lyftest end dump

 

with this we can do more on it.