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

• Chrome 控制台实用指南 // 秦至

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

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

• （1）神奇的 console

• （2）那些 debug 的技巧

• （3）随意修改你的 HTML

• （4）推荐几款 DevTools 插件

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

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

3. 优化页面性能

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

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

4. 各种奇技增加效率

• 译 丨 15 个必须知道的 Chrome 开发者技巧 // 不写代码的码农

• 如何在前端开发中增加编码效率，这里有十款 Chrome 扩展可以帮你 // xitucircle

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

看了这么多，要不先试试这个技巧？

data:text/html, <textarea style="width: 100%; height: 100%; border: none; outline: none" autofocus />

Apps & Extensions

5. 写一个简单的扩展吧

• 第一步：如何成为一名 Chrome 应用开发者 // 动感小前端

• 第二步：从零开始写一个 Chrome 扩展 // huangtengfei

• 第三步：开发一个简单 Chrome 浏览器插件 // 崔小拽

• 第四步：让你的 Chrome App支持多语言 (i18n) // 狗屌

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

6. 认真进阶

• 从小目标开始，编写一个简洁的二维码 Chrome 扩展 // mengdu

• Chrome 扩展程序开发 // ecmadao

• 写一个 Chrome 扩展之 Flat Weibo —— 简洁你的微博世界 // flyow

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

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

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

• 知乎改造计划

  • 知乎用户屏蔽插件

  • 开发一个用于屏蔽知乎网内容的 Chrome 扩展

  • 知乎界面改造计划 - 开源项目一起来努力！

  • 「知乎 Card」—— 为你的知乎换个新样式（2016 10 18）

• SegmentFault 升级 by @公子

  • SF精灵 for Chrome

  • SF ChatOnline 插件

  • SF 答案搜索插件

  • SegmentFault 声望 3D 直方图视图

• 其他

  • 莆田系医院网站提醒（Chrome 插件）

  • Host Switch Plus：基于浏览器的 Hosts 代理插件（Chrome）

  • 我的第二个 Chrome 扩展十阅（TenRead）

  • ChromeSnifferPlus 插件正式登陆 Chrome Web Store

  • Chrome 插件 GitHub-Chart Commits 3D 直方图视图

8. 附加阅读

• 神器——Chrome 开发者工具(一)

• Chrome 开发者工具使用技巧

• 使用 Chrome Timeline 来优化页面性能

• 如何将 Chrome 变成开发利器，开发者们在用这些插件

• Chrome 扩展的开发

这些，你觉得一天可以精通吗？

（本期完）

---

# SegmentFault 技术周刊 #

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

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