iT邦幫忙

0

一個外掛,讓 WebStorm 的 AI 能看懂瀏覽器裡發生的事

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20261001/20182171BvD5obngvc.png

前兩篇聊 IntelliJ IDEA 和 PyCharm,都提到 JetBrains 合併免費版和付費版的事。WebStorm 從來沒有這個問題,一直只有單一版本。2024 年 10 月起個人非商業用途免費,產品本身從頭到尾就是一個。

這篇聚焦它現在的技術走向,尤其是前端場景才有意義的功能。

Chrome Connect:AI Agent 能看到瀏覽器裡發生什麼

這是系列裡第一個真正只有前端場景才有意義的功能。Chrome Connect 外掛讓 Agent 能存取即時的瀏覽器 runtime 狀態、直接操作瀏覽器,解決前端最常見的除錯迴圈——改程式碼、切瀏覽器看效果、開 DevTools 看錯誤、切回 IDE 改程式碼,這個迴圈過去要手動搬運資訊,現在 Agent 可以直接讀到 runtime 狀態自己跑完。

啟用方式:確認 AI Assistant 已安裝,在 Plugins 設定啟用 Chrome Connect(內建外掛),再到 AI Assistant 的 Skills 設定確認 chrome-devtools-cli 這個 skill 是開啟的。

TypeScript 引擎換血,和多 Agent 併存

2026.1 把預設分析引擎換成直接呼叫微軟官方 TypeScript Language Service,大型 codebase 的分析效能問題,維護責任轉移到微軟官方引擎本身。同版本跟進 TypeScript 6,2026.2 支援 TypeScript 7。

AI Chat 可切換 Junie、Claude Agent、Codex,2026.2 原生整合 GitHub Copilot(不需額外裝外掛)。同版本推出 Agent Skills Manager,讓 Agent 對你技術棧的知識跨專案、跨工作階段保留,不用每次開新 session 重新解釋一次。

MCP 支援從 2025.2 起內建,和前兩篇提過的機制相同,這裡不重複。

框架支援和一個容易忽略的差異

React、Vue、Angular、Svelte 都有原生支援,React Buddy 外掛提供元件面板和 Storybook 整合。

值得注意:WebStorm 的資料庫工具和 SQL 支援是內建免費的,PyCharm 卻把這塊鎖在 Pro 訂閱後面。同樣是 JetBrains 產品線,功能分配邏輯並非跨產品統一,不能假設某功能在所有 IDE 都同樣付費層級。

和其他前端開發環境的技術差異

WebStorm VS Code + 前端擴充 Cursor
瀏覽器Runtime存取給Agent Chrome Connect 原生支援 需拼湊擴充套件 無原生支援
資料庫工具 內建免費 需擴充套件 無原生支援
框架視覺化工具 React Buddy 原生整合 需擴充套件 無

VS Code 擴充生態廣,但深度取決於個別套件品質。Cursor 走 AI 優先設計,換掉整個編輯器是代價。

最後

WebStorm 的 AI 整合大方向和 IntelliJ IDEA、PyCharm 一致,但長出來的功能因應前端場景而不同——Chrome Connect 解決的是瀏覽器和 IDE 之間的除錯迴圈,這是後端或資料科學工作流用不到的東西。

有用過 Chrome Connect 或 Agent Skills Manager 的心得,歡迎留言分享。

此文章同步發布於 Medium

[JetBrains 同系列文章]

IntelliJ IDEA 介紹
PyCharm 介紹
Rider 介紹

參考來源:


圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言