標題：“從 StackOverflow 到 Vibe Coding：複製貼上開發的演變”
已發布：真實
描述：“我們如何從複製 StackOverflow 答案轉變為使用 AI 編寫程式碼，以及為什麼修復錯誤的工具也需要發展”
標籤：javascript、web 開發、ai、除錯
上週，我正在幫助一位開發人員除錯他們的 Vue 應用程式。整個程式都是由 Claude 編寫的。並非「協助」或「結對程式設計」——而是由 AI 根據一系列提示直接編寫的。
錯誤？一個典型的競爭條件，任何寫過非同步 JavaScript 的人都能一眼發現。但問題是──他們從來沒有寫過非同步 JavaScript。他們只是提示過這個問題。
說實話？我一點也不驚訝。自從程式設計誕生以來，就一直有複製貼上的開發者。他們只是改變了複製的地方而已。
StackOverflow 時代（2008-2020）
還記得 StackOverflow 曾經是職涯發展中一個骯髒的小秘密嗎？我們會在另一個標籤頁裡打開它，瘋狂地搜尋那個帶有綠色勾號的答案。
// copied from StackOverflow
uuid: function () {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == "x" ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}我已經複製貼上這個小傢伙好幾年了。
至少在 StackOverflow 上，你可以看到其他開發者在評論區爭論這個解決方案為什麼是錯的。這在某種程度上很有教育意義。你會了解到你的程式碼很糟糕，但也會知道它為什麼很糟糕，通常是從那些對分號持有強烈意見的人那裡了解到的。
GitHub Copilot 過渡（2021-2023）
然後出現了 Copilot，突然之間，我們在還沒意識到需要程式碼之前就開始複製程式碼了。這就像擁有一個打字速度超乎想像的高級開發人員，只不過它接受過所有 npm 套件的訓練，包括那些有嚴重安全漏洞的套件。
Copilot 的奇特之處在於，它讓你感覺自己仍在寫程式碼。你輸入一條註釋，按下 Tab 鍵，然後砰——函數就立即生效了。你「編程」的方式，就如同加熱冷凍晚餐「烹飪」一樣。
// Function to validate email
function validateEmail(email) {
// Copilot autocompleted this regex I'll never understand
const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}我們從複製整個函數變成了複製整個檔案。進展如何？
ChatGPT 革命（2023 年至今）
現在我們甚至不用假裝寫程式了。我們只需用簡單的英語描述我們想要什麼，然後期待最好的結果。這叫做“快速工程”，就像你擅長谷歌，就自稱是“搜尋工程師”一樣。
現代開發工作流程：
我親眼目睹一位初級開發人員用這種方法搭建了一整個電商網站。他們雖然無法解釋 useEffect 的作用，但卻能幫助他們順利實現 Stripe 支付。這既令人印象深刻，又令人忐忑不安。
劇情轉折：AI 產生的 bug 需要 AI 驅動的除錯
很少有人談論這一點：當AI編寫程式碼時，傳統的除錯幾乎變得不可能。你無法除錯你不懂的程式碼。這就像你不知道引擎是什麼卻試圖修理汽車一樣。
上個月，我們發現一個生產環境問題，React 拋出了 Hydration 不匹配錯誤。編寫該錯誤（或更確切地說，是提示出現該錯誤）的開發者根本不知道 Hydration 是什麼意思。他們只知道 ChatGPT 建議在他們的元件中使用Date.now() ，結果生產環境就陷入了癱瘓。
這正是我們在 TrackJS 建立AI 程式碼偵錯器的原因。並非因為我們想這麼做——我其實很討厭我們需要這個——而是因為這是我們目前處境的必然結果。如果 AI 編寫了 bug，那麼 AI 也需要修復它們。
偵錯器可以看到完整的錯誤上下文：堆疊追蹤、瀏覽器資訊、使用者操作、網路請求。這就像有一位真正理解程式碼的高級開發人員來審查程式碼一樣，只不過這位高級開發人員讀過所有存在過的 JavaScript 錯誤，並且不會因為你不知道 Promise 是什麼而評判你。
令人不安的真相
我們已經從 StackOverflow 複製看不懂的程式碼，變成了從 AI 複製看不懂的程式碼。唯一真正的區別在於，AI 不會被動地告訴我們問題是重複的。
但真正讓我困擾的是：我們正在培養一代什麼都能做，卻什麼都做不了的開發者。他們能用提示符號建立複雜的應用程式，卻無法除錯簡單的競爭條件。他們知道如何取得程式碼，卻不知道如何閱讀程式碼。
接下來會發生什麼事？
我覺得我們不會再回到過去了。妖怪已經從瓶子裡出來了，說實話，生產力提升實在太誘人了，捨不得放棄。我現在可以在幾個小時內完成以前需要幾天才能完成的原型製作。
不同之處在於，現在整個技術棧都變得不透明了。我們建構在自己不懂的基礎上，使用自己沒寫過的程式碼，除錯自己無法理解的錯誤。一路下來，就像海龜一樣，只不過這些海龜是用 Reddit 評論訓練的語言模型。
也許這沒什麼。也許理解程式碼的重要性被高估了。也許我們正在進入一個軟體開發更注重「知道要建構什麼」而非「如何建構」的時代。
或者，當所有這些 AI 生成的程式碼庫都需要由從未編寫過 for 循環的人類來維護時，我們可能正在為一個巨大的失敗做準備。
無論如何，至少除錯工具還在跟上。我們的AI 程式碼偵錯器可以解釋 AI 產生的程式碼失敗的原因，並提供範例和修復方法。它完全是 AI 的，我討厭它執行得這麼好。
你的看法是什麼？作為開發者，我們是在進步還是退化？你是否發布過自己看不懂的 AI 生成程式碼？歡迎在下方留言——我保證不會評判。我們只是努力發布功能，然後回家而已。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
