agnt-browser-diagnostics

name	agnt-browser-diagnostics
description	Browser element inspect, layout diag, navigation (back/forward/reload/goto) via proxy exec — target iframe-wrapped, scope target:inner/outer; use __devtool.* helpers, not raw querySelector/getComputedStyle. 瀏覽器元素檢測、佈局、導航；目標恆iframe包裹。 Use when: inspect element, debug layout, z-index, overflow, box model, flex/grid, navigate page, goto URL, reload, iframe scoping, before raw DOM JS in proxy exec

瀏覽器診斷技能

記錄透過 __devtool API可用之瀏覽器元素檢測與佈局診斷函數。所有函數均透過proxy exec動作執行。

代原生JS之場景 — Instead of raw DOM JS

proxy exec中優先 __devtool.* 助手，勿寫裸 document.* / window.* 鏈。助手已處理：截斷長文本、序列化循環引用、壓縮響應、跨域護欄、null防護、相對選擇器路徑。裸JS每項皆失、易拋 TypeError、回傳未序列化之DOM節點。

未知API？ 先執 proxy {action: "exec", help: true} 列能力，再 proxy {action: "exec", describe: "<name>"} 取簽名。勿盲寫裸JS。

原生JS反模式 Anti-pattern	代以 __devtool 助手 Replacement
document.querySelector(sel).getBoundingClientRect()	__devtool.getPosition(sel)
getComputedStyle(document.querySelector(sel))	__devtool.getComputed(sel, [...props])
人工串 offsetTop / offsetParent / scrollTop	__devtool.getContainer(sel)
el.outerHTML.slice(0, N) + 屬性枚舉	__devtool.getElementInfo(sel)
手算盒模型（padding+border+margin）	__devtool.getBox(sel)
遍歷 el.children + 收集	__devtool.walkChildren(sel, {maxDepth})
el.closest(cond) + 手寫判斷	__devtool.findAncestor(sel, cond)
display !== 'none' && opacity > 0 && ...	__devtool.isVisible(sel)
rect.top < window.innerHeight && rect.bottom > 0	__devtool.isInViewport(sel, threshold)
兩rect求交集算重疊	__devtool.checkOverlap(sel1, sel2)
遍歷全頁找水平溢出	__devtool.findOverflows()
遍歷全頁找z-index堆疊上下文	__devtool.findStackingContexts()
多次獨立呼叫取元素資訊	__devtool.inspect(sel) (一次合併)
html2canvas / 手寫截圖腳本	__devtool.screenshot(name)
fetch('/api/...') 人工記錄	__devtool.captureNetwork()
手寫a11y規則檢查	__devtool.auditAccessibility()

為何棄裸JS：助手跨版本穩定、輸出JSON可序列化、自動截斷過長文本、記錄執行ID便於追溯、失敗時回傳結構化錯誤。裸 document.* 呼叫在exec沙箱可能洩漏DOM節點引用致序列化失敗。

呼叫格式

所有診斷均以proxy exec呼叫：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "<proxy_id>",
    "code": "__devtool.<function>(...)"
  }
}

前提條件：代理必須運行且瀏覽器已透過代理URL連接。

---

iframe 包裹之目標 — Target is always iframe-wrapped

代理今恆將目標站點包於 outer chrome shell 內之單一 content iframe。Proxy UI（指示器、面板、疊層）居 outer shell，與頁面 DOM/CSS/JS 永久隔離。

故 exec 之 target 參數定執行框：

• 略 / "inner" / "active" / "content" → 活躍 content frame（即頁面本身，預設）。一般診斷皆此。
• "outer" / "chrome" / "shell" → chrome shell（proxy UI 運行時）；僅檢視疊層狀態或 shell 診斷用。
• frame_id：多 content frame 時指定其一（罕用；target 同時設則覆蓋之）。

"parameters": {
  "action": "exec",
  "id": "<proxy_id>",
  "target": "inner",
  "code": "__devtool.getComputed('h1', ['color'])"
}

選擇器與 __devtool.* 助手自動限於目標框內 — 跨框引用無需手動處理。導航同步（content frame 之 popstate/hashchange/load）由 shell 自動同步 URL bar；telemetry 以 frameId 標記去重。

導航 — Navigation

proxy {action: "navigate"} 自活躍 content frame 驅動頁面導航：

"parameters": {
  "action": "navigate",
  "id": "<proxy_id>",
  "direction": "goto",
  "target_url": "https://localhost:3000/dashboard"
}

