文件大小:53.39 MB  文件版本:V 0.0.117

本地下载 官方下载 本地下载

当前位置: 首页 >  浏览器教程 > 常见问题 > 如何使用 Web 浏览器开发工具?

如何使用 Web 浏览器开发工具?

2022-05-12 17:35:32    来源:浏览器部落    作者:admin

      除了大多数浏览器制造商专注于希望上网的日常用户之外,他们还迎合网络开发人员、设计师和质量保证专业人员,他们通过将强大的工具直接集成到浏览器中来帮助构建这些用户正在访问的应用程序和网站他们自己。

  在浏览器中找到的唯一编程和测试工具允许您查看页面源代码的日子已经一去不复返了。今天的浏览器让你可以通过执行和调试JavaScript片段、检查和编辑 DOM 元素、在应用程序或页面加载时监控实时网络流量以识别瓶颈、分析 CSS 性能、确保你的代码是不使用过多的内存或过多的 CPU周期等等。

  从测试的角度来看,您可以通过响应式设计和内置模拟器的魔力重现应用程序或网页在不同浏览器以及不同设备和平台上的呈现方式。最好的部分是您无需离开浏览器即可完成所有这些操作!

  下面的教程将引导您了解如何在几种流行的Web浏览器中访问这些开发人员工具。

