一天精通 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 改一下頁面元素的標簽代碼就能看到頁面效果?!?/p>


但是它能做的遠不止平常用的那么簡單,這一個小小的開發工具集成了很多高級的功能,作者這個系列的文章,就是對開發者工具的系統學習。


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(簡書作者)



上一篇: 干貨:小程序開發過程中遇到的問題,這里有答案

下一篇: JavaScript--這道閉包題做起來有意思

分享到: 更多
广东11选五中奖软件 pt游戏厅 北京pk10下载 极速赛车最好的投注技巧 元游棋牌通比牛牛 今天内蒙古时时 冠通游戏 内蒙古时时计划软件 哪个棋牌软件有二八杠 双色球计划预测 百人牛牛押注技巧 七星彩最新开奖结果 网络21点游戏下载 双色球模拟选号投注 网上斗牛必输原理 彩票双面盘骗局