V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
bsbgong
V2EX  ›  问与答

有没有分析一个 web 页面的结构(css box model)的工具

  •  
  •   bsbgong · 2014-02-20 14:35:34 +08:00 · 3427 次点击
    这是一个创建于 3960 天前的主题,其中的信息可能已经有所发展或是发生改变。
    现在的web页面效果越来越花哨,结构越来越复杂。
    但基本结构还是一样,就是css box model。
    最近要重写一个已有的站点,为CSS的问题很头疼。
    想请问大家,有没有这样的工具:
    1. 输入一个url
    2. 输出对应页面的css box model图。

    输出的图片内容类似这样:
    http://i.stack.imgur.com/bJKfH.png
    6 条回复    1970-01-01 08:00:00 +08:00
    zzNucker
        1
    zzNucker  
       2014-02-20 15:31:39 +08:00
    你不知道firefox自己就可以显示盒模型么 - -
    andy12530
        2
    andy12530  
       2014-02-20 17:50:04 +08:00   ❤️ 1
    楼主想要这样一个东西??

    jakwings
        3
    jakwings  
       2014-02-20 17:56:45 +08:00
    Firefox 自带调试工具已有此功能。假如用 Nightly Firefox,在网页中单击鼠标右键→检查元素→点击调试面板右上角的立体方块图标。
    bsbgong
        4
    bsbgong  
    OP
       2014-02-20 19:38:32 +08:00
    @zzNucker
    @andy12530
    @jakwings
    知道firefox的盒模型,因为是3D的,当时用得不很溜。
    不过现在用溜了,这个模型的横切面非常棒,正是我想要的。
    多谢各位!
    learnshare
        5
    learnshare  
       2014-02-20 19:40:12 +08:00
    Firefox 最早把这个功能做成了插件,后来干脆集合到开发者工具中了
    akaayy
        6
    akaayy  
       2014-02-24 10:38:43 +08:00
    @andy12530 这个是什么工具啊,求分享~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2097 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 16:12 · PVG 00:12 · LAX 08:12 · JFK 11:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.