轻松玩转chrome开发者模式.pdfVIP

轻松玩转chrome开发 者⼯具 author ：极昼空间 E-mail ：abbottzjz@ 微博：/2769629013 qq群：477908428 
 1 前⾔： 之前想说的挺多的，到写的时候却⼀句话都想不起来了，（囧）就 先聊聊我为什么要写这篇教程吧。 之所以写这篇教程，⼀是在前端学习之路上受过和多⼈的帮助， 或见过⾯的，或没见过⾯的，他们都很热⼼的⽆私的帮助过我，这让我 很感动，也很感激。这让我萌⽣了在别⼈碰到问题时如果我会的话也尽 量取帮助别⼈的想法。另⼀⽅⾯觉得写教程（书）是⼀件很⾼⼤上的 事，也是这个原因让我坚持写完本教程（虽然不多，但这是第⼀次 写，，所以很累⼈。。写的有神马不⾜之处请见谅。。）。希望和我交 流前端的⼩伙伴可以通过上⾯的联系⽅式联系我（^_^）。 本教程适⽤于想了解chrome开发者⼯具或刚刚学前端部了解chrome 开发者⼯具的⼩伙伴，已精通chrome开发者⼯具或前端开发⼤⽜请⾃ 动忽视本教程（但是你愿意看并且愿意审核本教程就更好了^_^）。 嗯，，⽬前想说的就这么多了，就这样吧(^_^) ，匿了。。(*/ω ＼*) 2 ⽬录： 1.为什么学习chrome开发者⼯具…………………4 1.1为什么学习chrome开发者⼯具4 1.2如何打开chrome开发者⼯具4 2.玩转chrome开发者⼯具6 2.1认识chrome开发者⼯具6 2.2.Elements…………………………………………………………………………………..6 2.3.Network………………………………………………………………………………… 10 2.4.Sources…………………………………………………………………………………. 14 2.5.Timeline………………………………………………………………………………… 16 2.6.profile…………………………………………………………………………………… 17 2.7.Resources……………………………………………………………………………….. 17 2.8.Audits…………………………………………………………………………………… 17 2.9.Console………………………………………………………………………………….. 18 2.10移动页⾯开发模式21 3.chrome开发者⼯具的⼀些⼩技巧26 4.我的建议，前端学习之路29 5.后记——关于前端，我的⼀点随想30 6.附录：参考资料31 3 第⼀章 为什么学习chrome开发者⼯具 1.1 为什么学习chrome开发者⼯具 ⾃从html5与Google的v8引擎推出以来，前端技术发展迅猛，⽆论 是在现代浏览器或者在hybird app 、webapp中都表现得⼤放异彩，各 种前端框架技术也如⾬后春笋⼀半成长起来，吸引了⽆数前端开发者甚 ⾄其他⼈员的眼球。甚⾄我国电商巨头阿⾥与国际开源组织Mozilla都 推出了基于⽹络作业环境的操作系统——YunOS与Firefox OS 。在csdn 上的《速来膜拜！20位活跃在Github上的国内技术⼤⽜》（1）中，有⼀ 多半的⼤⽜都在从事前端或与前端相关的⼯作，由此可见前端的⽕热程 度与良好的发展前景。在此之上，前端开发⼯程师对开发页⾯过程中调 试的需求也越来越强烈，因此，继firebug之后，笔者认为⽬前最强⼤的 前端调试⼯具chrome开发者⼯具诞⽣了。笔者出学前端不知道chrome 开发者⼯具是调试⽹页很痛苦，就是⾁眼侦查找错误，当认识了 chrome开发者⼯具之后瞬间爱上了它，所以分享出来以供新的前端学 习者学习chrome开发者⼯具。 1.2如何打开chrome开发者⼯具 在介（chui）绍（xu）了chrome开发者⼯具的强⼤之后，下⾯我们 来看看怎么打开者⼀款强⼤的开发测试⼯具。 （1）在windows和linux中，按Control - Shift - i ，或者直接在 windows中按f12 （linux下笔者没试过f12 ，，汗。。）；在OS X下直接 按下command+option+I ； ————————