付費限定

Chrome DevTools MCP 用於自動化 Web 開發

更新 發佈閱讀 11 分鐘

在前端開發時,每次遇到 console 錯誤就要去複製、截圖,再交給 AI 處理,真的蠻麻煩的。我自己在本機環境做測試時,每次有錯誤就打開 DevTools 複製錯誤訊息,再貼到 Claude Code……這樣重複操作過很多次。其實使用 Chrome DevTools MCP 就能搞定所有事情。

簡易摘要

以行動支持創作者!付費即可解鎖
本篇內容共 4177 字、0 則留言,僅發佈於沙龍創始俱樂部你目前無法檢視以下內容,可能因為尚未登入,或沒有該房間的查看權限。
留言
avatar-img
留言分享你的想法!
avatar-img
Kiki的沙龍
4會員
64內容數
心繫正體中文的科學家,立志使用正體中文撰寫文章。 此沙龍預計涵蓋各項資訊科技知識分享與學習心得
Kiki的沙龍的其他內容
2025/09/28
1. 前言 對工程師來說,幾乎每天都會用到的「SSH」為什麼能確保安全?本文將一步步帶你了解 SSH 通訊背後的機制。 2. SSH 連線的全貌 先來看 SSH 連線建立的整體流程。從客戶端發出連線請求,到最終開始安全的加密通訊,中間其實經過了多個步驟。 (下文會逐步解析圖示中的每個步驟)
2025/09/28
1. 前言 對工程師來說,幾乎每天都會用到的「SSH」為什麼能確保安全?本文將一步步帶你了解 SSH 通訊背後的機制。 2. SSH 連線的全貌 先來看 SSH 連線建立的整體流程。從客戶端發出連線請求,到最終開始安全的加密通訊,中間其實經過了多個步驟。 (下文會逐步解析圖示中的每個步驟)
2025/09/28
大家在用 Claude Code 開發時,有沒有想過「希望能做更深入的分析」、「想解決更複雜的問題」呢?特別是最近這一個月,Claude Code 部分模型的效能下降了,應該有不少人因此感到困擾。可能因此,有不少人開始轉去使用 OpenAI 推出的 Codex CLI。但老實說,我還是想在日常開發中
2025/09/28
大家在用 Claude Code 開發時,有沒有想過「希望能做更深入的分析」、「想解決更複雜的問題」呢?特別是最近這一個月,Claude Code 部分模型的效能下降了,應該有不少人因此感到困擾。可能因此,有不少人開始轉去使用 OpenAI 推出的 Codex CLI。但老實說,我還是想在日常開發中
2025/06/12
微軟於 2025 年 5 月 20 日盛大舉行 Microsoft Build 開發者大會,宣布 AI 代理(AI Agent)時代已正式展開,並將引領科技進入一個全新的階段。隨著推理與知識管理技術的突破,AI 模型如今更強大、有效率,本文整理所有新的發表與未來趨勢。
2025/06/12
微軟於 2025 年 5 月 20 日盛大舉行 Microsoft Build 開發者大會,宣布 AI 代理(AI Agent)時代已正式展開,並將引領科技進入一個全新的階段。隨著推理與知識管理技術的突破,AI 模型如今更強大、有效率,本文整理所有新的發表與未來趨勢。
看更多
你可能也想看
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
因為最近想嘗試編碼風格,於是就選了一套比較"不嚴格"的輔助工具來摸索。 編輯器 VS CODE 框架 VUE3 打包工具 VITE 編碼風格 Standard 環境 version { "nodejs":"v18.18.0", "npm":"9.8.1" }
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
JavaScript30 傳送門:https://javascript30.com/ 寫到挑戰六覺得心累ㄌ,向來不是一個可以長久堅持好習慣的人,30 個挑戰聽起來很少,但如果要日復一日堅持下去其實好長r 😮‍💨 挑戰六透過 input 來 filter 從 api 拿回來的資料結
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
本章目的是為讀者提供有關如何設置JavaScript開發環境的知識,包括在瀏覽器、Node.js和各種編輯器和IDE中編寫和運行JavaScript的信息。此外,本章還介紹了如何架設本地開發伺服器以模擬實際的網頁環境。這些知識對於希望開發前端應用或後端服務的JavaScript開發者來說都是必要的。
Thumbnail
如果你不擅長直接編寫原始碼的話,要製作網頁、電子報,一定會非常辛苦,本文介紹的開源網頁神器 GrapesJS 絕對是你在找的工具,強大又免費的特性,可以用 Chrome App 的方式安裝,其它編輯器比起來又簡單很多;還有自訂原始碼……
Thumbnail
如果你不擅長直接編寫原始碼的話,要製作網頁、電子報,一定會非常辛苦,本文介紹的開源網頁神器 GrapesJS 絕對是你在找的工具,強大又免費的特性,可以用 Chrome App 的方式安裝,其它編輯器比起來又簡單很多;還有自訂原始碼……
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
如果你曾經撰寫過網頁,那你一定接觸過 JavaScript 無論是在 NodeJs 或是瀏覽器中運行。 但你有沒有想過,我們寫下的 JS 程式碼,這些看似單純的英文和符號,是如何被轉化為機器能夠理解和執行的程式呢? 今天,讓我們一起深入了解其中的核心主角 ——Google 開發的開源 Java
Thumbnail
今天來分享一個好像有點廢的小技巧 把網頁變成可以直接用來打字的文字編輯器
Thumbnail
今天來分享一個好像有點廢的小技巧 把網頁變成可以直接用來打字的文字編輯器
Thumbnail
在 IG 上看到一位前端大大用 Google Apps Script + Line bot 替自己的球隊安排了球經,覺得很有趣,想來玩看看
Thumbnail
在 IG 上看到一位前端大大用 Google Apps Script + Line bot 替自己的球隊安排了球經,覺得很有趣,想來玩看看
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News