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

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

1、打开Chrome开发者工具,总所周知的F12(火狐、IE9/10/11),可以看到如下效果。接下来分别介绍标红部分的内容。使用Chrome谷歌浏览器开发者工具进行调试--2015-04-26

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

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

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

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

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

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

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

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

开始撸代码:

<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>


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

其他的。。。

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

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

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

这里是输入www.baidu.com之后,一个请求的部分信息,可以从这里看出加载一个首页需要的各种资源,以及加载资源的情况。这些信息都是做性能优化的根据,通过观察和分析,找出页面的性能瓶颈在哪里,然后进行针对的优化。

2.1 Headers -- 请求头 -- 不了解的请搜索:HTTP header,进行深入的学习

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

这里的headers不仅有请求的header还有响应的header,可以看出,下载一个JS文件是从IP为60.190.116.32上的443端口,GET方式下载的,这是百度的CDN离我最近的服务器,网址是一长串的https安全连接地址。。。。。。响应头。。。。。

2.2预览和响应 -- 从网络上下载的文件 -- 看起来都是相同的

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


百度一下“百度”,看看结果:

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

中文经过了URLEncode,地址竟然是http://sp0.baidu.com/,访问一下和访问www.baidu.com是一样的。。。那么结果:

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

一看就知道,搜索结果前几条肯定是百度云相关的。。。通过查看Response响应结果,可以判断服务是否正常,返回结果是否正确。

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

上图是返回的JSON数据,在平时的开发中,前后台分工协作时,前台调用后台的服务接口,后台接口有没有返回正确的数据,都是通过这里来查看的。


3、Sources资源 -- 查看网站资源,换个没压缩、没混淆的网站ctrip看下效果

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

资源都在这里,看中哪个点右键另存为,回家慢慢看。。。注册的asp页面的源码如下:

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

作为一个前端入门菜鸟,看网站如何布局、如何写代码也是一种自我提高的方式。我觉得他这个密码强度验证的效果不错,我也想做一个,怎么办呢?点击sources看人家怎么写的,然后。。。

先看结构:dl - dt - dd > ul - li + div ,强度就是li元素,JS代码在哪里?

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

在这里:

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

骚年好好学啊~~~

JS加个断点,调试调试?

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

点击要断点的行号,然后就开始debug了。。。按F8、F10

最右边还有哦

使用Chrome谷歌浏览器开发者工具进行调试--2015-04-26看到Local里的sPW了吧,那就是刚刚输入的值,要验证判断就是他了



上一篇:Mybatis结果集自动映射


下一篇:Xcode快捷键 高效必记