Day 16｜Agent 怎麼知道「我現在看的活動」是哪一場？
2026 iThome 鐵人賽 WebMCP Day 16：安安～我是ChiYu～ 昨天的 search_events 已經找到「WebMCP 入門工作坊」，還順便帶回一個不透明的活動 ID： evt-webmcp-intro。今天我沿著搜尋結果進入詳情頁，準備問下一個很自然的問題： 請整理我現在看的活動名…
WebMCP
AI Agent
JavaScript
tag
JavaScript
這裡整理與「JavaScript」相關的已發布文章，依最新更新排序。
22 篇文章
Latest first
文章列表
一般更新
前端開發
2026-08-17
6 分鐘閱讀
點閱 0
Day 15｜讓人類與 Agent 共用同一套活動搜尋規則
2026 iThome 鐵人賽 WebMCP Day 15：安安～我是ChiYu～ 昨天先把網站範圍鎖定在五支 Tool 與三條活動流程，也留下可以重播的正式搜尋基線。今天 不再增加功能，而是正式驗收第一段能力：搜尋活動。 這裡最重要的不是讓 Agent 多一條專用捷徑，而是讓人類表單與 search_ev…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-16
6 分鐘閱讀
點閱 1
Day 14｜先凍結開發範圍：五支 WebMCP Tool 串起三條活動流程
2026 iThome 鐵人賽 WebMCP Day 14：安安～我是ChiYu～ 昨天終於讓 Inspector 自己選中 search_events，完成了第一筆自然語言搜尋。看到完整 trace 跑出來的那一刻，很容易冒出下一個念頭：既然搜尋都成功了，要不要順便加登入、 付款、後台，再補一支推薦活動的…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-15
4 分鐘閱讀
點閱 0
Day 13｜第一次用 Inspector 測 Agent，先遇到 Gemini API 額度不足
2026 iThome 鐵人賽 WebMCP Day 13：安安～我是ChiYu～ 前天讓 HTML 表單透過 Declarative API 描述自己，昨天再用 Imperative API 管理動態 Tool 的註冊與解除。Chrome 已經看得到 Tool，網站端的生命週期也補好了。準備這麼久，今天總…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-14
6 分鐘閱讀
點閱 0
Day 12｜什麼是 Imperative API？用 JavaScript 控制 Tool 的註冊與解除
2026 iThome 鐵人賽 WebMCP Day 12：安安～我是ChiYu～ 昨天介紹的 Declarative API 很適合表單：只要替既有 HTML 補上標註，瀏覽器就能整理出 Tool 契約。表單待在頁面上，Tool 也跟著待在頁面上，兩邊的生命週期幾乎黏在一起。 但活動詳情不是一張等著送出的…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-13
7 分鐘閱讀
點閱 0
Day 11｜什麼是 Declarative API？讓 HTML 表單成為 WebMCP Tool
2026 iThome 鐵人賽 WebMCP Day 11：安安～我是ChiYu～ 昨天打開 Inspector 後，Chrome 終於把目前頁面的 Tool 列了出來。面板裡有名稱、 description，還有一大段 input schema。 看到 catalog 當然很開心，但我很快又卡在下一個問題…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-12
5 分鐘閱讀
點閱 0
Day 10｜什麼是 WebMCP Inspector？從安裝、設定到看見網站 Tool
2026 iThome 鐵人賽 WebMCP Day 10：安安～我是ChiYu～ 昨天才把五支 Tool 的名單定下來，今天要把紙上的 catalog 搬進真實 Chrome。不過在打開 面板以前，得先回答一個最基本的問題：WebMCP Inspector 到底是什麼？ WebMCP Inspector …
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-11
5 分鐘閱讀
點閱 0
Day 09｜網站該公開哪些 WebMCP Tool？從操作盤點到五支正式能力
2026 iThome 鐵人賽 WebMCP Day 9：安安～我是ChiYu～ 昨天才把 click_blue_search_button 請出 catalog，我差點又用同一套方法，把剩下的按鈕 全部包成 Tool。 我先把網站上看得到的操作列出來：展開篩選器、切換頁籤、查看詳情、收藏、關閉 dialo…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-10
5 分鐘閱讀
點閱 0
Day 08｜WebMCP Tool 該怎麼設計？把「點按鈕」改成「搜尋活動」
2026 iThome 鐵人賽 WebMCP Day 8：安安～我是ChiYu～ 昨天才把二十道測試題出好，今天輪到我寫第一份答案。我從最單純的搜尋活動開始，打開 頁面，看著那顆藍色的「搜尋活動」按鈕，很順手地寫下： 有一說一，這個名字很好懂，懂到連自動化測試都知道下一步要按哪裡。問題是，我現在設計 的是給…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-09
10 分鐘閱讀
點閱 0
Day 07｜Agent 偶爾答對還不夠，我先出二十道測試題
2026 iThome 鐵人賽 WebMCP Day 7：安安～我是ChiYu～ 昨天把 E0～E5 的證據等級排好後，我正準備動手寫第一支 WebMCP Tool，卻發現順序好像反了。 如果連「怎樣才算做對」都還沒說清楚，Tool 寫完之後，我很可能只挑一個最聽話的 Prompt， 看到 Agent 成功…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-08
6 分鐘閱讀
點閱 0
Day 06｜Playwright、REST API、MCP 與 WebMCP，各自負責哪一段？
2026 iThome 鐵人賽 WebMCP Day 6：安安～我是ChiYu～ 昨天 Playwright 因為按鈕改名而停在 click 以前。看到這個結果，很容易順手得出一個省事的 結論：「Browser Automation 太脆弱，換 WebMCP 就好了。」 有一說一，這個結論下得太快。Play…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-07
5 分鐘閱讀
點閱 0
Day 05｜只改按鈕四個字，Playwright 為什麼停在 click 以前？
2026 iThome 鐵人賽 WebMCP Day 5：安安～我是ChiYu～ 昨天我在搜尋按鈕外面多包一層元素，getByRole() 仍然順利找到它。這讓我留下另一個問題： 外層結構改了沒事，那按鈕名稱改了呢？ 今天我真的只改四個字，把「搜尋活動」換成「探索場次」。活動資料沒變，submit hand…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-06
5 分鐘閱讀
點閱 0
Day 04｜按鈕只多包一層，哪種 Playwright Locator 撐得住？
2026 iThome 鐵人賽 WebMCP Day 4：安安～我是ChiYu～ 昨天我把活動網站從搜尋一路走到取消報名，最後挑了風險最低的搜尋流程，準備交給 Playwright 重播。今天它正式接班：開啟頁面、填入 WebMCP、按下搜尋，再確認畫面出現 一場活動。 第一輪很順，四行程式碼就完成了。接著…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-05
6 分鐘閱讀
點閱 3
Day 03｜先別急著做 Tool，我把活動網站自己走了一遍
2026 iThome 鐵人賽 WebMCP Day 3：安安～我是ChiYu～ 昨天把專案切到固定 tag，Web、API、測試和 build 也都跑起來了。照這個進度，今天最容易 做的事情，就是立刻替網站加上第一支 WebMCP Tool。 但我先把 Inspector 關掉。 不是它做錯了什麼，只是今…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-04
6 分鐘閱讀
點閱 0
Day 02｜換到全新資料夾後，網站還能不能跑？
2026 iThome 鐵人賽 WebMCP Day 2：安安～我是ChiYu～ 昨天才把完成版的 Agent trace 端上桌，今天我做的第一件事，卻是把它收起來。 我另外開了一個空資料夾，重新 git clone，沒有沿用原本的 node_modules，也沒有順手把 環境裡那些「反正我的電腦已經有」…
WebMCP
AI Agent
JavaScript
一般更新
前端開發
2026-08-03
12 分鐘閱讀
點閱 2
Day 01｜網站真的會被 Agent 使用嗎？我先丟了一句自然語言
2026 iThome 鐵人賽 WebMCP Day 1：安安～我是ChiYu～ 今年我想拿一個很新的 Web API，做一件很老派的事：實際把它做完，再看看它到底有沒有 簡報上那麼神。 我先對 WebMCP Inspector 丟了一句很普通的需求： 幫我找台北、免費，而且適合入門者的活動。 沒有 Too…
WebMCP
AI Agent
JavaScript
一般更新
優化篇
2025-09-19
3 分鐘閱讀
點閱 1
Day 31: 【優化篇】代碼的整形外科：JavaScript 模組化與代碼重構
今天我們將為原本臃腫的 script.js 進行一次徹底的「整形手術」，引入專業的 JavaScript 模組化結構。
Software Engineering
Gemini
JavaScript
一般更新
前端開發
2025-09-16
8 分鐘閱讀
點閱 2
Day 28: 【前端 #8】兌現承諾：根據規格書 Vibe Coding 關聯性洞察圖表
今天我們將正式拿起工具，嚴格依據昨天的這份《圖表元件規格書》，指揮 AI 和 Chart.js，將這幅數據的畫布，變成真實、可互動的前端程式碼！
Frontend
Gemini
JavaScript
一般更新
前端開發
2025-09-13
8 分鐘閱讀
點閱 0
Day 25: 【前端 #6】核心生命週期：一天搞定習慣的「增刪改查」與「打卡」
今天我們將火力全開，搞定所有習慣的「增、刪、改、查」與「打卡」功能，讓 App 真正地動起來。
Frontend
Gemini
JavaScript
一般更新
前端開發
2025-09-12
8 分鐘閱讀
點閱 0
Day 24: 【前端 #5】狀態管理的哲學：讓 UI 成為數據的鏡子
今天我們將深入探討狀態管理的心法，並引入一個輕量的狀態中心模式，讓我們的 UI 成為數據最忠實的鏡子。
Frontend
Gemini
JavaScript
一般更新
前端開發
2025-09-11
8 分鐘閱讀
點閱 1
Day 23: 【前端 #4】非同步的藝術：深入 Fetch API 與 Promise
今天我們將深入前端開發中最核心的觀念——非同步程式設計，並學習如何使用 Fetch API 讓前後端進行對話。
Frontend
Gemini
JavaScript
一般更新
前端開發
2025-09-05
6 分鐘閱讀
點閱 0
Day 17: 【前端 #0】前端世界的基石： HTML, CSS 與 JavaScript
今天，我們將回歸本心，認識一下構成生命的三大基本元素：HTML, CSS, 與 JavaScript。
Frontend
HTML/CSS
JavaScript