使用Chrome谷歌浏览器开发者工具进行调试--2015-04-26

2022-02-02 01:23:40

主要介绍谷歌浏览器的使用，都是一些自己在工作中用到的技巧，不是很全面，希望可以帮到其他人。

1、打开Chrome开发者工具，总所周知的F12（火狐、IE9/10/11），可以看到如下效果。接下来分别介绍标红部分的内容。

2、第一个带搜索的工具，是用来选取网页上某一个或某一块的元素，然后查看、分析、学习。可以看到这个元素的详细信息和结构（父元素、浮动、颜色、字体大小、行高、外边距、无下划线等等），不看源代码时估计会认为这一块是是ul和li结构，原来不是（我觉得这样的结构比ul+li少很多代码）。

可以在右边的element.style{}中加一些样式，看看是不是想要的效果。比如我想让他高一点，宽度再加大一点，但是又不想影响他的同级元素的样式，那么就在这里写。

这里写的样式是实时的，写完后看是不是想要达到的效果，如果是，就把复制到具体的class、id上。当然，刷新一下就没有了。。。

如果想修改整个结构也是可以的，选中一块元素之后，点击右键，如下图:

开始撸代码：

<p>
  
  <a href="#" style="
    display: inline-block;
    background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
    width: 42px;
    height: 42px;
"></a><a href="#" style="
    display: inline-block;
    background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
    width: 42px;
    height: 42px;background-position:-60px 0
"></a>
  <a href="#" style="
    display: inline-block;
    background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
    width: 42px;
    height: 42px;background-position:-120px 0
"></a>
  <a href="#" style="
    display: inline-block;
    background: url(http://huaban.com/img/icons_login_fixbg.svg) 0 0 no-repeat;
    width: 42px;
    height: 42px;background-position:-180px 0
"></a>
</p>

其他的。。。

2、Network查看网页的网络请求信息

名称路径、请求方法(GET\POST)、状态码(从100~500，200表示成功)、类型（网页、图片、js文件等）、初始化、文件大小（浏览器一般都支持gzip压缩，一般有2个大小，小的是经过压缩后传输时的大小，大一些的是解压后的大小；这里没有大小的是来自浏览器缓存，因此对应的时间是0ms）、加载时间、时间线。