我来教你火狐浏览器调试工具详细操作方法

相信很多朋友都遇到过以下问题,就是火狐浏览器调试工具详细操作方法。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个火狐浏览器调试工具详细操作方法的解答。希望看完这个教程之后能够解决大家火狐浏览器调试工具详细操作方法的相关问题。

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

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

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

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

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

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

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

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

2、查看器

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

3、控制台

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

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

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

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

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

4、调试器

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

设置断点

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

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

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

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

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

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

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

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

5、条件断点

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

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

本文来自投稿,不代表乐一笑立场,如若转载,请注明出处:https://www.leyixiao.com/534996.html

(0)
上一篇 2022年7月12日 01:04:23
下一篇 2022年7月12日 01:04:30

相关推荐

  • 我来分享wps表格怎样快速插入文字

    相信很多朋友都遇到过以下问题,就是wps表格怎样快速插入文字 wps表格快速插入文字的详细步骤。。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个wps表格怎样快速插…

    2022年8月4日
    090
  • 小编教你系统之家装win7系统步骤。

    系统之家一键重装工具这款软件已经出品一段时间了,系统之家一键重装工具操作简单方法,对于电脑新手还是电脑大神来说都是无可挑剔的,下面就给大家介绍下系统之家装win7系统步骤: 1.下…

    2022年8月31日
    0160
  • 小编教你电脑怎么打开AI文件。

    首先打开photoshop软件。 新建一个空白图层或者打开一张图片,图片是新建一个空白图层的。 选择路径:文件,选择:置入。 选择AI或者eps格式的图形图片。 最后,AI或者ep…

    2022年9月3日
    0100
  • 我来分享好用的p图软件有哪些

    相信很多朋友都遇到过以下问题,就是好用的p图软件有哪些。。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个好用的p图软件有哪些。的解答。希望看完这个教程之后能够解决大…

    2022年8月23日
    0110
  • 小编教你putty怎么退出全屏

    相信很多朋友都遇到过以下问题,就是putty怎么退出全屏 putty退出全屏方法。。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个putty怎么退出全屏 putty…

    2022年8月8日
    0140
  • 快速复制360图书馆中文章的操作步骤。

    如果你还不会使用360图书馆快速复制文章的话,就来下文学习学习利用360图书馆快速复制文章的操作步骤吧,希望可以帮助到大家。 快速复制360图书馆中文章的操作步骤 只要一个代码,我…

    2022年5月17日
    090
  • 我来分享360驱动大师显卡升级具体方法

    相信很多朋友都遇到过以下问题,就是360驱动大师显卡升级具体方法。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个360驱动大师显卡升级具体方法的解答。希望看完这个教…

    2022年7月2日
    0100
  • 小编教你PPT创建垂直蛇形流程图的操作内容

    相信很多朋友都遇到过以下问题,就是PPT创建垂直蛇形流程图的操作内容。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个PPT创建垂直蛇形流程图的操作内容的解答。希望看…

    2022年7月29日
    0100
  • 我来分享Win11

    相信很多朋友都遇到过以下问题,就是Win11 dns服务器错误怎么解决。。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个Win11 dns服务器错误怎么解决。的解答…

    2022年8月20日
    0150
  • 分享Adobe Photoshop等距离复制的操作方法

    相信很多朋友都遇到过以下问题,就是Adobe Photoshop等距离复制的操作方法。针对这个问题,今天乐一笑小编就搜集了网上的相关信息,给大家做个Adobe Photoshop等…

    2022年7月13日
    090