Google 開發者大會 2019：前端工程師的體驗和收穫

前言

源起

在掘金翻譯計劃的譯者羣中，我看到有人分享了報名連接。因而，抱着重在參與報名的心態，花了五分鐘在線填表報名，就忘了這茬事情了。8 月 21 日，又看到了幾位羣友分享了中籤的好消息。本覺得開發大會「與我無瓜」，次日下班以後收到了一條短信！我竟然也中了😆！

說明

我我的對排隊體驗 Google 的黑科技不大感興趣，此次出行也沒帶相機拍照。若是你想更直觀地瞭解新奇有趣的參會體驗，我推薦你關掉這篇文章，去看看 Bilibili 上的 Vlog，好比這個視頻；可是，若是你是像我同樣入行不久的(萌新)前端工程師，平時沒有太多機會接觸 Web 前端的背景知識和實戰技巧；我會與你分享一些本身的收穫。

因本人水平有限，若有疏漏和錯誤還請見諒，很是歡迎問題和建議！

前端的道與術

Web：標準和 API 都在迭代進化

什麼是 Web API

廣義的 Web API 包含兩類：瀏覽器 API 和第三方 API。 咱們這裏討論僅指瀏覽器 API，如下是 MDN 中的一段介紹：

瀏覽器API內置於Web瀏覽器中，能從瀏覽器和電腦周邊環境中提取數據，並用來作有用的複雜的事情 。例如Geolocation API提供了一些簡單的JavaScript結構以得到位置數據，所以您能夠在Google地圖上標示您的位置。在後臺，瀏覽器確實使用一些複雜的低級代碼（例如C++）與設備的GPS硬件（或能夠決定位置數據的任何設施）通訊來獲取位置數據並把這些數據返回給您的代碼中使用瀏覽器環境；可是，這種複雜性經過API抽象出來，於是與您無關。

這個解釋很複雜？那麼舉個簡單的例子，若是你對前端有所瞭解，你熟悉的 console.log() 方法，它就是一個 Web API，其功能是向瀏覽器的控制檯輸出內容。

百度就在他們的首頁的代碼裏調用了這個 API

順帶一提，雖然偶爾有些繁瑣，MDN 上的絕大多數文檔對於前端工程師來講很是有幫助。若是你遇到使用搜索引擎以後仍是毫無頭緒的問題，不妨試試找找 MDN 的文檔讀讀，也許有驚喜。

咱們能夠在 MDN 上看到 console.log API 的更多信息

本次大會中，Thomas Steiner 主講了《實現適用於網絡的新功能》，其中就提到了不少 Google 推動並實現的 API：好比說文件系統訪問功能、聯繫信息選擇器（可以讓用戶有選擇性地分享聯繫信息）、空閒狀態檢測功能、串行和 HID 設備訪問功能等等。

新 Web 標準和新 Web APIs

在聽演講的時候，我就想到了常常被本身忽略的一個問題：新的 API 是怎麼產生的呢？怎麼保證除了 Chrome 之外，別的瀏覽器也兼容？

這就不得不提到兩個組織：W3C 和 WHATWG。W3C 的全稱是萬維網聯盟（World Wide Web Consortium），是制定互聯網標準的組織。WHATWG 主要由瀏覽器廠商員工（Google、Opera、Mozilla、Apple）組成的開源社羣，最近已經成爲事實上的 HTML 和 DOM 標準制定者，若是你感興趣，能夠讀讀這篇新聞。

xkcd #927

大多數人，好比曾經的我，可能會有一個誤解：W3C 和 WHATWG 制定新標準，而後各大瀏覽器廠商實現 API。然而事實上，W3C 和 WHATWG 並非這麼運做的；Lea Verou 的《CSS 揭祕》一書中這樣介紹 W3C（若是你對 W3C 的工做流程感興趣，你也能夠聽聽 Lea Verou 的這場演講）：

W3C 並不「生產」標準。實際上，它扮演的是一個論壇的角色：W3C 以工做組的方式，把某項技術的相關各方彙集起來，最終由他們來產出標準。固然，W3C 並不僅是一個觀察者：它設定了整個平臺的規則，監督整個進程。但這些技術規範（基本上）並非由 W3C 的工做人員編寫完成的。

簡而言之，每一個具體標準都是具體的工做組（Group）完成的；工做小組纔是標準的制定者；而工做組（Working Group）的成員絕大多數都來自 W3C 會員公司（好比說 Google）。除了工做組以外，還有興趣組（Interest Group）和社區組（Community Group），這裏就很少介紹了

在 Google 內部，爲 Web 開發新功能的項目叫作 Project Fugu，演講中提到的好比 Web Bluetooth 和 原生文件系統 API，以及小巧的 Badging API 。這些未標準化的 API 已經在 Chrome 中實現了，而且經過 W3C 的 Web 平臺孵化器社區組（WICG）生產了相應的報告。開發者大會自己，也正是推廣 API 的好時機，只有讓更多的開發者瞭解並使用了它們，才能促使這些 API 更快地成熟起來，併產生新的 Web 標準。

你極可能從未使用過這些 API，畢竟平時工做中不太可能使用它們。但這並不妨礙咱們本身安裝好最新版的 Chrome，到 Github 上找找 demo 或建一個玩具工程，試一試這些最新的 API。若是你能深刻探索某個 API 就更好了。在不遠的未來，新 API 被瀏覽器廣泛實現並在生產環境中普遍使用時，說不定開發者會用上你貢獻的 npm 軟件包呢 😊？

API 是否實現和兼容性

在 Web 標準和瀏覽器 API 不斷迭代更新時，通常的 Web 開發者關心的是如何瞭解 API 支持狀況，可否在生產環境使用某個 API；我通常使用 MDN 和 caniuse.com。近期有個好消息：caniuse 引用 MDN 數據。caniuse + MDN，前端工程師雙倍的幸福 😒！