• direction（必需）："back" / "forward" / "reload" / "goto"。
• target_url："goto" 時必需。
• target："inner"（預設，content frame）或 "outer"（chrome shell）。

回 {navigating: true, from: <previous_url>}。導航延至 microtask，使 exec 回覆先於 WS 斷線完成。

---

元素檢測函數

getElementInfo

取元素完整資訊：標籤、類別、屬性、尺寸、位置。

Signature: getElementInfo(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {tag, id, classes, attributes, text, html, dimensions, position}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getElementInfo('#submit-btn')"
  }
}

回應包含：

• tag：元素標籤名（如 "button", "div"）
• id：元素ID（若有）
• classes：類別名稱陣列
• attributes：所有屬性物件
• text：文字內容（截斷）
• html：內部HTML（截斷）
• dimensions：寬高
• position：邊界矩形座標

---

getPosition

透過邊界用戶端矩形取元素位置。

Signature: getPosition(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {top, right, bottom, left, width, height, x, y}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getPosition('.modal')"
  }
}

適用：驗證元素位置、計算元素間距離、確認元素在預期位置。

---

getComputed

取元素計算CSS樣式。

Signature: getComputed(selector, properties?)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素
• properties: string[] — 指定屬性（預設：常用屬性）

Returns: {property: value, ...}

取特定屬性：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getComputed('#header', ['display', 'position', 'z-index'])"
  }
}

取所有常用屬性：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getComputed('.sidebar')"
  }
}

預設回傳常用屬性：

• display, position, float
• width, height, margin, padding
• color, background-color
• font-size, font-family
• z-index, opacity

---

getBox

取盒模型尺寸：內容、padding、border、margin。

Signature: getBox(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {content, padding, border, margin}，各含 {top, right, bottom, left}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getBox('.container')"
  }
}

適用：除錯間距問題、驗證padding/margin值、了解元素總體佔用。

---

getLayout

取佈局資訊：顯示類型、位置、flexbox/grid屬性。

Signature: getLayout(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {display, position, float, flexbox?, grid?}

檢查flex容器：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getLayout('.flex-container')"
  }
}

flex容器回應包含：

• display："flex" 或 "inline-flex"
• flexbox：{direction, wrap, justifyContent, alignItems, gap}

grid容器回應包含：

• display："grid" 或 "inline-grid"
• grid：{columns, rows, gap, areas}

---

getStacking

取堆疊上下文資訊：z-index及元素是否建立新堆疊上下文。

Signature: getStacking(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {zIndex, createsContext, reason?, parentContext}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getStacking('.modal-overlay')"
  }
}

回應包含：

• zIndex：當前z-index值（數字或 "auto"）
• createsContext：布林值，元素是否建立堆疊上下文
• reason：建立上下文之原因（如 "position: fixed", "opacity < 1", "transform"）
• parentContext：最近祖先堆疊上下文之選擇器

適用：除錯z-index問題、理解元素覆蓋原因、尋找堆疊上下文邊界。

---

getContainer

取包含塊與捲動容器資訊。

Signature: getContainer(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {containingBlock, scrollContainer, offsetParent}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getContainer('.absolute-element')"
  }
}

回應包含：

• containingBlock：定位此元素之元素（用於absolute/fixed）
• scrollContainer：最近可捲動祖先
• offsetParent：offsetParent元素

適用：除錯絕對定位問題、找控制捲動之元素、了解定位上下文。

---

getTransform

取CSS transform資訊。

Signature: getTransform(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {transform, transformOrigin, matrix}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getTransform('.rotated-element')"
  }
}

回應包含：

• transform：transform CSS屬性值
• transformOrigin：transform-origin值
• matrix：計算後之變換矩陣

---

getOverflow

取溢出與捲動資訊。

Signature: getOverflow(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {overflow, overflowX, overflowY, scrollWidth, scrollHeight, isScrollable}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getOverflow('.scrollable-panel')"
  }
}

回應包含：

• overflow：overflow CSS屬性
• overflowX, overflowY：各軸溢出值
• scrollWidth, scrollHeight：可捲動總尺寸
• isScrollable：內容是否溢出之布林值

---

inspect（複合）

一次呼叫合併多項檢測之綜合檢視。

Signature: inspect(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {info, position, box, layout, stacking, container, visibility, viewport}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.inspect('#main-form')"
  }
}

適用時機：需某元素多項資訊時。比多次獨立呼叫更有效率。

---

