在使用开发者工具的时候,无意间发现了一个3D面板,如下:

仔细想想,这应该是之前 Firefox 的特性啊,不过后来去掉了,说是太难维护,没想到 Edge 也添加了这个特性。

使用该特性,你可以完成如下任务:

  • 以3D视图浏览你的网页

  • 基于 z-index 堆叠上下文的调试

  • 从具有合成层的三维视图访问层工具功能

  • 清除DOM窗格或z-index窗格中的一些杂乱内容

  • 为调试 DOM 问题或者 z-index 问题进行着色,以便调试

如果你想看看 3D 视图项目的早期版本,并自己运行代码,可以参考3D View Sample。

在开发者工具的左侧,可以看到两个标签页:

  • Z-索引标签页,在应用程序中浏览不同的元素,并在不同的元素间进行导航。本标签页为默认标签页

  • DOM 标签页,用于浏览整个网页的 DOM 结构,易于访问每一个元素。要查看本页,点击 DOM 标签页切换。

快捷键

  • 旋转 DOM:要进行水平旋转,请按左右箭头键,如果要进行垂直旋转,请按上下箭头键。

  • DOM 元素导航,要选择不同的元素,请选择一个元素,并按上下箭头键。

鼠标操作

  • 旋转 DOM:使用鼠标左键拖动即可。

  • 平移图像:鼠标右键移动。

  • 图形缩放:移动右下方的滑块或者使用鼠标上的滚轮进行缩放

接下来看些效果:

下次调试的时候可以试试,布局不再愁...

最近准备发奋了,要多写些东西分享了,欢迎关注下面公众号,更多文章期待与你相遇:

Edge 浏览器开发工具新增了 3D 视图,你尝试了吗?的更多相关文章

  1. 让视障者的网络之路少一些障碍——微软为 Edge 浏览器开发自动图像描述功能并呼吁网页作者补充图片的替换说明

    网页是互联网的组成部分,浏览器是开启互联网大门的钥匙.对于生活在信息时代下的我们而言,每一个人都很难离开网络而生活,其中也包括盲人这一残障群体. 本文的引子是如下一条新闻: IT之家3月18日消息,微 ...

  2. Edge浏览器开发人员工具

    UserAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Ch ...

  3. Chrome 开发工具之Console

    前段时间看git的相关,记的笔记也大致写到了博客上,还有些因为运用不熟,或者还有一些疑惑点,暂时也不做过多纠缠,之后在实践中多运用得出结论再整理分享吧. 工欲善其事,必先利其器.要想做好前端的工作,也 ...

  4. Web前端开发工具总结

    前端开发工具: web前端开发乃及其它的相关开发, 推荐sublime text, webstorm(jetbrains公司系列产品)这两个的原因在于,有个技术叫emmet, http://docs. ...

  5. 浏览器开发调试工具的秘密 - Secrets of the Browser Developer Tools

    来源:GBin1.com 如果你是一个前端开发人员的话,正确的了解和使用浏览器开发工具是一个必须的技能. Secrets of the Browser Developer Tools是一个帮助大家了解 ...

  6. IT兄弟连 HTML5教程 HTML5的基本语法 如何选择开发工具

    如何选择开发工具 有许多可以编辑网页的软件,事实上你不需要用任何专门的软件来建立HTML页面,你所需要的只是一个文本编辑器(或字处理器),如Office Word.记事本.写字板等.制作页面初学者通常 ...

  7. 用FireFox火狐浏览器的3D Tilt 插件查看网页3D视图效果

    逛博客发现了网页的3D视图效果,一搜原来是Firefox特有的一个功能,先看效果: 相当炫酷,接下来介绍如何实现. 1.首先安装3d tilt 插件: 从火狐浏览器的添加插件页面,搜索:3D Tilt ...

  8. Unity3D ——强大的跨平台3D游戏开发工具(一)

    众所周知,Unity3D是一个能够实现轻松创作的多平台的游戏开发工具,是一个全面整合的专业游戏引擎.在现有的版本中,其强大的游戏制作功能已 经达到让人瞠目结舌的地步.尤其是它在3.0版本里面制作的那款 ...

  9. web标准 浏览器介绍 开发工具介绍 HTML介绍 HTML颜色介绍 规范 HTML结构详解 {前端之前端初识}

    前端之前端初识   前端初识 本节目录 一 web标准 二 浏览器介绍 三 开发工具介绍 四 HTML介绍 五 HTML颜色介绍 六 规范 七 HTML结构详解 一 web标准 web准备介绍: 1. ...

随机推荐

  1. Keras模型拼装

    在训练较大网络时, 往往想加载预训练的模型, 但若想在网络结构上做些添补, 可能出现问题一二... 一下是添补的几种情形, 此处以单输出回归任务为例: # 添在末尾: base_model = Inc ...

  2. translate.js

    http://www.openxrest.com/translatejs/index.html translate.js translate.js is a jQuery plugin to tran ...

  3. website captcha

    website captcha 验证码 hCaptcha hCaptcha通过询问对人类来说很容易且对机器来说很困难的简单问题,可以帮助您喜欢的Web服务阻止机器人,垃圾邮件和滥用行为. https: ...

  4. text image & 思维脑图 & xmind

    text image & 思维脑图 text-image 图片读 rgb 值->灰度值->字符; rgb->灰度值的公式 google 一下就有,灰度值传字符部分,从灰度值从 ...

  5. Enums & JavasScript & TypeScript

    Enums & JavasScript & TypeScript ES6 & TS https://www.typescriptlang.org/docs/handbook/e ...

  6. Java并发包源码学习系列:同步组件CountDownLatch源码解析

    目录 CountDownLatch概述 使用案例与基本思路 类图与基本结构 void await() boolean await(long timeout, TimeUnit unit) void c ...

  7. RTPS解析

    资料参考: https://blog.csdn.net/HBS2011/article/details/102520704

  8. (数据科学学习手札108)Python+Dash快速web应用开发——静态部件篇(上)

    本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 这是我的系列教程Python+Dash快速web ...

  9. MySQL命名、设计及使用规范

    本文转载自MySQL命名.设计及使用规范 导语 最近在看MySQL相关的内容,整理如下规范,作为一名刚刚学习MySQL的菜鸟,整理的内容非常的基础,中间可能涉及到有错误的地方,欢迎批评指正,看到有错误 ...

  10. flask启动常见问题1:sqlalchemy.exc.ArgumentError: Mapper mapped class UserCode->data_system_user_email could not assemble any primary key columns for mapped table 'data_system_user_email'

    我的描述:当我编辑好flask以后,ORM映射数据库完成,启动项目时,发生现象: 解决: 看字面的意思是主键导致的错误,于是我查看了data_system_user_email的键参数配置,发现表没有 ...