大約八年前，Bret Victor試圖通過提供一種從創(chuàng)建到使用的更快更簡單的方法來改變開發(fā)人員工具的工作方式。接著，他又上了一門可學(xué)習(xí)的編程課程，要求開設(shè)更簡單的開發(fā)教學(xué)課程。

盡管視頻質(zhì)量糟糕透頂，但“按原則發(fā)明”的演示還是大獲成功。許多業(yè)內(nèi)人士開始著手創(chuàng)建更多的可視化開發(fā)工具。邀請用戶使用值并看到即時(shí)效果的工具。破壞“編碼、部署、測試和調(diào)試”周期的工具。相當(dāng)多的初創(chuàng)公司基于Victor提出的原則開發(fā)工具，但從長期來看，這些工具都沒有得到重視。

快進(jìn)到現(xiàn)在。雖然有一些變化，但我們的大多數(shù)工具使用起來仍然令人生畏。它們提供了許多功能，并賦予了程序員權(quán)力。但是，學(xué)習(xí)如何使用它們也需要付出很大的努力。

似乎有一個(gè)共同的共識(shí)，使用擁擠的界面和命令行是一種權(quán)利，稱自己為“編碼器”。

這不是包容性。我不相信像這樣的工具是優(yōu)越的，因?yàn)樗鼈児ぷ髁诉@么長時(shí)間。我很樂意放棄我的命令行技能，而專注于為我的用戶提供良好的用戶體驗(yàn)。

瀏覽器中的開發(fā)工具截圖

瀏覽器開發(fā)工具。你知道所發(fā)生的一切嗎?

我認(rèn)為現(xiàn)在是時(shí)候從“專家工具”的概念轉(zhuǎn)向“隨著時(shí)間的推移使用這個(gè)工具會(huì)讓你成為專家”的概念了。換句話說:

我們的工具不應(yīng)該讓人們覺得“太愚蠢”而不去使用它們，或者奇怪為什么會(huì)有這樣的功能。

作為一個(gè)例子，讓我們來看看最近與瀏覽器捆綁在一起的開發(fā)工具。這些都是很好的。在你用來上網(wǎng)沖浪的工具中擁有你構(gòu)建和測試你的網(wǎng)絡(luò)產(chǎn)品所需要的一切是很美妙的。

Web開發(fā)一直獨(dú)立于平臺(tái)和創(chuàng)建工具。您可以使用任何文本編輯器，編寫一些HTML、CSS和JavaScript，并在瀏覽器中進(jìn)行測試。但是現(xiàn)在web開發(fā)變得更加復(fù)雜了。我們的工具也隨著復(fù)雜性的增加而增長。

幕間休息:為什么我們在這里?

我是微軟開發(fā)工具的主要程序經(jīng)理。我的重點(diǎn)是微軟Edge瀏覽器的內(nèi)置開發(fā)工具。

這些是Chromium項(xiàng)目的工具，和項(xiàng)目本身一樣古老——至少有10年了。它們是一種復(fù)雜的機(jī)器，提供了許多不同的使用方法。您可以查看并調(diào)整CSS，您可以調(diào)試腳本，您甚至可以設(shè)置本地工作區(qū)來編寫代碼。有了網(wǎng)絡(luò)部分，就可以深入研究瀏覽器的呈現(xiàn)，看看代碼為什么會(huì)變慢。

多年來，它們以一種有機(jī)的方式成長，并對(duì)網(wǎng)絡(luò)提出了新的要求。動(dòng)畫和過渡變成了一件事，移動(dòng)web和響應(yīng)式web設(shè)計(jì)。線下優(yōu)先和服務(wù)人員是常見的，績效是一個(gè)大話題。對(duì)于這些任務(wù)，您在瀏覽器中都有專門的工具。還有專家，他們愛他們，因?yàn)樗麄兡芙o他們需要的洞察力。

大量的培訓(xùn)材料、文檔和會(huì)議討論都涉及到這些工具。它們會(huì)解釋你如何使用它們來建立良好的網(wǎng)絡(luò)體驗(yàn)，并詳細(xì)了解你在做什么。

其他的演講和出版物試圖預(yù)測網(wǎng)絡(luò)的下一個(gè)大事件。這些導(dǎo)致了圍繞當(dāng)前實(shí)驗(yàn)技術(shù)的工裝的巨大而短暫的需求。作為瀏覽器之戰(zhàn)的一部分，制造商對(duì)這些需求的反應(yīng)往往過于迅速。他們在已經(jīng)擁擠不堪的界面上又增加了一項(xiàng)功能。這很容易做到。與用戶一起測試以確保其易于理解需要更多的努力。刪除內(nèi)容總是會(huì)引起公眾的強(qiáng)烈抗議。

