mozilla
您的搜索结果

    三维视图

    当你点击"三维视图"按钮之后,当前页面会进入三维视图模式,在该模式中, 页面中的HTML嵌套结构,会以图形化的方式,由外到内,从页面底部一级一级凸显出来. 这种视图可以让你很容易的看清楚页面的嵌套结构.

    3dview.png

    按住左键拖拽视图, 你可以旋转整个页面,从不同的角度查看页面的DOM层次,理清页面的结构. 页面显示区域以外的元素也变为可见状态,你能看到这些游离元素相对于页面可见区域所处的位置. 你可以点击区块选择对应的元素,该元素对应的HTML和CSS会在 HTML面板Style面板显示出来.反回来, 你也可以在HTML面板中点击所要查看的元素,该元素也会在三维视图中成为被选择状态.

    如果你的页面查看器里没有三维视图按钮,则最有可能的原因是你的显卡驱动需要更新了. 查看blocklisted drivers page了解更多信息.

    控制三维视图

    通过键盘快捷键和鼠标操作可以控制三维视图的显示模式.

    功能 键盘快捷键  鼠标操作
    放大/缩小 +/-              滚轮向上/向下滚动
    向左/向右旋转 a / d 按住左键向左/向右拖动
    向上/向下旋转 w / s 按住左键向上/向下拖动
    向左/向右平移 ← / → 按住右键向左/向右拖动
    向上/向下平移 ↑ / ↓ 按住右键向上/向下拖动
    重置放大级别到默认状态 0
    将焦点转移到当前选择的节点,确保当前选择的节点是可见的 f
    重置整个视图到默认状态(放大级别,旋转角度,移动位置等) r
    隐藏当前选择的节点,确保当前选择的节点是不可见的, 这样可以看到下层被遮挡的节点 x

    三维视图的用途

    三维视图在很多种情形下都会派上用场:

    • 如果一些结构不良好的HTML引起了页面的布局问题, 三维视图可能能够帮你找到问题所在. 通常情况下,布局问题是由页面内容的嵌套错误引起的.在三维视图下,嵌套错误的那些元素可以比较明显的被显示出来.
    • 如果一个元素没有显示在页面上,你会希望能够快速的找到问题所在.三维视图提供了缩小页面显示的功能,可以显示出那些正常情况下页面可见区域之外的元素, 所以你可以通过这种方法找到那些游离的无法显示的元素.
    • 可以查看你的页面结构,找到如何优化页面布局的方法.
    • 当然,还有一点,就是它看起来很炫.

    相关链接

    文档标签和贡献者

    Contributors to this page: ziyunfei
    最后编辑者: ziyunfei,