笔者演示火狐浏览器调试工具详细操作方法。

刚入手火狐浏览器的用户,大概对调试工具还不清楚,现在就跟着归来教程小编一起来看一下火狐浏览器调试工具详细操作方法吧。

火狐浏览器调试工具详细操作方法

火狐浏览器调试工具详细操作方法

先打开火狐浏览器的调试工具,下面就是调试工具栏

火狐浏览器调试工具详细操作方法

因为调试基本上只用到前四个图标,所以在此,只介绍前四个

1、从页面中选择一个元素

鼠标点击这个图标后,鼠标在页面上就可以选择元素,点击选择的元素,就会迅速定位到该元素的代码上。当页面元素非常多时,用这个方法选择要找到的元素非常方便。

2、查看器

这个图标的功能是,显示web页面代码的结构,当鼠标在代码中移动到某个元素的上面时,web页面的这个元素就会高亮显示。

3、控制台

一般调试时在代码中能使用console.log(‘要输出的内容’)这条语句在控制台中查看输出,用于调试简单的错误。

控制台页面是与当前打开的页面处于同一个环境的,也就是说,当前页面的控制台只对当前页面有效,控制台能看做是页面的js运行的一个延伸。而且,控制台可以输入输出,也可更改页面的显示。

火狐浏览器调试工具详细操作方法

火狐浏览器调试工具详细操作方法

如上图,改变了页面的显示,函数声明这个地方,可能会根据浏览器的版本不同而输出有所不同。

4、调试器

火狐浏览器调试工具详细操作方法

设置断点

火狐浏览器调试工具详细操作方法

这是页面刷新后,左上角的四个图标。

第一个图标(F8),当你设置两个或两个以上的断点时,点击一下,直接运行到下一个断点。

第二图标(F10),当点击这个图标时,相当于一个函数一个函数的执行

第三个图标(F11),当点击这个图标时,相当于一步一步的执行。

上述三个图标,经常一起用,用时观察右侧栏显示。

点击添加监视表达式,将你需监视的变量写进去即可

火狐浏览器调试工具详细操作方法

5、条件断点

在行数上鼠标右单击,选择添加条件断点,在弹出输入框内输入条件,当符合条件时,断点停止执行。

以上就是火狐浏览器调试工具详细操作方法,大家都学会了吧。

本文来自投稿,不代表归来教程立场,如若转载,请注明出处:https://www.guiqulai.com/249802.html

(0)
上一篇 2024年11月14日 19:25
下一篇 2024年11月14日 19:28

相关推荐

  • 我来分享3Ds。

    当前不少网友表示自己才接触3DsMAX这款应用,还不晓得如何使用晶格命令的操作,接下来就为你们分享使用晶格命令的操作流程,大家都来一起学习吧。 3Ds MAX使用晶格命令的简单方法…

    2024年11月11日 PC教程
    01.9K
  • 5e对战平台怎么改名字。

    有的小伙伴不知道5e对战平台怎么改名字,下面归来教程小编就为大家详细的介绍一下方法,想知道的话就来看看吧,相信一定会帮到你们的。 5e对战平台怎么改名字?5e对战平台改名字方法 1…

    2024年12月18日 PC教程
    02.0K
  • 小编教你解决千月蓝牙驱动BlueSoleil怎么卸载。

    近日有一些小伙伴咨询归来教程小编关于千月蓝牙驱动BlueSoleil怎么卸载呢?下面就为大家带来了千月蓝牙驱动BlueSoleil卸载方法,有需要的小伙伴可以来了解了解哦。 千月蓝…

    2024年11月30日 PC教程
    0418
  • 小编为你叙述vivoZ3x查看被拦截短信的具体操作步骤。

    今日就快来学习本文vivoZ3x中查看被拦截短信操作过程吧,相信在以后的使用中一定会得心应手的,一起来看看吧! vivoZ3x查看被拦截短信的具体操作步骤 桌面上找到“i管家”AP…

    2024年11月12日 PC教程
    0361
  • 我来分享旗鱼浏览器设置静音的基础操作。

    对于旗鱼浏览器设置静音的基础操作有不少网友问过,归来教程小编今天就带来了关于旗鱼浏览器设置静音的操作方法,一起好好学习下吧! 旗鱼浏览器设置静音的基础操作 1、在计算机桌面“旗鱼浏…

    2024年10月29日 PC教程
    01.5K
  • 分享Adobe。

    你们知道怎样使用Adobe photoshop CS5将图片转换为PDF文件吗?下文就是Adobe photoshop CS5将图片转换为PDF文件的操作方法,希望大家喜欢。 Ad…

    2024年12月17日 PC教程
    0476
  • 我来教你edius制作字幕激光效果的图文方法。

    一些用户们在使用edius的时候,不是很熟悉其中是怎么制作字幕激光效果?今日这篇文章就带来了edius制作字幕激光效果的图文方法。 edius制作字幕激光效果的图文方法 在时间线轨…

    2024年11月27日 PC教程
    01.2K
  • 技术编辑操作excel图案样式怎么设置。

    excel表格是我们在工作中经常需要使用的一种办公工具,为方便表格查看,可能需要对某些单元格设置图案样式,那excel图案样式怎么设置?下面归来教程小编给大家介绍一下excel设置…

    2024年12月1日
    0940
  • 电脑公司解答暴风影音导入本地视频的具体步骤。

    亲们入手暴风影音了吗?晓得导入本地视频的方法吗?下面就分享有关暴风影音导入本地视频的具体步骤,希望有需要的朋友都来共同学习哦。 暴风影音导入本地视频的具体步骤 我们需要先将暴风影音…

    2024年11月7日 PC教程
    01.8K
  • 怎么修复dwg格式文件怎么打开。

    什么是dwg格式文件? 百科解读:DWG是设计软件AutoCAD以及基于AutoCAD的软件保存设计数据所用的一种专有文件格式,即文件扩展名为DWG的文件。DWG文件格式由欧特克公…

    2024年11月18日
    01.9K