小编分享火狐浏览器调试工具详细操作方法。

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

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

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

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

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

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

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

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

2、查看器

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

3、控制台

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

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

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

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

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

4、调试器

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

设置断点

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

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

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

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

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

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

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

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

5、条件断点

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

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

本文来自投稿,不代表手机方法网立场,如若转载,请注明出处:https://www.welqi.com/253805.html

(0)
春天春天
上一篇 2024年6月13日 10:47
下一篇 2024年6月13日 10:47

相关推荐

  • 今天分享Vscode怎么设置格式模板。

    使用Vscode编程时,不提前设置好格式模板的话,每次的代码格式输入都需要重新编辑。不清楚怎么设置的小伙伴,一起来看看下面的教程吧! Vscode怎么设置格式模板?Vscode设置…

    2024年9月15日
    000
  • 说说2345看图王为多个图片或图文件重命名的操作教程方法。

    如果你还不会操作将2345看图王转多个图片或图文件重命名的话,就来下文学习学习2345看图王为多个图片或图文件重命名操作步骤吧,希望可以帮助到大家。 2345看图王为多个图片或图文…

    2024年6月9日
    020
  • 分享Office。

    今天给大家讲的是Office 2010安装时提示1406出错的设置方法,对Office 2010感兴趣的同学们就一起学习下具体方法吧! Office 2010安装时提示1406出错…

    2024年6月9日
    020
  • 小编分享金税三期个税所得税的申报流程详解。

    本教程主要给各位亲们讲解了金税三期个税所得税的申报流程操作步骤,需要了解的亲们可以一起去看看下文金税三期个税所得税的申报流程详解,希望能够帮助到大家。 金税三期个税所得税的申报流程…

    2024年5月21日
    020
  • 关于wps。

    大家在工作中经常会使用ppt幻灯片来汇报工作,那么怎么在ppt幻灯片中插入彩色条形图呢,下面手机方法网小编给大家整理了相关步骤介绍,感兴趣的小伙伴不要错过哦! wps ppt幻灯片…

    2024年7月19日
    010
  • 我来分享搜狗输入法打不出中文的详细处理操作。

    大家知道搜狗输入法为什么打不出中文吗?下文手机方法网小编就带来了搜狗输入法打不出中文的详细处理操作,一起来看看吧! 搜狗输入法打不出中文的详细处理操作 方法一:按一下键盘上的“Sh…

    2024年4月26日
    020
  • 我来分享百度卫士修复漏斗的基础操作。

    刚入手百度卫士这款应用的朋友,还不太了解修复漏斗的基础操作,手机方法网小编今天就带来百度卫士修复漏斗的操作方法,感兴趣的小伙伴们一起学习一下吧! 百度卫士修复漏斗的基础操作 打开百…

    2024年4月20日
    030
  • 小编教你word文档快速批量删除英文而只保留中文的操作方法。

    今天手机方法网小编讲解了word文档怎样快速批量删除英文而只保留中文操作步骤,下文就是关于word文档快速批量删除英文而只保留中文的操作方法,一起来学习吧! word文档快速批量删…

    2024年6月18日
    020
  • 分享apploc的使用方法介绍。

    刚入手apploc的用户,不清楚apploc的使用方法?现在就跟着手机方法网小编一起来看一下apploc的使用方法介绍吧。 apploc的使用方法介绍 1.先安装Microsoft…

    2024年5月10日
    020
  • 我来分享几何画板度量三角形的面积的详细教程方法。

    今天手机方法网小编就带大家来共同学习几何画板度量三角形的面积的详细教程?希望可以帮助到有需要的小伙伴哦,下面就是详细完整的操作步骤。 几何画板度量三角形的面积的详细教程 步骤一 绘…

    2024年6月17日
    040