关于火狐浏览器开发者工具使用

ゝ一纸荒年。 2022-05-13 01:12 334阅读 0赞

**1.首先，按F12，打开火狐浏览器的调试工具，下面就是调试工具栏**  
![这是火狐浏览器的调试工具栏][SouthEast]  
　　*注意。。。因为调试基本上只用到前四个图标，所以在此，只介绍前四个*

**1、从页面中选择一个元素**  
![从页面中选择一个元素][SouthEast 1]  
　　鼠标点击这个图标之后，鼠标在页面上就可以选择元素了，点击选择的元素，就会迅速定位到该元素的代码上。当页面元素非常多的时候，用这个方法选择要找到的元素非常方便。

**2、查看器**  
![查看器][SouthEast 2]  
　　这个图标的功能是，显示web页面代码的结构，当鼠标在代码中移动到某个元素的上面时，web页面的这个元素就会高亮显示。

**3、控制台**  
![控制台][SouthEast 3]  
这个功能是非常重要的，必须会。  
1、一般调试的时候在代码中可以使用console.log(‘要输出的内容’)这条语句在控制台中查看输出，用于调试简单的错误。  
2、控制台页面是与当前打开的页面处于同一个环境的，也就是说，*当前页面的控制台只对当前页面有效，控制台可以看做是页面的js运行的一个延伸*。而且，控制台可以输入输出，也可以更改页面的显示。  
![控制台页面的主要功能][SouthEast 4]  
![这里写图片描述][SouthEast 5]  
如图，改变了页面的显示，函数声明这个地方，可能会根据浏览器的版本不同而输出有所不同。

**4、调试器**  
![调试器][SouthEast 6]  
重中之重！！！！  
![设置断点][SouthEast 7]  
上图表示如何设置断点

--------------------

![这里写图片描述][SouthEast 8]  
　　这是页面刷新之后，左上角的四个图标。  
　　第一个图标（F8），当你设置两个或两个以上的断点时，点击一下，直接运行到下一个断点。  
　　第二图标（F10），当点击这个图标时，相当于一个函数一个函数的执行  
　　第三个图标（F11），当点击这个图标时，相当于一步一步的执行。  
上述三个图标，经常一起用，用的时候观察右侧栏显示。  
点击添加监视表达式，将你需要监视的变量写进去，就可以了  
![这里写图片描述][SouthEast 9]  
**5、条件断点**  
　　在行数上鼠标右单击，选择添加条件断点，在弹出的输入框内输入条件，当符合条件时，断点停止执行。

转自

[https://blog.csdn.net/hshuaile/article/details/70610122][https_blog.csdn.net_hshuaile_article_details_70610122]

相关补充：

（转）浏览器开发人员工具使用初步图解

[https://blog.csdn.net/bcbobo21cn/article/details/51809666][https_blog.csdn.net_bcbobo21cn_article_details_51809666]

（转）浏览器开发者工具基本使用教程

[https://www.cnblogs.com/mojita/p/5769350.html][https_www.cnblogs.com_mojita_p_5769350.html]

（转）火狐浏览器Firefox查看网页源码

[https://jingyan.baidu.com/article/ed15cb1b4030741be36981ea.html][https_jingyan.baidu.com_article_ed15cb1b4030741be36981ea.html]

（转）火狐抓取页面图片

[https://jingyan.baidu.com/article/2a138328f7bcac074a134f24.html][https_jingyan.baidu.com_article_2a138328f7bcac074a134f24.html]

[SouthEast]: /images/20220513/ec092c5af408435f95923a78a4cd4746.png
[SouthEast 1]: /images/20220513/e963c90876664b10a78e5e1be4444c5f.png
[SouthEast 2]: /images/20220513/77f86594e8634bd8b6dfb10b389939c3.png
[SouthEast 3]: /images/20220513/8e75c864aeb74d8e837218d57f397702.png
[SouthEast 4]: /images/20220513/9460a1b6dc584a25a2c94c476e5e8be4.png
[SouthEast 5]: /images/20220513/99957ed855484d3784d3cf545df1895f.png
[SouthEast 6]: /images/20220513/3ee82a9101e849248f40423406def436.png
[SouthEast 7]: /images/20220513/af27d6e76cce4520ba02d63f2259b001.png
[SouthEast 8]: /images/20220513/953c869f79f14a21a3f5668025924b9d.png
[SouthEast 9]: /images/20220513/5f4ac93e11fd4e77913f68f3ec892263.png
[https_blog.csdn.net_hshuaile_article_details_70610122]: https://blog.csdn.net/hshuaile/article/details/70610122
[https_blog.csdn.net_bcbobo21cn_article_details_51809666]: https://blog.csdn.net/bcbobo21cn/article/details/51809666
[https_www.cnblogs.com_mojita_p_5769350.html]: https://www.cnblogs.com/mojita/p/5769350.html
[https_jingyan.baidu.com_article_ed15cb1b4030741be36981ea.html]: https://jingyan.baidu.com/article/ed15cb1b4030741be36981ea.html
[https_jingyan.baidu.com_article_2a138328f7bcac074a134f24.html]: https://jingyan.baidu.com/article/2a138328f7bcac074a134f24.html