Firefox 开发者工具 编辑
Firefox 开发者工具是指Firefox集成的一系列web开发者工具,可用于在 PC 和移动设备上对HTML、CSS 及 JavaScript进行测试,编辑和调试
这段内容包括所有关于如何在Android调试Firefox、扩展DevTools以及整个浏览器调试相关的工具和知识的详细索引。
如果你在寻找有关使用 Firefox 开发者工具的信息,你来对地方了——这个页面提供了核心工具和附加工具的详尽信息,以及更深层的信息,比如如何连接调试 Firefox 安卓版,如何拓展开发者工具和如何调试浏览器。
请探索侧边栏的链接,进一步浏览页面。如果你有任何有关开发者工具的反馈或问题,请在邮件列表或 IRC 频道(请查阅底部的社区链接)上向我们发送消息。如果你有任何特别关于文档的反馈或问题,MDN 讨论适合发帖。
注意:如果你是 Web 开发的初学者并且使用开发者工具,我们的学习 Web 开发文档可能会对你有所帮助 — 查看初识 Web 和 什么是浏览器开发者工具? 作为一个较为合适的出发点。
核心工具
在右侧的开发工具, 在 Windows 或者 Linux 使用 Ctrl + Shift + I 或F12, 或者在 Mac OS X Cmd + Opt + I , 有几个按钮可用于执行操作或更改工具设置.
右手边的省略号菜单包括了若干命令,让你执行操作或改变工具设定。
这个按钮只有在页面中包含多个 iframe 时才会显示。点击显示当前页面的 iframe 列表,选择你想操作的哪个。 | |
点击这个按钮来给当前页面截图。(注意:这个特性默认不会打开,只有在设置里开启,图标才会显示。) | |
切换至响应式布局设计。 | |
打开包括停靠模式、显示或隐藏分离式控制台和开发者工具设置的菜单。这个菜单还包括开发者工具的文档和 Mozilla 社区的链接。 | |
关闭开发者工具。 |
页面查看器
查看和编辑页面内容和布局。可视化页面的许多方面,包括盒子模型,动画和网格布局。
Web 控制台
查看由页面和 JavaScript 交互记录的信息
JavaScript 调试器
停止,浏览,检查和修改页面中运行的 JavaScript。
网络监视器
查看加载页面时的网络请求。
性能工具
分析网站的响应,JavaScript 程序和布局性能。
响应式设计模式
查看网站或 app 在不同终端和网络类型上的外观和行为。
无障碍环境
提供了一种访问页面的无障碍树的方法,允许你查看遗漏或需要注意的东西。
应用面板
提供现代web应用(或者叫改进web应用)预览和调试工具。包括服务工和web应用清单的预览。
注意:称呼开发者工具的 UI 的整体性的术语是 Toolbox(工具箱)。
更多工具
这些开发者工具也内置在 Firefox 中。但不像上面的“核心工具”一样常用。
- 内存
- 判断哪些对象正在使用内存。
- 存储查看器
- 查看存在于页面中的 cookie、本地存储、indexedDB 和 会话存储。
- DOM 属性查看器
- 检查页面上 DOM 属性,函数等。
- 页面取色器
- 从页面中选择一种颜色。
- 便笺
- Firefox 内置的文本编辑器,可让您编写和执行 JavaScript。
- 样式编辑器
- 查看和编辑当前页面的 CSS 样式。
- 着色器编辑器
- 查看和编辑 WebGL 使用的顶点和片段着色器。
- 网络音频编辑器
- 检查音频上下文中音频节点的图形,并修改其参数。
- 截图
- 对整个页面或单个元素的屏幕截图。
- 测量部分页面
- 测量网页的特定区域。
- 标尺
- 在网页上添加水平和垂直标尺的叠加层。
体验最新的开发者工具和特性,试一试 Firefox 开发者版本吧!
连接开发者工具
如果您使用快捷键或菜单打开开发者工具, 他们将定位由当前活动选项卡托管的文档。但是,你也可以将这些工具连接到其他目标上,无论是在当前的浏览器中,还是在不同的浏览器中,甚至是不同的设备上。
- 调试工具
- 调试在浏览器中运行的插件、内容页签及工作者线程。
- 连接到 Android 的 Firefox
- 将开发者工具连接到在 Android 设备上运行的 Firefox。
- 连接到 iframe
- 将开发者工具连接到当前页面中的特定iframe。
- 连接到其他浏览器
- 将开发者工具连接到 Android 上的 Chrome 和 iOS 上的 Safari。
调试浏览器
默认情况下,开发者工具将附加到网页或Web应用程序。 但是你也可以将它们连接到浏览器。 这对于浏览器和附加组件开发很有用。
扩展开发者工具
对于有关拓展 Firefox 开发者工具的信息,详见在 MDN 的浏览器拓展板块的拓展开发者工具。
从 Firebug 迁移
Firebug 已经寿终正寝(若想了解原因,请查看页面Firebug 存在于 Firefox 开发者工具),我们明白,迁移到一个不太熟悉的开发者工具是具有挑战性的。 为了简化从 Firebug 到 Firefox 开发者工具的转换,我们写了一个简便的指南 — Firebug 迁移。
贡献
如果你想帮助改进开发者工具,这些资源将帮助你入门。
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论