Web 浏览器开发工具

  谷歌浏览器

  Chrome开发人员工具允许您编辑和调试代码、审核单个组件以暴露性能问题、模拟不同的设备屏幕(包括运行 Android 或iOS 的设备屏幕)以及执行其他一些有用的功能。

  1、选择 Chrome 的主菜单,标有三条横线,位于浏览器的右上角。

  2、出现下拉菜单时,将鼠标光标悬停在更多工具选项上。

  3、现在应该出现一个子菜单。选择标记为Developer tools的选项。您还可以使用以下键盘快捷键代替此菜单项:Chrome OS/Windows ( CTRL+SHIFT+I )、Mac OS X ( ALT(OPTION)+COMMAND+I )

  4、现在应该会显示 Chrome 开发人员工具界面,如此示例屏幕截图所示。根据您的 Chrome 版本,您看到的初始布局可能与此处显示的略有不同。开发人员工具的主要中心,通常位于屏幕的底部或右侧,包含以下选项卡。

  5、除了这些部分,您还可以通过位于“性能”选项卡右侧的>>图标访问以下工具。

  内存: 监控和记录网页上的内存使用情况。您可以看到您网站上的 JavaScript 有多么繁重。

  安全性:突出显示活动页面或应用程序的证书问题和其他与安全相关的问题。

  应用程序: 检查 Web 应用程序正在使用的资源。获取正在使用的内容的完整细分。

  审计:提供优化页面或应用程序的加载时间和一般性能的方法。

  6、设备模式允许您在模拟器中查看活动页面,该模拟器几乎可以将其呈现在十多种设备中的一个上,其中包括一些著名的 Android 和 iOS 型号,例如 iPad、iPhone 和三星 Galaxy。您还可以模拟自定义屏幕分辨率以满足您的特定开发或测试需求。

  要打开和关闭设备模式,请选择直接位于元素选项卡左侧的手机图标。

  7、您还可以通过首先选择由三个垂直放置的点表示并位于上述选项卡最右侧 的菜单按钮来自 定义开发人员工具的外观。

  在此下拉菜单中,您可以重新定位停靠栏、显示或隐藏不同的工具以及启动更高级的项目。

  火狐浏览器

  Firefox 的 Web 开发人员部分包括供设计人员、开发人员和测试人员使用的工具,例如样式编辑器和像素定位滴管。

  1、选择 Firefox 的主菜单,由三条水平线表示,位于浏览器窗口的右上角。

  2、出现下拉菜单时,选择Web Developer

  3、现在应该显示Web Developer 菜单其中包含以下选项。您会注意到大多数菜单项都有与之关联的键盘快捷键。

  切换工具:显示或隐藏开发者工具界面,通常位于浏览器窗口的底部。键盘快捷键:Mac OS X ( ALT(OPTION)+COMMAND+I )、Windows ( CTRL+SHIFT+I )

  检查器:允许您通过远程调试检查和/或调整活动页面以及便携式设备上的 CSS 和 HTML 代码。键盘快捷键:Mac OS X ( ALT(OPTION)+COMMAND+C )、Windows ( CTRL+SHIFT+C )

  Web 控制台:允许您在活动页面中执行 JavaScript 表达式,并查看各种记录的数据,包括安全警告、网络请求、CSS 消息等。键盘快捷键:Mac OS X ( ALT(OPTION)+COMMAND+K )、Windows ( CTRL+SHIFT+K )

  调试器:JavaScript 调试器允许您通过设置断点、检查 DOM 节点、黑盒外部源等等来查明和修复缺陷。与Inspector一样,此功能也支持远程调试。键盘快捷键:Mac OS X ( ALT(OPTION)+COMMAND+S )、Windows ( CTRL+SHIFT+S )

  样式编辑器:允许您创建新样式表并将它们与活动网页合并,或编辑现有表并测试您的更改如何在浏览器中一键呈现。键盘快捷键:Mac OS X、Windows ( SHIFT+F7 )

  性能:提供活动页面的网络性能、帧速率数据、JavaScript 执行时间和状态、油漆闪烁等的详细细分。键盘快捷键:Mac OS X、Windows ( SHIFT+F5 )

  网络:列出浏览器发起的每个网络请求以及相应的方法、源域、类型、大小和经过的时间。键盘快捷键:Mac OS X ( ALT(OPTION)+COMMAND+Q )、Windows ( CTRL+SHIFT+Q )

  存储检查器: 查看网站存储的缓存和 cookie。键盘快捷键:(SHIFT+F9)

  开发人员工具栏:打开交互式命令行解释器。在解释器中输入帮助以获取所有可用命令及其正确语法的列表。键盘快捷键:Mac OS X、Windows ( SHIFT+F2 )

  WebIDE:提供通过运行 Firefox OS 的实际设备或通过 Firefox OS Simulator 创建和执行 Web 应用程序的能力。键盘快捷键:Mac OS X、Windows ( SHIFT+F8 )

  浏览器控制台:提供与Web 控制台相同的功能(见上文)。但是,所有返回的数据都是针对整个 Firefox 应用程序(包括扩展和浏览器级功能),而不仅仅是活动网页。键盘快捷键:Mac OS X ( SHIFT+COMMAND+J )、Windows ( CTRL+SHIFT+J )

  响应式设计视图:允许您以不同的分辨率、布局和屏幕尺寸即时查看网页,以模仿包括平板电脑和智能手机在内的多种设备。键盘快捷键:Mac OS X ( ALT(OPTION)+COMMAND+M )、Windows ( CTRL+SHIFT+M )

  吸管:显示单独选定像素的十六进制颜色代码。

  Scratchpad:Scratchpad让您可以在弹出的 Firefox 窗口中编写、编辑、集成??和执行 JavaScript 代码片段。打开一个交互式 JavaScript 文档,您可以在其中编写代码并针对网站进行测试。键盘快捷键:(SHIFT+F4)

  Service Worker : 调试您的 Web 应用程序的 Service Worker。获取有关其性能和错误的详细信息。

  Page Source:原始的基于浏览器的开发工具,此选项仅显示活动页面的可用源代码。键盘快捷键:Mac OS X ( COMMAND+U )、Windows ( CTRL+U )

  获取更多工具:在 Mozilla 的官方插件站点上打开Web Developer 的工具箱集合,其中包含大约十几个流行的扩展,例如 Firebug 和Greasemonkey。

  微软边缘/Internet Explorer

  通常被称为F12 开发人员工具,这是对自 Internet Explorer 早期版本以来启动界面的键盘快捷键的致敬,IE11 和 Microsoft Edge 中的开发工具集自推出以来已经取得了长足的进步,提供了一组非常方便的监视器、调试器、仿真器和动态编译器。

  1、选择更多操作,由三个点表示,位于浏览器窗口的右上角。

  2、当下拉菜单出现时,选择标签为Developer Tools的选项。

  3、现在应该显示开发界面,通常在浏览器窗口的底部。可以使用以下工具,每个工具都可以通过单击各自的选项卡标题或使用随附的键盘快捷键来访问。

  DOM Explorer:允许您在活动页面中编辑样式表和 HTML,随时呈现修改后的结果。在适用的情况下利用 IntelliSense 功能自动完成代码。键盘快捷键:(CTRL +1)

  控制台:提供通过集成 API 提交调试信息的能力,包括计数器、计时器、跟踪和自定义消息。此外,您还可以将代码注入活动网页并实时修改分配给各个变量的值。键盘快捷键:(CTRL +2)

  调试器:允许您在代码执行时设置断点并调试代码,必要时逐行调试。键盘快捷键:(CTRL +3)

  网络:列出在页面加载和执行期间由浏览器发起的每个网络请求,包括协议详细信息、内容类型、带宽使用情况等等。键盘快捷键:(CTRL +4)

  性能:详细说明帧速率、CPU 利用率和其他与性能相关的指标,以帮助您加快页面加载时间和其他活动。键盘快捷键:(CTRL +5)

  内存:通过显示内存使用时间线以及来自不同时间间隔的快照,帮助您隔离和纠正当前网页上的潜在内存泄漏。键盘快捷键:(CTRL +6)

  模拟:向您展示活动页面如何以各种分辨率和屏幕尺寸呈现,模拟智能手机、平板电脑和其他设备。它还提供了修改用户代理和页面方向的能力,以及通过输入纬度和经度来模拟不同的地理位置。键盘快捷键:(CTRL +7)

  4、要在任何其他工具中显示控制台,请按位于开发工具界面右上角的带有右括号 的方形按钮。

  5、要取消停靠开发人员工具界面使其成为一个单独的窗口,请选择两个级联矩形或使用以下键盘快捷键:CTRL+P。您可以通过再次按CTRL+P将工具放回其原始位置。

  • 本文关键词:
  • Web 浏览器
  • 开发工具
标签:
程序

本站发布的资源与软件仅为个人学习测试使用,请在下载后24小时内删除,不得用于任何商业用途,否则后果自负,请支持或者购买正版!

如侵犯到您的权益,请及时通知我们,我们会及时处理,对系统之家有任何投诉或建议,请与管理员联系. 邮箱:17587008659@163.com

Copyright©2011 浏览器部落(www.liulanqibuluo.com) 版权所有 闽ICP备2022006079号-1