SegmentFault 技術週刊 Vol.15 - 「一天精通 Chrome 開發」

weekly-vol015

遍歷 Web 瀏覽器的發展史,有兩個很是關鍵的節點:IE 捆榜到 Windows 系統和 Google Chrome 的發佈,IE 捆綁開始了瀏覽器大範圍的推廣使用,而 Chrome 則成爲瀏覽器進入一個全新階段的起點。html

2008 年,在 IE、Firefox、Opera 的亂世裏現身的 Chrome,簡直是 Web 瀏覽器裏的清流,「乾淨、簡單、快速」,以後以其版本號升級般的快速發展,對 Web 標準、程序開發甚至整個互聯網行業的推進作出了巨大的貢獻。前端

現在,Chrome 在 Web 瀏覽器的市場佔有率已是第一,但它的更新還在跟着版本號同樣的快速前行……因此,咱們今天準備了一期相關的內容——《「一天精通 Chrome 開發」》,做爲第 15 期週刊的主題。chrome

本期週刊,將分爲控制檯與調試技巧、擴展和應用的學習及示例兩個部分。好了,開始吧。segmentfault

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

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

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

相關文章
相關標籤/搜索