在您的瀏覽器中擁有最好的開發(fā)工具已經(jīng)成為一個(gè)優(yōu)勢。開發(fā)人員是早期采用者，他們會(huì)影響其他人使用您的瀏覽器。

在過去的幾年里，這意味著我們增加了很多只是表面上滿足需求的功能。我們滿足了開發(fā)者社區(qū)中少數(shù)人的要求，但他們是敢言的少數(shù)派。

當(dāng)你看遙測技術(shù)和使用統(tǒng)計(jì)數(shù)據(jù)時(shí)情況就不一樣了。元素和控制臺(tái)標(biāo)簽一起占據(jù)了主導(dǎo)地位，并占了很大一部分的使用。大多數(shù)其他工具都遠(yuǎn)遠(yuǎn)落后于它們，其中一些幾乎從未被關(guān)注過。在keynote上顯示的“必須擁有”功能常常無法通過實(shí)驗(yàn)階段，因?yàn)樗氖褂寐屎芸炀拖陆盗?。這是一個(gè)遺憾——它可能對(duì)開發(fā)人員有很大的幫助。但如果你不迅速行動(dòng)，利息就會(huì)消失。

甚至一些標(biāo)準(zhǔn)工具也勉強(qiáng)維持著微薄的生存。使用斷點(diǎn)、觀察表達(dá)式和偵聽器，您可以體驗(yàn)到復(fù)雜而深刻的調(diào)試經(jīng)驗(yàn)。這種體驗(yàn)在很大程度上被console.log()的使用所掩蓋。

有了這些見解是很好的，所以我們可以集中精力于刪除哪些內(nèi)容以減少復(fù)雜性。除了我們不能。對(duì)工具當(dāng)前狀態(tài)的任何改變都可能讓人們感到厭煩。這是可以理解的。改變是很煩人的。開發(fā)人員喜歡沿著我們已知的路徑，利用我們多年來磨練出來的肌肉和大腦記憶。

這就是當(dāng)前的狀態(tài):許多優(yōu)秀的、低使用率的工具加在一起，乍一看似乎非常復(fù)雜。這對(duì)于初學(xué)者和忙碌的開發(fā)人員來說都是令人沮喪的。

我們怎樣才能變得更好?

有一些方法可以讓我們的工具變得更好。

可視化工具和交互

上下文工具

工具捆綁

合并文檔、最佳實(shí)踐和工具

可視化工具和交互

對(duì)一些人來說，在運(yùn)行構(gòu)建并在瀏覽器中檢入它之后調(diào)整數(shù)字并查看更改可能很有趣。大多數(shù)人使用視覺界面會(huì)得到更好的結(jié)果。這是維克多演講中的一件大事，很高興看到自那以后有些事情發(fā)生了改變。

例如，Lea Verou構(gòu)建了一個(gè)可視化工具來調(diào)整動(dòng)畫和過渡的緩和。

截屏的立方貝塞爾工具由Lea Verou

視覺工具，定義立方貝塞爾曲線，并嘗試他們在動(dòng)畫

這很快就成為了開發(fā)工具，現(xiàn)在任何CSS動(dòng)畫都可以使用。

開發(fā)人員工具中的立方貝塞爾工具的截圖

devtools中的三次貝塞爾曲線工具

挑選顏色的人現(xiàn)在也很普遍。動(dòng)畫的視覺表現(xiàn)和用于陰影的小彈出工具是另外的例子。

我非常喜歡它，因?yàn)樗试S人們調(diào)整外觀和感覺，并創(chuàng)建引起它的代碼。一些CSS語法可能會(huì)變得相當(dāng)復(fù)雜，我們正在開發(fā)其他東西，比如字體編輯器。

通常你觀點(diǎn)的改變會(huì)帶來有趣的結(jié)果。乍一看，瀏覽器開發(fā)工具中的3D視圖似乎是多余和奇怪的。用戶測試和遙測顯示，人們喜歡使用它。

3D工具開發(fā)工具的截圖

在3D視圖中查看文檔結(jié)構(gòu)

查看在3D空間中生成的HTML有多復(fù)雜，可以讓人們了解為什么頁面的性能很差。有報(bào)道稱，z-index的3D表示最終使人們理解了這個(gè)概念。

