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

操作方法

  • 01

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

  • 02

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

    Google浏览器F12功能介绍-编程知识网

  • 03

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

    Google浏览器F12功能介绍-编程知识网

  • 04

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

    Google浏览器F12功能介绍-编程知识网

  • 05

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

  • 06

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

  • 07

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