Google浏览器F12功能介绍

来源：互联网 2023-02-21 23:04:46 版权归原作者所有，如有侵权，请联系我们

对于java的Web开发人员，常常要进行界面的调试。使用F12调试工具能够很方便地进行调试，查看html元素，查看响应事件，本文就google浏览器的F12功能进行介绍。

Google浏览器F12功能介绍

方法/步骤

打开F12键之后，第一个tab页是Elements，我们称为页面元素，这里能查看页面的所有元素。

Google浏览器F12功能介绍

如果觉得某个页面样式很好，想要引用到自己的项目中，可以点击最左测的图标，然后将光标移动到你觉得好看的页面元素上。

Google浏览器F12功能介绍

2相关内容未经授权抓取自百度经验

第二个tab页是Console，我们称之为控制台，在我们调试程序的时候，如果出现bug问题，通常会在此进行展示，我们根据具体问题进行解决。

Google浏览器F12功能介绍

第三个tab页是Sources，我们称之为资源，这里是目前打开的界面所涉及的所有元素，包括图片、样式、js文件等。

Google浏览器F12功能介绍

第四个tab页也是我们经常使用的，查看页面请求加载的所有信息，包括css样式，图片还有一些http响应等。

Google浏览器F12功能介绍

如果想看XHR的请求，一般一些ajax响应，界面的url请求之类的都属于这一范畴，我们点击XHR即可，默认的是ALL，所有。

Google浏览器F12功能介绍

对于这些请求，我们可以分别点击这些事件，然后会看到有响应抬头（Headers）、预览（Preview）、响应（Response）等。

Google浏览器F12功能介绍

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！