Question

有没有办法显示网站的div结构，其中“块”没有内容。就像只显示div在位置和关系上的位置。我有萤火虫和网络开发者，但他们不只是像那样勾勒出div。

Answer 1

使用jQuery进行非常基本的概述（如果愿意，可以在此页面上运行）：

var $body = $(document.body);

$('div').each(function(){
    var $this = $(this),
       offset = $this.offset(),
        width = $this.outerWidth(),
       height = $this.outerHeight()

    $body.append(
        $('<div style="position:absolute;border:1px solid #00F;background:#99F;opacity:.3;"></div>')
        .css(offset)
        .css({ width: width, height: height })
    );
});

如果您不需要查看深度（由透明处理），请执行以下操作：

div {
    outline : 1px solid #00F;
}

Answer 2

我通常使用大纲来做到这一点。边框等功能但不影响布局宽度：

div { outline: 1px solid red; }

在图中显示页面的div结构

2 个答案: