如何在主控台中使用 Claude 擔任 JavaScript 家教（不是透過影片）

2026年9月12日

Skill · SKILL.md

這份指南背後的 Skill：AI JavaScript Tutor。將 Claude、ChatGPT 或 Gemini 變成 tutor，從第一課開始讓你在瀏覽器主控台中撰寫 JavaScript - $19，一次付款，永久擁有。

查看 JavaScript tutor →

作為 JavaScript tutor，Claude 值得使用的原因只有一個：它會讀取你寫的程式碼，告訴你哪裡的心智模型出了問題。它看不到你的瀏覽器，也不知道你的主控台印出了什麼，更不會替你點擊頁面。你執行程式碼、貼上得到的結果，然後它從結果反向追查你誤解的地方。這個循環才是真正的教學。其他一切都只是裝飾。

JavaScript 比大多數入門語言更會懲罰半吊子的理解，因為它會很樂意執行你有問題的程式碼，然後什麼都不產生。沒有錯誤、沒有輸出，也沒有線索。在這裡，一位會追問你假設的 tutor，比在幾乎任何其他語言中都更有價值。

AI JavaScript tutor 做了什麼，是課程做不到的？

它會根據你的反應調整。課程是一條在你出現之前就預先錄製好的固定學習路線，因此它無法察覺你已經熟悉陣列，卻完全搞不懂 這件事 所指的內容。Tutor 檔案會安排你完成一項任務，讀取你寫的程式碼，並根據剛發現的差距重新安排接下來的內容。

AI JavaScript Tutor 會按照 JavaScript 實際讓人出錯的順序安排課程：值與作用域、陣列與 map、物件與解構，接著是 DOM 與事件，最後才是 promise 與非同步 await。最後這個順序非常重要。在還無法理解狀態之前，就先要求學習者理解時間，這正是把非同步放在 DOM 之前的問題，也是大多數自學者悄悄停下來的地方。

人們實際上會在哪些地方卡在 JavaScript？

一貫地出現在四個地方，而且沒有一個是語法問題：

未定義不代表錯誤。Cannot read properties of undefined 是每個人早期都會遇到的錯誤，而原因幾乎從來不在它指出的那一行。
DOM 尚未準備好。你的指令碼執行了，但元素尚未存在，什麼都沒發生，也沒有任何錯誤提示。
非同步。程式碼以錯誤的順序完成、在值抵達前就讀取它們，以及在應該出現資料的地方記錄了 Promise { <pending> }。
沒有模型地複製。搜尋結果中的可運作程式碼片段只能解決今晚的問題，卻什麼也教不會，因此同一個錯誤下週會以不同形式再次出現。

要如何只貼上一段內容，就把 Claude 設定成 JavaScript 導師？

開啟新的對話，在任何頁面上開啟瀏覽器主控台，先進行定位，而不是先列出課程大綱。主控台是最初幾週最適合的教室：不需要建置步驟、不需要安裝，還能立即獲得回饋。

提示 - 定位任務

你是我的 JavaScript 導師。現在先不要教任何東西。

給我一個可以在瀏覽器主控台執行的任務。它需要用到一個陣列、一個函式和一個物件，且少於十五行。告訴我正確的輸出結果應該是什麼。

我會自己寫出來，並貼回我的程式碼，以及主控台實際印出的完整內容，包括錯誤訊息。

然後告訴我：
1. 我的程式碼證明我理解了什麼。
2. 之後最有可能讓我付出最大代價的那個誤解。
3. 依序列出我接下來的六個主題，並用一句話說明為什麼要按這個順序。

永遠不要替我寫出任務。如果我貼上一段壞掉的程式碼，那比貼上一段能運作的程式碼對你更有用。

你要如何教它非同步，卻不讓我跟不上？

非同步如果被當成語法來教，就容易出問題。 await 它很容易輸入，卻很難讓人相信，因為它要求你接受一行程式碼可以暫停，而頁面的其餘部分仍會繼續執行。解決方法是在執行前先預測，然後進行比較。公開說出錯誤，就是學習的一部分。

提示 - 先預測，再執行

使用預測而不是先講解的方式教我 [async/await，或該主題]。

1. 給我一段少於 15 行、其中包含兩到三個 console.log 呼叫的程式碼。
2. 在你解釋任何事情之前，要求我寫下日誌會出現的確切順序，以及每一則日誌會印出什麼。
3. 等待我的回答。
4. 只有在那之後才告訴我實際的執行順序，並具體解釋我答錯的那些行為什麼錯。忽略我答對的部分。
5. 給我第二段程式碼，從不同角度打破同一個假設。

在我連續正確預測兩段程式碼之前，不要進入下一個主題。

Skill · 導師之後的實用助手

Max - 全端開發者 AI Skill

導師會刻意放慢你的學習速度。等你能夠在沒有協助的情況下撰寫 JavaScript，你想要的就正好相反：一個能在前端和伺服器端協助你處理結構，以及真實專案中沒有任何課程會涵蓋的部分的實用助手。Max 就是這個檔案，29 美元，一次付款。先跟導師學習，然後再切換過去。

