標註工具
小工具內建螢幕截圖標註工具,讓使用者可以精確標記問題所在。
運作方式
- 使用者點擊錯誤按鈕開啟報告表單
- 點擊相機圖示擷取螢幕截圖
- 頁面被擷取後開啟標註編輯器
- 使用者繪製、標記或添加箭頭來標記問題
- 標註後的螢幕截圖附加到報告中
可用工具
| 工具 | 說明 |
|---|---|
| 繪圖 | 使用選定顏色的自由手繪 |
| 箭頭 | 指向特定的 UI 元素 |
| 矩形 | 使用彩色方框標記區域 |
| 文字 | 在螢幕截圖上添加文字標籤 |
| 模糊 | 遮蔽敏感資訊 |
顏色選項
標註工具列提供多種顏色:
- 紅色(預設)用於標記錯誤
- 黃色用於警告或關注區域
- 綠色用於預期與實際行為的對比
- 藍色用於資訊備註
螢幕截圖擷取
螢幕截圖使用瀏覽器原生的 html2canvas 渲染進行擷取。擷取內容包括:
- 可見的視窗內容
- 捲動到視窗外的內容(選擇性)
- CSS 渲染的元素,包括陰影、漸層和變形
原始螢幕截圖和標註版本都會被儲存。在儀表板中,您可以在原始和標註檢視之間切換。
隱私考量
使用者可以使用模糊工具在提交前遮蔽敏感資料(密碼、個人資訊)。模糊區域會在上傳前永久套用到標註的螢幕截圖上。
type="password" 的輸入欄位在螢幕截圖中會自動被遮蔽。