DOM斷點(diǎn)是另一個(gè)很好的例子。它們允許您使用產(chǎn)品的界面并將其鏈接到調(diào)試工作流。當(dāng)我在舞臺(tái)上展示它們時(shí)，我得到了“哇”的反饋，但它們已經(jīng)存在了相當(dāng)一段時(shí)間了。界面的工作和創(chuàng)建界面的代碼之間似乎存在很大的脫節(jié)。當(dāng)你仔細(xì)想想時(shí)，你會(huì)發(fā)現(xiàn)這沒什么意義。

上下文工具

現(xiàn)在有太多的開發(fā)工具同時(shí)為我提供了所有的選項(xiàng)。您有一個(gè)包含大量信息和按鈕的主面板，一個(gè)顯示更多內(nèi)容的子面板。你通常有另一個(gè)菜單來打開更多的功能，或者有一個(gè)齒輪來設(shè)置偏好。這些都很好，只要你努力根據(jù)自己的需要定制它們，并且了解它們是如何工作的。正如你可能已經(jīng)猜到的那樣，這幾乎從未發(fā)生過。

其他產(chǎn)品已經(jīng)明白，在需要的時(shí)候放棄是一種更好的體驗(yàn)。Keynote, Powerpoint, Photoshop和其他很多軟件都是上下文感知的。只有高亮顯示或添加圖像，才能看到圖像編輯工具和信息。工具欄欄只顯示當(dāng)時(shí)需要的內(nèi)容。誠然，由于多年來使用“除了廚房水槽，什么都?xì)g迎”的工具，這在一開始可能會(huì)很煩人。但我發(fā)現(xiàn)自己更專注于我想做的事情，而不是以后可能會(huì)發(fā)生的事情。

也許現(xiàn)在是在我們的開發(fā)工具中引入更多這方面內(nèi)容的好時(shí)機(jī)。把使用變成發(fā)現(xiàn)的旅程，而不是試圖從一個(gè)巨大的提供。

工具捆綁

現(xiàn)在，我們有很多按功能分類的工具。我們有元素，控制臺(tái)，源，網(wǎng)絡(luò)，性能，內(nèi)存，應(yīng)用程序，安全。即使在我打字的時(shí)候，我也會(huì)感到疲憊不堪。由開發(fā)人員來決定哪個(gè)位做什么以及用它做什么。

作為產(chǎn)品經(jīng)理，我們經(jīng)常談?wù)?ldquo;JTBD”，或者“待完成的工作”。我們產(chǎn)品的用戶需要它做什么，最終目標(biāo)是什么?

根據(jù)這些有不同順序的工具不是很有意義嗎?如果我想做的只是調(diào)整一個(gè)網(wǎng)站的外觀和感覺，并玩弄CSS值，內(nèi)存、性能和應(yīng)用程序只是噪音。當(dāng)我想知道為什么我的產(chǎn)品很慢的時(shí)候，整個(gè)視覺工具推動(dòng)像素也不是我想要的。

這聽起來可能與前面解釋的情境行為相似，但有一點(diǎn)不同。這個(gè)想法是有主題“我想編輯一個(gè)網(wǎng)站”,“我想修復(fù)我的應(yīng)用程序的性能問題”,關(guān)閉不適用的工具和使用額外的空間在工具提供指導(dǎo)和文檔,經(jīng)過一步一步的過程。

捆綁領(lǐng)域的其他想法是自動(dòng)化您將使用某種腳本的部分。例如，該工具發(fā)現(xiàn)你的圖像很大，而且沒有優(yōu)化。我們不需要學(xué)習(xí)如何手工完成，我們可以集成ImageOptim或Squoosh這樣的工具來幫助你完成。

合并文檔、最佳實(shí)踐和工具

有很多優(yōu)秀的文檔和最佳的web實(shí)踐。問題是有太多了，你甚至不知道什么是可靠的建議，什么不是。這就是為什么我們大多數(shù)人不看醫(yī)生的原因。相反，我們使用谷歌或直接到Stackoverflow并復(fù)制粘貼第一個(gè)匹配的結(jié)果。理解我們在做什么是以后的事——畢竟我們都是大忙人。

為什么我們不把文檔和有洞察力的信息放到我們的工具中呢?作為主題專家，我們很可能會(huì)給你好的建議。在上下文中顯示信息還意味著您不需要去其他地方。這些信息不會(huì)淹沒在大量的廣告中，也不會(huì)遵循某種隱藏的議程。

為了這個(gè)目的，我在Visual Studio代碼中使用WebHint已經(jīng)有一段時(shí)間了(通過WebHint VS代碼擴(kuò)展)，我也因此成為了一個(gè)更有條理的開發(fā)者。Webhint是一個(gè)web鏈接工具。它檢查您的代碼在性能、安全性、可訪問性和跨瀏覽器兼容性方面的問題，并給出如何修復(fù)這些問題的提示。

