Edge 浏览器开发工具新增了 3D 视图,你尝试了吗?
2024-09-05 23:52:25
在使用开发者工具的时候,无意间发现了一个3D面板,如下:
仔细想想,这应该是之前 Firefox 的特性啊,不过后来去掉了,说是太难维护,没想到 Edge 也添加了这个特性。
使用该特性,你可以完成如下任务:
以3D视图浏览你的网页
基于 z-index 堆叠上下文的调试
从具有合成层的三维视图访问层工具功能
清除DOM窗格或z-index窗格中的一些杂乱内容
为调试 DOM 问题或者 z-index 问题进行着色,以便调试
如果你想看看 3D 视图项目的早期版本,并自己运行代码,可以参考3D View Sample。
在开发者工具的左侧,可以看到两个标签页:
Z-索引标签页,在应用程序中浏览不同的元素,并在不同的元素间进行导航。本标签页为默认标签页
DOM 标签页,用于浏览整个网页的 DOM 结构,易于访问每一个元素。要查看本页,点击 DOM 标签页切换。
快捷键
旋转 DOM:要进行水平旋转,请按左右箭头键,如果要进行垂直旋转,请按上下箭头键。
DOM 元素导航,要选择不同的元素,请选择一个元素,并按上下箭头键。
鼠标操作
旋转 DOM:使用鼠标左键拖动即可。
平移图像:鼠标右键移动。
图形缩放:移动右下方的滑块或者使用鼠标上的滚轮进行缩放
接下来看些效果:
下次调试的时候可以试试,布局不再愁...
最近准备发奋了,要多写些东西分享了,欢迎关注下面公众号,更多文章期待与你相遇:
最新文章
- WebServer+ADO+百万数据查询
- [原创]python之简单计算器(超详解,只有基本功能+-*/,还有括号处理)
- ios AFNetworking 3.0 报错 : *** Assertion failure in -[AFHTTPRequestSerializer requestWithMethod:URLString:parameters:error:],
- ABP框架详解(四)Feature
- Java_swing控件实例
- 衣联网络-亿能测试 安全测试沙龙 PPT资料免费下载
- Struts2 学习笔记18 拦截器原理分析
- 【Nginx】磁盘文件写入飞地发
- sql关键字之null
- 【Android Developers Training】 3. 构建一个简单UI
- [Codeforces 946D]Timetable
- [冷知识] 连字符-减号-横杠的区别 difference between hyphen-minus-dash
- vscode 最新中文设置
- JSON字符串解析成JSON数据格式
- 第七次spring会议
- linux系统下shell命令中的sleep
- c++学习笔记(八)- map
- 前端学习 -- Css -- 定义列表
- HTTPS演变小图
- CSV 中添加逗号
热门文章
- Bash on Ubuntu on Windows ( Windows Subsystem for Linux)
- HTML <;keygen>; 标签(&#128078; 已废弃)
- 使用 js 实现一个简易版的 async 库
- Fetch &; POST
- ODM &; mongoose
- 扫码登录 &; 实现原理
- SVG viewBox &; coordinate system
- js 如何取消promise
- Linux文件/proc/net/tcp分析
- 手把手教你Spring Boot整合Mybatis Plus和Swagger2