【全球 GDG 比赛】Discover Chrome DevTools

夜尽巫师

原文貌似是这样的：
Encourage your GDG members to take the this new interactive course and share their badges with the hashtags #gdg #yourchapter #chromedevtools. The GDG chapter with the most course completion badges will get a sponsored “party” with a special greeting from +Paul Irish. Contest ends April 30th.

大概意思就是看哪个 GDG 的成员完成这个叫做 Discover Chrome DevTools 课程的人数多，完成Discover Chrome DevTools 课程人数最多的一个城市将获得特别奖励！。

【参与方法】
请各位 GDGer 去 CodeSchool 上完成 Discover Chrome DevTools 课程，完成后分享到 G+ 上并加上 #gdg #gdgshanghai #chromedevtools 这三个 tag。
课程的地址请戳这里：http://discover-devtools.codeschool.com/
截止日期是 4 月 30 日，大家抓紧时间刷起来了！

完成后请到 https://www.codeschool.com/account/prizes 这个页面，如下图：
  

然后找到自己的获得徽章，并点击那个大徽章：
  

之后会看到这个页面，g+1 之后在分享的内容里加上 #gdg #gdgshanghai #chromedevtools 这三个 tag 就行了：
  

分享后的是这个样子的：
  

再贴一个分享后的样子：
  


作为上海的 GDGer 自然要刷一把的对不对！


我已经完成了这个课程，拿到了徽章并分享成功，在这里和大家分享一下我的体会吧~（我会说其实我在看到这个比赛前就已经完成了么 = =）
  
我觉得这个页面设计的挺舒服的，当时就是因为觉得设计的好看就顺便把课程完成了。。

其实完成这个课程很快，不需要花多少时间，我是半个下午搞定的（因为那些 Challenge 都很简单 =v=）
在进去的页面上可以看到这个课程一共含 17 个视频，75 个以上的实验（这里的 Challenge 就是实验），以及 8 个徽章。
学习的过程就是先看一段视频，然后完成 5 个左右的实验，再看一段视频，再 5 个左右的实验，如此循环。

这个课程分成 7 个 level，分别是：

level 1：使用 Dev Tools 调试基本的 DOM 元素和 CSS      // 使用 elements 中的功能，查看页面中的元素，临时修改一下元素和样式
level 2：调试 DOM 和 CSS 一些进阶技巧                          // 使用 source 中的功能，可以对修改过的元素或样式行进保存
level 3：使用 Dev Tools 中的控制台                                 // 在控制台中输出信息
level 4：在 Dev Tools 中调试 Javascript                           // 调试 js，加断点，处理异常等
level 5：提升页面的网络传输性能                                    // 使用 Dev Tools 中的 Network 功能，查看哪些文件加载的比较慢并进行改进
level 6：改进前端性能                                                      // 使用 Dev Tools 中的 Timeline 和 Profiles 查看页面的 js 执行速度，css 渲染速度等并找出速度慢的加以改进
level 7：剖析内存                                                             // 使用 Profiles 来对内存进行分析，可以找出页面是否有内存泄露

这些内容中 Level 1 我之前是一直在用的，不过从 Level 6 开始的功能就没用过了，学习之后发现原来用 Dev Tools 查找性能上的缺陷是那么方便的 =v=，具体怎么查课程里讲的很清楚，大家一学就会。
PS：注释部分是在下自己对于这些 level 内容的理解，如果有什么不对的地方还希望各位高手指正。

当你每完成一个 level，就会获得相应的徽章，完成全部 level，就能获得一个 Dev Tools 的最终徽章


全部完成课程以后会跳到恭喜你完成了课程的页面，之后请按照上面所说的方式进行分享就能为 上海 GDG 在本次比赛中做出贡献啦！
PS：感谢康爷指出正确的分享方式，之前的方式是错误的，已经更正。


个人感想，整个课程学起来很有趣，因为先看看视频，然后做一些很简单的实验，实验的内容视频里都有，你只需要照着做一遍，自己动手用过 Dev Tools 中的一些功能后就能理解了。而且所有的视频和文档都是可以下载的，虽然视频是英文的，不过语速并不快，再配上画面和图片，基本都能听懂。如果不是这个比赛，我也非常推荐大家去学习一下这个课程~！

PS：其实 CodeSchool 还有其他蛮有趣的课程，都是视频 + 实验的模式，我自己也完成了一些其他课程，这个网站挺不错的，推荐各位在完成这个课程以后也可以看看其他的课程

mars880419

作为上海GDG 的成员、赞一个！