此外，若是你發現某個 API 在某瀏覽器沒有實現；其實也能夠給瀏覽器維護者提功能要求（Feature Request）；好比這個在 bugs.webkit.org 提交的關於實現剪貼板 API 的功能要求。

這個 Feature Request 的真正原由：我問 Google 工程師爲何 Webkit 內核的 Safari 不支持剪貼板 API 😂

在 Web 展臺與 Paul Kinlan 交流中，他提到了 Web 平臺測試套件（web-platform-tests），這個項目是 W3C 主導推動的跨瀏覽器測試套件，使得瀏覽器項目能基於測試更加可靠地去實現標準。wpt.fyi 上能夠看到目前的統計數據，因爲測試套件未完成，這些數據並不能準確的反應瀏覽器對 API 的支持狀況。但能夠確定的是，有了這些標準化測試，瀏覽器的 Web 標準實現再也不是沒法量化的黑盒子，API 跨瀏覽器兼容性問題也將成爲歷史。

Chrome Devtools：前端工程師的利器

Kayce Basques 主講了《利用 Chrome DevTools 更快速地構建出色的網站》，這個演講是我我的在本次大會中，感受對平常開發實際幫助最大的演講。做爲一個前端工程師，好似受高人指點，進一步掌握了武功祕籍，將 Chrome 開發者工具這個神器發揮出更大的威力。

多看文檔纔會用得更好的利器

演講中介紹了許多我已經知道的功能；但也有不少功能我第一次據說，如下演講的幻燈片截圖是其中的幾個例子，若是有些功能你早已經知道，甚至常用，也不用感到奇怪，由於那是我我的的知識盲區。演講中信息量很大，可能介紹了幾十個功能點和技巧，強烈推薦觀看一遍完整的演講。

忘記了 CSS 屬性名稱也不要緊，你只要記得屬性自己就能夠自動補全 CSS。

你不只能夠用瀏覽器截圖，還能夠給指定的 DOM 節點截圖。

console.log 以外，你還能夠調用這些方法。

說到調試程序；我剛入門前端的時候只會 console.log()，後來在學會了 debugger 打斷點，使用 console.log 的次數就急劇減小了。而 debugger 斷點僅僅是一種打斷點的方式。在 Google 的官方說明中，介紹了七種不一樣的斷點，中文的開發者社區也能夠找到總結和分享，這裏就很少介紹了。

接下來，我將用一個例子，介紹這七種方式以外一種的斷點調試方法。它很是不起眼，Google 的文檔中甚至沒有詳細介紹它（快捷鍵列表中列出了它），但它在這一次 Debug 中立了大功。

和 Google 工程師一塊兒用 Devtools 調試 CSS

在 Web 展臺，一位程序媛小姐姐向 Kayce 請教了一個問題，我在旁邊看了一會也加入了討論。通過一番研究，咱們仍是沒能解決；Kayce 甚至都留下了郵箱，準備之後慢慢研究。咱們聊起了別的內容時，Kayce 忽然話題一轉，「I just got an idea.」 ，用了一個斷點輕鬆搞定了這個問題。

如今就一塊兒看看這個問題吧：這是一個使用 Javascript 實現的下拉選擇框，鼠標移動滑過選項時，選項會高亮成藍色。

經過 Devtools 審查元素，發現是經過添加 highlighted 類來顯示高亮的顏色

如今咱們想要修改這個高亮的顏色，因此咱們準備添加一個類選擇器 .highlighted；配置一個 background-color 屬性，爲了保證優先級咱們加上了 !important 修飾符，結果看上去像這樣：

然而，浮動選項的顏色並無改變！

若是你熟悉 CSS background 屬性，你可能已經猜到背景色沒有變化的緣由；但是，當時現場的咱們都忽略了某個細節，沒能想到這裏的問題。

在輪到神奇的斷點登場以前，先用一個 GIF 說明下，此前爲何咱們無法直接在屬性面板修改 highlighted 類，而是要手動加一個同名的類進行 CSS 覆蓋(CSS overriding)。

鼠標移開，highlighted 類就消失了；強行指定元素狀態也只是指定 CSS 僞類，在這裏也沒用。

在 Sources 選項卡中，有一排調試按鈕，咱們將使用第一個按鈕，暫停腳本執行。

將鼠標移動到第一個暫停按鈕，會提示它的快捷鍵 F8 / Command + B ( MacOS )

由於將鼠標移開後 highlighted 會消失，因此咱們必須使用快捷鍵。打開下拉框並按下暫停快捷鍵後，咱們就能夠輕鬆地切換回 Elements 選項卡並進行進一步調試。咱們點開相應的元素，background-color 不生效的緣由一目瞭然：highlighted 類配置了 background-image 屬性。

在取消勾選其它會影響的屬性後，咱們以前設置的 background-color: red 生效了！

我以爲這個問題自己不復雜， CSS background 的知識也並不難，文檔裏都有說；可是整個調試的思路和使用快捷鍵暫停腳本的操做，須要必定的經驗積累和靈感才能完成。我以爲這是一個頗有趣的調試 CSS 的例子。若是你想本身試試，能夠點擊這裏訪問它的在線地址。

總結

此次大會前端還有不少內容，好比 Google 近年來主推的 Flutter 和 PWA 都有幾場演講。在構思這篇文章時，我本想一個不落地介紹完；但成文後我發現內容已經有點多了，所有加入反而不美。此外，我未使用過這些技術，因此與其獻醜不如精簡掉。希望本身在將來的日子裏，能使用一下這些技術；或許在明年就能夠更有自信地介紹相關的技術了！(Flag++🤣)

但願這篇文章對你有所幫助，感謝你的閱讀！