大約八年前，Bret Victor試圖通過提供一種從創(chuàng)建到使用的更快更簡單的方法來改變開發(fā)人員工具的工作方式。接著，他又上了一門可學習的編程課程，要求開設更簡單的開發(fā)教學課程。
盡管視頻質量糟糕透頂，但“按原則發(fā)明”的演示還是大獲成功。許多業(yè)內人士開始著手創(chuàng)建更多的可視化開發(fā)工具。邀請用戶使用值并看到即時效果的工具。破壞“編碼、部署、測試和調試”周期的工具。相當多的初創(chuàng)公司基于Victor提出的原則開發(fā)工具，但從長期來看，這些工具都沒有得到重視。
快進到現(xiàn)在。雖然有一些變化，但我們的大多數(shù)工具使用起來仍然令人生畏。它們提供了許多功能，并賦予了程序員權力。但是，學習如何使用它們也需要付出很大的努力。
似乎有一個共同的共識，使用擁擠的界面和命令行是一種權利，稱自己為“編碼器”。
這不是包容性。我不相信像這樣的工具是優(yōu)越的，因為它們工作了這么長時間。我很樂意放棄我的命令行技能，而專注于為我的用戶提供良好的用戶體驗。
瀏覽器中的開發(fā)工具截圖
瀏覽器開發(fā)工具。你知道所發(fā)生的一切嗎?
我認為現(xiàn)在是時候從“專家工具”的概念轉向“隨著時間的推移使用這個工具會讓你成為專家”的概念了。換句話說:
我們的工具不應該讓人們覺得“太愚蠢”而不去使用它們，或者奇怪為什么會有這樣的功能。
作為一個例子，讓我們來看看最近與瀏覽器捆綁在一起的開發(fā)工具。這些都是很好的。在你用來上網沖浪的工具中擁有你構建和測試你的網絡產品所需要的一切是很美妙的。
Web開發(fā)一直獨立于平臺和創(chuàng)建工具。您可以使用任何文本編輯器，編寫一些HTML、CSS和JavaScript，并在瀏覽器中進行測試。但是現(xiàn)在web開發(fā)變得更加復雜了。我們的工具也隨著復雜性的增加而增長。
幕間休息:為什么我們在這里?
我是微軟開發(fā)工具的主要程序經理。我的重點是微軟Edge瀏覽器的內置開發(fā)工具。
這些是Chromium項目的工具，和項目本身一樣古老——至少有10年了。它們是一種復雜的機器，提供了許多不同的使用方法。您可以查看并調整CSS，您可以調試腳本，您甚至可以設置本地工作區(qū)來編寫代碼。有了網絡部分，就可以深入研究瀏覽器的呈現(xiàn)，看看代碼為什么會變慢。
多年來，它們以一種有機的方式成長，并對網絡提出了新的要求。動畫和過渡變成了一件事，移動web和響應式web設計。線下優(yōu)先和服務人員是常見的，績效是一個大話題。對于這些任務，您在瀏覽器中都有專門的工具。還有專家，他們愛他們，因為他們能給他們需要的洞察力。
大量的培訓材料、文檔和會議討論都涉及到這些工具。它們會解釋你如何使用它們來建立良好的網絡體驗，并詳細了解你在做什么。
其他的演講和出版物試圖預測網絡的下一個大事件。這些導致了圍繞當前實驗技術的工裝的巨大而短暫的需求。作為瀏覽器之戰(zhàn)的一部分，制造商對這些需求的反應往往過于迅速。他們在已經擁擠不堪的界面上又增加了一項功能。這很容易做到。與用戶一起測試以確保其易于理解需要更多的努力。刪除內容總是會引起公眾的強烈抗議。
在您的瀏覽器中擁有最好的開發(fā)工具已經成為一個優(yōu)勢。開發(fā)人員是早期采用者，他們會影響其他人使用您的瀏覽器。
在過去的幾年里，這意味著我們增加了很多只是表面上滿足需求的功能。我們滿足了開發(fā)者社區(qū)中少數(shù)人的要求，但他們是敢言的少數(shù)派。
當你看遙測技術和使用統(tǒng)計數(shù)據(jù)時情況就不一樣了。元素和控制臺標簽一起占據(jù)了主導地位，并占了很大一部分的使用。大多數(shù)其他工具都遠遠落后于它們，其中一些幾乎從未被關注過。在keynote上顯示的“必須擁有”功能常常無法通過實驗階段，因為它的使用率很快就下降了。這是一個遺憾——它可能對開發(fā)人員有很大的幫助。但如果你不迅速行動，利息就會消失。
甚至一些標準工具也勉強維持著微薄的生存。使用斷點、觀察表達式和偵聽器，您可以體驗到復雜而深刻的調試經驗。這種體驗在很大程度上被console.log()的使用所掩蓋。
有了這些見解是很好的，所以我們可以集中精力于刪除哪些內容以減少復雜性。除了我們不能。對工具當前狀態(tài)的任何改變都可能讓人們感到厭煩。這是可以理解的。改變是很煩人的。開發(fā)人員喜歡沿著我們已知的路徑，利用我們多年來磨練出來的肌肉和大腦記憶。
這就是當前的狀態(tài):許多優(yōu)秀的、低使用率的工具加在一起，乍一看似乎非常復雜。這對于初學者和忙碌的開發(fā)人員來說都是令人沮喪的。
我們怎樣才能變得更好?
有一些方法可以讓我們的工具變得更好。
可視化工具和交互
上下文工具
工具捆綁
合并文檔、最佳實踐和工具
可視化工具和交互
對一些人來說，在運行構建并在瀏覽器中檢入它之后調整數(shù)字并查看更改可能很有趣。大多數(shù)人使用視覺界面會得到更好的結果。這是維克多演講中的一件大事，很高興看到自那以后有些事情發(fā)生了改變。
例如，Lea Verou構建了一個可視化工具來調整動畫和過渡的緩和。
截屏的立方貝塞爾工具由Lea Verou
視覺工具，定義立方貝塞爾曲線，并嘗試他們在動畫
這很快就成為了開發(fā)工具，現(xiàn)在任何CSS動畫都可以使用。
開發(fā)人員工具中的立方貝塞爾工具的截圖
devtools中的三次貝塞爾曲線工具
挑選顏色的人現(xiàn)在也很普遍。動畫的視覺表現(xiàn)和用于陰影的小彈出工具是另外的例子。
我非常喜歡它，因為它允許人們調整外觀和感覺，并創(chuàng)建引起它的代碼。一些CSS語法可能會變得相當復雜，我們正在開發(fā)其他東西，比如字體編輯器。
通常你觀點的改變會帶來有趣的結果。乍一看，瀏覽器開發(fā)工具中的3D視圖似乎是多余和奇怪的。用戶測試和遙測顯示，人們喜歡使用它。
3D工具開發(fā)工具的截圖
在3D視圖中查看文檔結構
查看在3D空間中生成的HTML有多復雜，可以讓人們了解為什么頁面的性能很差。有報道稱，z-index的3D表示最終使人們理解了這個概念。
DOM斷點是另一個很好的例子。它們允許您使用產品的界面并將其鏈接到調試工作流。當我在舞臺上展示它們時，我得到了“哇”的反饋，但它們已經存在了相當一段時間了。界面的工作和創(chuàng)建界面的代碼之間似乎存在很大的脫節(jié)。當你仔細想想時，你會發(fā)現(xiàn)這沒什么意義。
上下文工具
現(xiàn)在有太多的開發(fā)工具同時為我提供了所有的選項。您有一個包含大量信息和按鈕的主面板，一個顯示更多內容的子面板。你通常有另一個菜單來打開更多的功能，或者有一個齒輪來設置偏好。這些都很好，只要你努力根據(jù)自己的需要定制它們，并且了解它們是如何工作的。正如你可能已經猜到的那樣，這幾乎從未發(fā)生過。
其他產品已經明白，在需要的時候放棄是一種更好的體驗。Keynote, Powerpoint, Photoshop和其他很多軟件都是上下文感知的。只有高亮顯示或添加圖像，才能看到圖像編輯工具和信息。工具欄欄只顯示當時需要的內容。誠然，由于多年來使用“除了廚房水槽，什么都歡迎”的工具，這在一開始可能會很煩人。但我發(fā)現(xiàn)自己更專注于我想做的事情，而不是以后可能會發(fā)生的事情。
也許現(xiàn)在是在我們的開發(fā)工具中引入更多這方面內容的好時機。把使用變成發(fā)現(xiàn)的旅程，而不是試圖從一個巨大的提供。
工具捆綁
現(xiàn)在，我們有很多按功能分類的工具。我們有元素，控制臺，源，網絡，性能，內存，應用程序，安全。即使在我打字的時候，我也會感到疲憊不堪。由開發(fā)人員來決定哪個位做什么以及用它做什么。
作為產品經理，我們經常談論“JTBD”，或者“待完成的工作”。我們產品的用戶需要它做什么，最終目標是什么?
根據(jù)這些有不同順序的工具不是很有意義嗎?如果我想做的只是調整一個網站的外觀和感覺，并玩弄CSS值，內存、性能和應用程序只是噪音。當我想知道為什么我的產品很慢的時候，整個視覺工具推動像素也不是我想要的。
這聽起來可能與前面解釋的情境行為相似，但有一點不同。這個想法是有主題“我想編輯一個網站”,“我想修復我的應用程序的性能問題”,關閉不適用的工具和使用額外的空間在工具提供指導和文檔,經過一步一步的過程。
捆綁領域的其他想法是自動化您將使用某種腳本的部分。例如，該工具發(fā)現(xiàn)你的圖像很大，而且沒有優(yōu)化。我們不需要學習如何手工完成，我們可以集成ImageOptim或Squoosh這樣的工具來幫助你完成。
合并文檔、最佳實踐和工具
有很多優(yōu)秀的文檔和最佳的web實踐。問題是有太多了，你甚至不知道什么是可靠的建議，什么不是。這就是為什么我們大多數(shù)人不看醫(yī)生的原因。相反，我們使用谷歌或直接到Stackoverflow并復制粘貼第一個匹配的結果。理解我們在做什么是以后的事——畢竟我們都是大忙人。
為什么我們不把文檔和有洞察力的信息放到我們的工具中呢?作為主題專家，我們很可能會給你好的建議。在上下文中顯示信息還意味著您不需要去其他地方。這些信息不會淹沒在大量的廣告中，也不會遵循某種隱藏的議程。
為了這個目的，我在Visual Studio代碼中使用WebHint已經有一段時間了(通過WebHint VS代碼擴展)，我也因此成為了一個更有條理的開發(fā)者。Webhint是一個web鏈接工具。它檢查您的代碼在性能、安全性、可訪問性和跨瀏覽器兼容性方面的問題，并給出如何修復這些問題的提示。
運行在visual studio代碼中的webhint的屏幕截圖
Webhint在我的代碼中告訴我哪里做錯了
我最喜歡的一點是，它不僅告訴我哪里出了問題，還告訴我如何修復問題，如果可以的話，還可以鏈接到相關文檔。從本質上說，我是在學習我在開發(fā)時所犯的錯誤，而不是在部署和測試之后所犯的錯誤。任何我們還沒有編寫的bug都是一個學習的機會。
雖然這在我的編輯器中很好，但我在瀏覽器中漏掉了一些類似的東西，現(xiàn)在在Microsoft Edge中有一個實驗，在瀏覽器中添加Webhint作為問題窗格。
開發(fā)人員工具中的問題窗格截圖
Webhint會出現(xiàn)在開發(fā)人員工具的問題窗格中
這可以使測試和避免明顯的問題變得更加容易。
事情發(fā)生
作為一個產品經理，每一個被我的產品搞得不知所措的用戶都覺得我是個失敗者。但問題是，您通常不會得到反饋，因為您不愿承認自己不理解開發(fā)人員工具。
如果不是命令行專家，或者不知道如何進行調試，就會被認為是失敗的?？茨切┖芸岬囊曨l和專家們使用這些工具的討論可能會令人沮喪，因為不是每個人都有時間去深入了解。最讓人沮喪的是，當專家們把讓我困惑的事情稱為“簡單”和“基本知識”時。
所以這里有一個事實:我們都不知道自己一直在做什么。即使作為開發(fā)人員工具的工作人員，我也總是能發(fā)現(xiàn)一些我從未關注過的新東西。如果你感到不知所措，我們應該幫助你——這不是你的失敗。
但是，你可以幫助它變得更好。
向構建產品的團隊匯報讓你沮喪的事情。
如果您認為有一些文檔缺失，或者我們可以做什么使其更容易理解，請告訴我們。
使用瀏覽器的預覽版本，打開這些工具的實驗，來體驗即將到來的功能，幫助它們變得更好。
對于瀏覽器開發(fā)工具，你可以直接聯(lián)系我，或者聯(lián)系我的官方Twitter賬戶(@EdgeDevTools)。更好的方法是使用瀏覽器工具內建的反饋機制，因為它會直接進入錯誤隊列。點擊右上方的“屏幕前的人”圖標即可到達:
開發(fā)工具與高亮聯(lián)系人按鈕
聯(lián)系開發(fā)工具團隊是構建在開發(fā)工具中的。
這將開啟一個對話，給你一個機會來描述你的問題。它還會為您創(chuàng)建有問題的頁面的截圖。你也可以發(fā)送遙測和給我們的電子郵件，以要求更多的細節(jié)。你可以用任何語言提問——我們有一個翻譯團隊來幫助我們。
開發(fā)人員工具中的聯(lián)系人對話的截圖
在與我們聯(lián)系時，我們會盡力幫助您提供我們所需要的所有信息。
我們知道這個問題，我們希望工具是你使用和學習的東西，當你使用它們。你不需要已經是這方面的專家。這是一個瘦身、重新安排和尋找新方法來增強下一代開發(fā)人員能力的好時機。
我很高興能與一個致力于簡化工作的團隊一起工作，并努力滿足所有開發(fā)人員的需求。有相當多的東西在制造和這些是令人興奮的時刻。