查看 Max →

當你有某個想讓它存在的東西時，課程也不再抽象。兩個專案檔案很適合搭配教學工具使用：Chatbot Builder for Node.js（$14.99）用於建構可運作聊天機器人的伺服器端，包含路由、金鑰與串流功能；Chatbot Builder for React（$14.99）則用於同一個專案的前端介面。先把其中一個做得很糟，再重新建構一次。那會是你能擁有的最快速學習週。

如何才能得到真正的診斷，而不是一個修正後的檔案？

要求修正，你就會得到修正方案，而這正是學習初期完全錯誤的取捨。明確禁止這麼做後，同一個模型就會變得實用。

提示詞 - undefined 關卡

我的程式碼沒有按照預期執行。以下是程式碼，以及主控台輸出的內容。

[PASTE CODE]
[PASTE CONSOLE OUTPUT]

規則：不要提供修正後的程式碼，也不要重寫函式。

1. 告訴我瀏覽器指出的是哪一行，而實際負責的是哪一行。
2. 問我在那個時間點認為某個特定變數保存了什麼，以及原因。
3. 等我回答。如果答案錯了，就問我更聚焦的問題，而不是直接告訴我。
4. 給我一行 console.log 或一行 debugger，我加上後就能自行看出問題。

最後，說出能避免這整類錯誤的一般性習慣。

你接下來需要哪個 JavaScript 教學檔案？

始終先從原生 JavaScript 開始。框架會掩蓋你真正想學的東西。等語言基礎穩固後，AI TypeScript Tutor 就是最短的下一步，因為它使用相同的語言，只是把你原本已經在腦中維持的型別明確表示出來。之後則依工作需求分流：AI React Tutor 適合多數招聘文章要求的元件模型，AI Angular Tutor 適合企業環境與強烈規範的工作場所，而如果你的真正目標是 iPhone App，網頁只是繞道，則選擇 AI Swift Tutor。AI Skill for JavaScript 則完全是另一種檔案：在你學會這些之後使用的實用助理，而不是老師。

它會在哪些地方失效？

它看不到你的頁面。沒有 DOM、沒有網路分頁，也沒有渲染結果。如果症狀是視覺上的，請描述它或貼上螢幕截圖，因為只根據原始碼猜測時，它最容易捏造內容。
它不知道你使用的框架版本。JavaScript 工具發展快速，記憶中的 API 詳細資訊可能會在不知不覺中過時。任何與版本相關的內容，都應對照官方文件確認。
它很樂意過早教你某個框架。如果你在第二週要求學習 React，它就會照做。這是你的判斷，而不是它的。
它無法知道你是否執行過程式碼。跳過任務，卻說任務已完成，課程仍會繼續進行，而你並沒有真正學習。
建置工具是最薄弱的部分。Bundler 設定和模組錯誤取決於它看不到的檔案，因此預期你需要在這方面多做一些描述。
它不會讓你練習。每天二十分鐘勝過週日一次五小時，而檔案中的任何內容都不會強制你這麼做。

Skill · 重新閱讀自己的程式碼

Yuri - 程式碼審查 AI Skill

區分會進步的人與停滯不前的人的習慣，是重新閱讀自己已經成功執行的程式碼。Yuri 會檢視你撰寫的內容，告訴你哪些地方脆弱以及原因；它採用的是同事般的語氣，而非老師般的口吻。29 美元，一次付款。你的檔案超過一百行後，立刻就能派上用場。

查看 Yuri →

如何安裝這個檔案？

這個 tutor 是 ZIP 內的 SKILL.md 檔案。在 Claude 中，開啟「自訂」→ Skills，按下 + 按鈕，選擇「建立 Skill」，接著選擇「上傳 Skill」，然後選取 ZIP。將它切換為開啟後即可使用。Free、Pro、Max、Team 和 Enterprise 方案皆提供 Skills。

唯一真正的要求是程式碼執行。如果 Skills 選單呈現灰色，請前往「設定」→「功能」將其開啟；它在該處列為程式碼執行和檔案建立。在 Team 和 Enterprise 方案中，擁有者可於組織設定中控制這項功能，因此如果整個組織都將其關閉，請向該擁有者詢問。Anthropic 在其 Skills 說明文章中完整說明了這些內容。

如果你無法啟用程式碼執行功能，或正在使用 ChatGPT 或 Gemini，備用方式使用相同的檔案：開啟 ZIP，複製 SKILL.md 的內容，然後貼到 Project、自訂 GPT、Gem 或一般的自訂指示中。行為完全相同，只是在切換工具時需要重新貼上。

總結：

使用 AI JavaScript 家教（19 美元）正確評估程度，在主控台中學習，並在執行前先進行預測。語言基礎穩固後，轉用 AI TypeScript 家教或 AI React 家教（每個 19 美元），再使用 Node.js 聊天機器人建構器（14.99 美元）打造真正的作品。全部可在 Claude、ChatGPT 和 Gemini 中運作，約兩分鐘即可安裝，並提供 30 天退款保證。

Skill · SKILL.md · 適用於 Claude 與 ChatGPT