佈局診斷函數

findOverflows

找引起水平溢出之元素（水平捲動條常見原因）。

Signature: findOverflows()

Parameters: None

Returns: [{element, overflow, width, parentWidth}, ...]

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findOverflows()"
  }
}

每個溢出項回應包含：

• element：溢出元素之選擇器路徑
• overflow：溢出像素數
• width：元素寬度
• parentWidth：父容器寬度

適用：除錯非預期水平捲動條、找破壞響應式佈局之元素、識別寬於視窗之元素。

---

findStackingContexts

找文件中所有堆疊上下文。

Signature: findStackingContexts()

Parameters: None

Returns: [{element, zIndex, reason}, ...]

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findStackingContexts()"
  }
}

每個上下文回應包含：

• element：元素選擇器路徑
• zIndex：z-index值
• reason：建立堆疊上下文之屬性

常見原因：

• position: relative/absolute/fixed 含z-index
• opacity 小於1
• transform, filter, backdrop-filter
• isolation: isolate
• will-change

---

findOffscreen

找定位於視窗外之元素。

Signature: findOffscreen()

Parameters: None

Returns: [{element, position, distance}, ...]

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findOffscreen()"
  }
}

每個螢幕外元素回應包含：

• element：元素選擇器路徑
• position：元素邊界矩形
• distance：各邊超出距離（top, right, bottom, left）

適用：找無意間定位至螢幕外之隱藏元素、除錯從螢幕外滑入之導航選單、識別用戶看不見之內容。

---

diagnoseLayout（複合）

執行綜合佈局診斷，合併所有佈局檢查。

Signature: diagnoseLayout(selector?)

Parameters:

• selector: string — 可選，聚焦分析之元素

Returns: {overflows, stackingContexts, offscreen, element?}

全頁診斷：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.diagnoseLayout()"
  }
}

聚焦特定元素：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.diagnoseLayout('#problem-section')"
  }
}

適用時機：需完整佈局健康檢查時。

---

樹遍歷函數

walkChildren

取所有子元素，可選深度限制與篩選。

Signature: walkChildren(selector, options?)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素
• options: {maxDepth?, filter?} — 遍歷選項

Returns: [{element, depth, path}, ...]

取直接子元素：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.walkChildren('#container', {maxDepth: 1})"
  }
}

遍歷至深度3：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.walkChildren('#nav', {maxDepth: 3})"
  }
}

每個元素回應包含：

• element：元素選擇器路徑
• depth：樹中深度（1 = 直接子元素）
• path：祖先元素陣列

---

walkParents

取從元素至文件根之所有父元素。

Signature: walkParents(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: [{element, depth}, ...]

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.walkParents('.nested-element')"
  }
}

適用：找包含元素、追蹤元素在DOM層次中之位置、除錯樣式繼承問題。

---

findAncestor

找符合選擇器或條件之最近祖先。

Signature: findAncestor(selector, condition)

Parameters:

• selector: string|Element — 起始元素
• condition: string|function — CSS選擇器或判斷函數

Returns: Element|null

按選擇器查找：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findAncestor('.button', '[data-modal]')"
  }
}

找表單容器：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findAncestor('#submit-btn', 'form')"
  }
}

適用：找按鈕所屬表單、找元素所屬模態框、找可捲動父元素。

---

視覺狀態函數

isVisible

檢查元素是否可見（未被CSS隱藏）。

Signature: isVisible(selector)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素

Returns: {visible: boolean, reasons?: string[]}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.isVisible('.dropdown-menu')"
  }
}

檢查項目：

• display: none
• visibility: hidden
• opacity: 0
• 零尺寸
• clip-path 隱藏

隱藏時回應：

{
  "visible": false,
  "reasons": ["display: none", "parent has visibility: hidden"]
}

---

isInViewport

檢查元素是否在視窗內。

Signature: isInViewport(selector, threshold?)

Parameters:

• selector: string|Element — CSS選擇器或DOM元素
• threshold: number — 需可見百分比（預設：0，即任何部分可見即算）

Returns: {inViewport: boolean, percentVisible: number, position}

檢查是否任何部分可見：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.isInViewport('#footer')"
  }
}

檢查至少50%可見：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.isInViewport('#cta-button', 0.5)"
  }
}

適用：確認重要元素無需捲動即可見、驗證延遲載入內容可見性、除錯視窗依賴行為。

---

checkOverlap

檢查兩元素是否重疊。

Signature: checkOverlap(selector1, selector2)

