在 2014 年 Chrome 開發人員高峰會中,許多主題和品牌都涵蓋了全新 API 的範圍,但不是所有新奇有趣的內容。
如果您是新手網頁開發人員,或甚至是有經驗的開發人員要開始探索新的 API,那麼您可能會按照以下三個步驟操作:學習、建構及疊代。
Matt Gaunt 說明如何從 Chrome 開發人員平台團隊持續努力解決這些問題。
學習
網頁基礎知識是一系列用途說明文件,涵蓋多個主題。這個核心目標是讓開發人員無論對症還是完全不瞭解,都能盡快採用最佳做法。
網頁基礎知識的其中一個主要目標,是確保如果你對某個主題不太熟悉,指南會盡可能減少「選擇癱瘓」。Addy Osmani 在糕點盒中完美裝上了這首歌。
如果您發現網站或網站內容有任何問題,或是希望網頁基礎知識涵蓋特定主題,請透過 GitHub 提交意見回饋。
建構
我們打造了 Web Starter Kit 檔案,協助您開始使用新的網路專案。它具備您需要的所有功能:
- 穩固的建構程序
- 樣板 HTML
- 風格指南
建構程序
如果您是剛建構程序的新手,最簡單的做法是將建構程序視為一種程式,這個程式會擷取一組檔案,然後對這些檔案執行特定工作,然後在不同位置輸出新版本。這些工作會將檔案最佳化以縮短載入時間、檢查可能出現的錯誤或處理可自動執行的工作。
Web Starter Kit 包含下列程序:
我們會壓縮及串連 CSS 和 JavaScript,讓瀏覽器快速擷取檔案,而 JavaScript 也會透過 JSHint 執行,檢查 JavaScript 最佳做法和常見程式設計錯誤。圖片會以圖片最小值壓縮,而您可以利用這個函式,縮減檔案大小大幅。我們也制定了建立樣式指南 CSS 的程序
適用於多裝置 HTML 的樣板
為新網頁編寫第一組 HTML 是相當嚴格的標準,因此您會快速取得適合各種裝置和螢幕大小的現成 HTML 檔案。
在 Web Starter Kit 中,我們想讓任何功能模糊處理平台與網站之間的線條,因此我們新增了 Android、Windows Phone、iOS 和 Opera Coast 的新增至主畫面和啟動畫面支援功能。
風格指南
網頁入門套件的最後一部分是樣式指南
如此一來,任何新專案都能提供一組很棒的預設樣式和元件,鼓勵您進行樣式導向的開發。您可以修改現有元素的樣式 並新增自己的樣式
在下一個版本的 WSK 中,為明年初推出的版本,我們正努力簡化樣式指南的搭配方式,並切換至質感設計的外觀和風格。Matt在早期模擬中展示了 Chrome 開發人員高峰會的可能呈現方式,您可參考以下範例。
疊代
開始將新知識付諸實踐後,建議您使用開發人員工具來偵錯、改善及維護工作。
我們在開發人員工具中加入了一些新功能,而 Matt 則介紹以下新功能。
裝置模式
裝置模式是開發人員工具中的新部分,可讓您快速查看網站在不同行動裝置上的運作方式,同時在 CSS 中查看媒體查詢。
「裝置模式」的其中一項強大功能就是限制網路速度,以便模擬使用者在 GPRS、EDGE、3G、DSL 或 Wi-Fi 連線上的使用體驗。
繪製分析器
如果您曾開啟時間軸分頁並按下記錄按鈕,可能會發現瀑布發生了一些繪製事件。通常這個區域會顯示黑色方塊,您無法得知瀏覽器執行的原因或用途。
繪製分析器不會進一步指出瀏覽器在繪圖期間的確切行為。
撤銷追蹤
現在 開發人員工具會提供繪製或版面配置的可能原因,方便所有人瞭解時間軸、瀏覽器行為,並讓您最佳化程式碼,避免發生效能問題。
火焰圖檢視
這是查看時間軸中可用資訊的方法截然不同。這樣就能更輕鬆地查看工作重疊的情況,以及因其他任務產生的瀏覽器行為。
影格檢視器
在「Flame Chart」檢視中,您可以選取特定頁框。您可以在此探索頁面中有哪些元素已升級為複合圖層,以及這些元素宣傳的原因。
學習、建置、疊代
這些是 Chrome 團隊致力於協助開發人員加快網頁開發速度的措施,因此請務必參閱網頁基礎知識、網頁入門套件以及 Chrome 開發人員工具的新功能。