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

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

遍历 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, <textarea style="width: 100%; height: 100%; border: none; outline: none" autofocus />

Apps & Extensions

5. 写一个简单的扩展吧

如何注册成为 Google 开发者、如何开始写 Manifest 文件(browser_action, options_page, permissions, background, chrome_url_overrides, 调试)、如何优化及丰富功能,按这四个步骤,手把手教学。

6. 认真进阶

一个二维码生成器、一个笔记剪辑、一个微博界面改造,非常优秀的学习作品,你也可以写一个。

7. 看看实例,提高一下姿势水平

用了这么多年 Chrome,见过太多奇(tian’ma)奇(xing’kong)怪(hen)怪(zan)的插件和应用了,私货就不跟大家分享了,这里整理出社区里产生的一些扩展应用,很有意思,也值得学习。

8. 附加阅读

这些,你觉得一天可以精通吗?

(本期完)

# SegmentFault 技术周刊 #

「技术周刊」是社区特别推出的技术内容系列,一周一主题。周刊筛选的每篇内容,是作者的独到见解,踩坑总结和经验分享。

每周二更新,欢迎「关注」或者「订阅」。大家也可以在评论处留言自己感兴趣的主题,推荐主题相关的优秀文章。

    原文作者:Noodles
    原文地址: https://segmentfault.com/a/1190000007713707
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