Parameters:

• selector1: string|Element — 第一個元素
• selector2: string|Element — 第二個元素

Returns: {overlaps: boolean, intersection?: {x, y, width, height}}

Example:

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.checkOverlap('.modal', '.tooltip')"
  }
}

重疊時回應：

{
  "overlaps": true,
  "intersection": {
    "x": 100,
    "y": 200,
    "width": 50,
    "height": 30
  }
}

適用：偵測重疊UI元素、驗證模態框/下拉選單定位、除錯碰撞問題。

---

常見除錯情境

情境1：除錯水平捲動條

頁面出現非預期水平捲動條時：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findOverflows()"
  }
}

再檢測問題元素：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getBox('.overflowing-element')"
  }
}

---

情境2：除錯Z-Index問題

元素覆蓋順序與預期不符時：

1. 找所有堆疊上下文：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.findStackingContexts()"
  }
}

2. 檢查特定元素堆疊：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getStacking('.dropdown-menu')"
  }
}

3. 驗證重疊：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.checkOverlap('.dropdown-menu', '.modal')"
  }
}

---

情境3：除錯Flexbox/Grid佈局

flex或grid佈局表現不如預期時：

1. 檢查容器佈局屬性：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getLayout('.flex-container')"
  }
}

2. 遍歷子元素查看尺寸：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.walkChildren('.flex-container', {maxDepth: 1})"
  }
}

3. 檢查特定子元素盒模型：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getBox('.flex-item')"
  }
}

---

情境4：除錯絕對定位

絕對定位元素位置非預期時：

1. 找包含塊：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getContainer('.absolute-element')"
  }
}

2. 沿父鏈向上遍歷：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.walkParents('.absolute-element')"
  }
}

3. 檢查計算後定位值：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.getComputed('.absolute-element', ['position', 'top', 'left', 'right', 'bottom'])"
  }
}

---

情境5：完整元素調查

需某元素完整資訊時：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.inspect('#problem-element')"
  }
}

一次呼叫回傳：info、position、box、layout、stacking、container、visibility、viewport狀態。

---

情境6：完整佈局健康檢查

一次執行所有診斷：

mcp__plugin_slop-mcp_slop-mcp__execute_tool
Parameters: {
  "mcp_name": "agnt",
  "tool_name": "proxy",
  "parameters": {
    "action": "exec",
    "id": "dev",
    "code": "__devtool.diagnoseLayout()"
  }
}

回傳：溢出、堆疊上下文、螢幕外元素。

---

快速參考表

Function	Purpose	Key Return Values
getElementInfo(sel)	基本元素資訊	tag, classes, attributes, dimensions
getPosition(sel)	邊界矩形	top, left, width, height
getComputed(sel, props)	CSS值	計算後樣式值
getBox(sel)	盒模型	content, padding, border, margin
getLayout(sel)	佈局類型	display, position, flexbox/grid props
getStacking(sel)	Z-index上下文	zIndex, createsContext, reason
getContainer(sel)	定位上下文	containingBlock, scrollContainer
getTransform(sel)	Transform資訊	transform, transformOrigin, matrix
getOverflow(sel)	捲動狀態	overflow, scrollWidth, isScrollable
inspect(sel)	所有檢測合併	所有檢測資料
findOverflows()	找溢出問題	引起水平捲動之元素
findStackingContexts()	找z-index上下文	所有堆疊上下文元素
findOffscreen()	找隱藏元素	視窗外元素
diagnoseLayout(sel?)	完整佈局檢查	overflows, contexts, offscreen
walkChildren(sel, opts)	向下遍歷	含深度之子元素
walkParents(sel)	向上遍歷	至根之父元素
findAncestor(sel, cond)	找父元素	符合條件之祖先
isVisible(sel)	可見性檢查	visible布林值, reasons
isInViewport(sel, thresh)	視窗檢查	inViewport, percentVisible
checkOverlap(sel1, sel2)	碰撞檢查	overlaps, intersection

---

相關技能

此三技能重疊於佈局/DOM視覺化，分工：本技能取逐元素程式化檢測數據（__devtool.* 元素/盒模型/溢出查詢）。

Invoke the Skill tool with skill: agnt:visual-diagnostics — 頁面上之視覺疊層（輪廓、網格、字排、z序高亮）。

Invoke the Skill tool with skill: agnt:analyze-frontend — 一次性綜合稽核報告（DOM複雜度+CSS+溢出+堆疊）。