HTML5基础——11、Chrome浏览器调试工具

  大家好，我是阿赵。
  之前学习了很多H5的标签和css相关的内容，接下来学习使用一个Chrome浏览器的调试工具，方便我们去观察别人的网站。
  首先我们需要安装谷歌的Chrome浏览器。
  然后随便找一个网页打开，比如：hao1233

  然后按F12，就可以打开调试工具：

  首先看这个选择工具 ：

  在选择工具的状态下，我们可以直接选中网页里面的某个元素：

  首先在上面会显示这个元素的简单的属性
  然后在下面的元素页签里面会显示具体的html页签代码：

  下面还有这个元素的css属性。
  在计算样式里面，可以看到这个元素的布局边距：

  在控制台页签里面，可以看到打开这个页面之后的日志输出：

  还可以通过其他页签观察网页的性能：

  很多工具都是需要在之后学习了JavaScript之后，才会用到。这里我们可以通过这个工具，观察别人的Html标签使用，还有CSS布局的使用。甚至可以在网页上面进行一些修改，直接观察结果，比如：

  我通过选择工具，选中了左上角的一个图片显示元素，发现现在的宽高是120x33的，我在下面直接修改：

  这时候，会发现网页上面的内容也立刻变化了：

  这个工具就很方便我们调试各种效果。比如我们如果不确定一个css样式或者布局的效果，我们可以先写出来，并且在运行的过程中使用这个调试工具，并且动态的修改值，并且观察效果的变化，然后把自己认为满意的结果记录下来，修改源码。