SegmentFault 技术周刊 Vol.15 - “一天精通 Chrome 开发”

1,557 阅读3分钟
原文链接: segmentfault.com

遍历 Web 浏览器的发展史,有两个非常关键的节点:IE 捆榜到 Windows 系统和 Google Chrome 的发布,IE 捆绑开始了浏览器大范围的推广使用,而 Chrome 则成为浏览器进入一个全新阶段的起点。

2008 年,在 IE、Firefox、Opera 的乱世里现身的 Chrome,简直是 Web 浏览器里的清流,“干净、简单、快速”,之后以其版本号升级般的快速发展,对 Web 标准、程序开发甚至整个互联网行业的推动做出了巨大的贡献。

如今,Chrome 在 Web 浏览器的市场占有率已经是第一,但它的更新还在跟着版本号一样的快速前行……所以,我们今天准备了一期相关的内容——《“一天精通 Chrome 开发”》,作为第 15 期周刊的主题。

本期周刊,将分为控制台与调试技巧、扩展和应用的学习及示例两个部分。好了,开始吧。

Chrome 开发技巧

1. 控制台

帮你开启上帝视角,从一个简单的 console.log(); 展开,呈现远不止于此的强大控制台。

2. 开发者工具:你不知道的 Chrome DevTools 系列 by @civerzhu

“Chrome 开发者工具作为 Web 前端开发性能调试的必备工具,连隔壁的产品小哥都知道打开 F12 改一下页面元素的标签代码就能看到页面效果。”

但是它能做的远不止平常用的那么简单,这一个小小的开发工具集成了很多高级的功能,作者这个系列的文章,就是对开发者工具的系统学习。

3. 优化页面性能

使用 Chrome DevTools 的 Timeline 分析页面性能 // Horve大叔

Chrome TimeLine 工具可以很好地辅助分析页面的性能瓶颈,提供详细全面的分析数据,为性能优化提供数据依据,以及还包括如 Memery Mode、Screen Shot 等多种多样的技巧,非常强大。

4. 各种奇技增加效率

通过各种扩展,强化浏览器,各种前端语言调试工具以及诸如 EnjoyCSS、LiveReload 等这类能够提高效率的强大扩展;快速获取调试技巧,增加开发效率,这两者对前端开发者尤其是不可或缺的。

看了这么多,要不先试试这个技巧?

data:text/html, </code></pre>
<h2>Apps & Extensions</h2>
<p><strong>5. 写一个简单的扩展吧</strong></p> <p>如何注册成为 Google 开发者、如何开始写 Manifest 文件(<code>browser_action</code>, <code>options_page</code>, <code>permissions</code>, <code>background</code>, <code>chrome_url_overrides</code>, 调试)、如何优化及丰富功能,按这四个步骤,手把手教学。</p>
<p><strong>6. 认真进阶</strong></p> <p>一个二维码生成器、一个笔记剪辑、一个微博界面改造,非常优秀的学习作品,你也可以写一个。</p>
<p><strong>7. 看看实例,提高一下姿势水平</strong></p>
<p>用了这么多年 Chrome,见过太多奇(tian'ma)奇(xing'kong)怪(hen)怪(zan)的插件和应用了,私货就不跟大家分享了,这里整理出社区里产生的一些扩展应用,很有意思,也值得学习。</p> <p><strong>8. 附加阅读</strong></p> <p><del><strong>这些,你觉得一天可以精通吗?</strong></del></p>
<p><em>(本期完)</em></p></body></html></p> <blockquote>
<p><strong># SegmentFault 技术周刊 #</strong></p>
<p>「技术周刊」是社区特别推出的技术内容系列,一周一主题。周刊筛选的每篇内容,是作者的独到见解,踩坑总结和经验分享。</p>
<p>每周二更新,欢迎「<a href="https://segmentfault.com/blog/weekly">关注</a>」或者「<a href="https://segmentfault.com/feeds/blog/weekly">订阅</a>」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。</p>
</blockquote> </div>