DevFest DevTools MCP Workshop Log
记录我在 Google DevFest 2025 深圳开发者嘉年华（AI / 出海 / Android / Web） 上，围绕 Chrome DevTools MCP Server 的一场实战 Workshop。
这个仓库是一份「活动官网风格」的单页网站，用来记录：
- GDG & DevFest 的社区氛围
- Chrome DevTools MCP 的概念和实操
- 我自己（odex）在这次 Workshop 中的收获与配置记录
特别说明：页面内容与布局是由 Codex GPT‑5 + Chrome DevTools MCP + 我自己 一起协作完成的。
线上版通过 GitHub Pages 发布。
技术栈
- 构建工具：Vite 7
- 包管理 / 运行时：Bun（推荐用
bun而不是npm） - 样式：
- 手写 CSS（放在 index.html，偏 Google / DevFest / Material Design 风格） - Tailwind CSS + DaisyUI（通过 PostCSS 注入，方便后续扩展组件）
- 部署：GitHub Actions → GitHub Pages（项目页）
本地开发
前置：本机安装了 Bun（1.2.x）。
# 安装依赖
bun install
# 启动开发服务器（默认 http://localhost:5173/）
bun run dev然后可以通过浏览器访问 http://localhost:5173/，或者在 VS Code + DevTools MCP Server 中，让代理打开这个页面调试布局和样式。
构建 & 预览
# 生产构建
bun run build
# 本地预览构建产物
bun run preview构建输出在 dist/ 目录，GitHub Pages 也是部署这份产物。
部署（GitHub Pages + Actions）
仓库里已经配置好了工作流：.github/workflows/deploy.yml。
大致流程：
- 当 push 到
main，或者手动触发 workflow 时：
- 使用 oven-sh/setup-bun@v2 安装 Bun（版本目前固定为 1.2.19） - bun install - bun run build（Vite 构建到 dist/） - 上传 dist/ 为 Pages artifact
- 之后
deployJob 调用actions/deploy-pages@v4，发布到 GitHub Pages。
在仓库的 Settings → Pages 中，记得把 Source 设置为「GitHub Actions」。
Chrome DevTools MCP 配置（VS Code + Codex）
在 DevFest Workshop 中，我使用 VS Code + Codex + Chrome DevTools MCP Server 来调这个页面。 Codex 使用 TOML 格式来配置 MCP Server，大致配置示例（节选）：
# ~/.codex/config.toml 中的节选
[mcp_servers.chrome-devtools]
command = "npx"
args = ["-y", "chrome-devtools-mcp@latest"]
# 可按需加入环境变量，比如指定 Chrome 路径：
# env = { CHROME_PATH = "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" }配置完成后，在 VS Code 里打开 Codex：
- 选择
chrome-devtools这个 MCP server - 让它打开
http://localhost:5173/或打包好的dist/index.html - 执行诸如：
- 选择 / 高亮特定元素 - 临时调整样式、检查布局 - 截图整页，记录 Workshop 的阶段性成果
本仓库中的很多样式调整，都是通过 DevTools MCP 先在浏览器里试，再落回 index.html 的。
主要文件说明
index.html
单页应用入口，包含： - 活动首页（Hero）+ GDG & DevFest + DevTools MCP + 关于我 - 自定义 CSS（卡片、栅格、响应式布局等） - 简单的导航滚动脚本
src/main.css
Tailwind CSS / DaisyUI 的入口，当前只引入了基础层，你可以按需添加组件类或工具类。
src/main.js
通过 ES Module 引入 main.css，供 Vite 打包。
tailwind.config.cjs/postcss.config.cjs
Tailwind + DaisyUI + PostCSS 配置。
vite.config.mjs
Vite 配置，包含 GitHub Pages 所需的 base 路径。
.github/workflows/deploy.yml
GitHub Actions 工作流，使用 Bun 进行依赖安装与构建，并发布到 GitHub Pages。
后续可以做的事
- 把部分手写卡片（比如 DevTools MCP 区）逐步替换为 DaisyUI 组件，统一一部分样式。
- 增加更多「真实记录」内容，例如：
- 在 Workshop 中踩过的坑 - 具体 MCP 调用场景的截图 - 对 DevTools MCP 官方文档（Chrome 开发者博客）的个人理解笔记。