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 技術週刊 #

「技術週刊」是社區特別推出的技術內容系列，一週一主題。週刊篩選的每篇內容，是做者的獨到看法，踩坑總結和經驗分享。

每週二更新，歡迎「關注」或者「訂閱」。你們也能夠在評論處留言本身感興趣的主題，推薦主題相關的優秀文章。