運(yùn)行在visual studio代碼中的webhint的屏幕截圖

Webhint在我的代碼中告訴我哪里做錯(cuò)了

我最喜歡的一點(diǎn)是，它不僅告訴我哪里出了問題，還告訴我如何修復(fù)問題，如果可以的話，還可以鏈接到相關(guān)文檔。從本質(zhì)上說，我是在學(xué)習(xí)我在開發(fā)時(shí)所犯的錯(cuò)誤，而不是在部署和測試之后所犯的錯(cuò)誤。任何我們還沒有編寫的bug都是一個(gè)學(xué)習(xí)的機(jī)會(huì)。

雖然這在我的編輯器中很好，但我在瀏覽器中漏掉了一些類似的東西，現(xiàn)在在Microsoft Edge中有一個(gè)實(shí)驗(yàn)，在瀏覽器中添加Webhint作為問題窗格。

開發(fā)人員工具中的問題窗格截圖

Webhint會(huì)出現(xiàn)在開發(fā)人員工具的問題窗格中

這可以使測試和避免明顯的問題變得更加容易。

事情發(fā)生

作為一個(gè)產(chǎn)品經(jīng)理，每一個(gè)被我的產(chǎn)品搞得不知所措的用戶都覺得我是個(gè)失敗者。但問題是，您通常不會(huì)得到反饋，因?yàn)槟辉赋姓J(rèn)自己不理解開發(fā)人員工具。

如果不是命令行專家，或者不知道如何進(jìn)行調(diào)試，就會(huì)被認(rèn)為是失敗的?？茨切┖芸岬囊曨l和專家們使用這些工具的討論可能會(huì)令人沮喪，因?yàn)椴皇敲總€(gè)人都有時(shí)間去深入了解。最讓人沮喪的是，當(dāng)專家們把讓我困惑的事情稱為“簡單”和“基本知識(shí)”時(shí)。

所以這里有一個(gè)事實(shí):我們都不知道自己一直在做什么。即使作為開發(fā)人員工具的工作人員，我也總是能發(fā)現(xiàn)一些我從未關(guān)注過的新東西。如果你感到不知所措，我們應(yīng)該幫助你——這不是你的失敗。

但是，你可以幫助它變得更好。

向構(gòu)建產(chǎn)品的團(tuán)隊(duì)匯報(bào)讓你沮喪的事情。

如果您認(rèn)為有一些文檔缺失，或者我們可以做什么使其更容易理解，請告訴我們。

使用瀏覽器的預(yù)覽版本，打開這些工具的實(shí)驗(yàn)，來體驗(yàn)即將到來的功能，幫助它們變得更好。

對(duì)于瀏覽器開發(fā)工具，你可以直接聯(lián)系我，或者聯(lián)系我的官方Twitter賬戶(@EdgeDevTools)。更好的方法是使用瀏覽器工具內(nèi)建的反饋機(jī)制，因?yàn)樗鼤?huì)直接進(jìn)入錯(cuò)誤隊(duì)列。點(diǎn)擊右上方的“屏幕前的人”圖標(biāo)即可到達(dá):

開發(fā)工具與高亮聯(lián)系人按鈕

聯(lián)系開發(fā)工具團(tuán)隊(duì)是構(gòu)建在開發(fā)工具中的。

這將開啟一個(gè)對(duì)話，給你一個(gè)機(jī)會(huì)來描述你的問題。它還會(huì)為您創(chuàng)建有問題的頁面的截圖。你也可以發(fā)送遙測和給我們的電子郵件，以要求更多的細(xì)節(jié)。你可以用任何語言提問——我們有一個(gè)翻譯團(tuán)隊(duì)來幫助我們。

開發(fā)人員工具中的聯(lián)系人對(duì)話的截圖

在與我們聯(lián)系時(shí)，我們會(huì)盡力幫助您提供我們所需要的所有信息。

我們知道這個(gè)問題，我們希望工具是你使用和學(xué)習(xí)的東西，當(dāng)你使用它們。你不需要已經(jīng)是這方面的專家。這是一個(gè)瘦身、重新安排和尋找新方法來增強(qiáng)下一代開發(fā)人員能力的好時(shí)機(jī)。

我很高興能與一個(gè)致力于簡化工作的團(tuán)隊(duì)一起工作，并努力滿足所有開發(fā)人員的需求。有相當(dāng)多的東西在制造和這些是令人興奮的時(shí)刻。