螢幕截圖

詳細介紹

以視覺化方式編輯網頁、檢查 HTML/CSS、自訂樣式、測試響應式版面、擷取螢幕截圖並匯出程式碼。 ✏️ Edit Page — 視覺化網站編輯器與開發人員工具組 直接在瀏覽器中以視覺化方式編輯網頁、自訂樣式、檢查 HTML 和 CSS，並探索網站版面。Edit Page 在單一擴充功能中結合視覺化編輯、開發人員工具、響應式測試、螢幕截圖和網站分析。 🎨 視覺化編輯器 • 編輯文字與 HTML、新增元素，以及移動、調整大小、複製、隱藏或移除頁面元素。 • 自訂字型、顏色、間距、邊框、尺寸和位置。 • 復原、重做及還原個別變更。 🔍 HTML 與 CSS 檢查器 • 探索 DOM 樹狀結構、HTML 元素、類別和屬性。 • 檢查 CSS 規則、計算後樣式、特異性、繼承和盒模型。 • 複製 HTML、CSS 選取器、XPath 和元素路徑。 • 檢視頁面顏色、字型和色彩對比。 💾 儲存網站變更 • 儲存自訂樣式，並在重新造訪網站時自動重新套用支援的變更。 • Pro：無限制儲存網站、設定檔、頁面條件、檢查點、設定匯入／匯出，以及選用的雲端同步。 🖌️ 進階 CSS 設計 • Pro：Flexbox、Grid、漸層、陰影、濾鏡、變形、CSS 變數、批次設定樣式，以及替換顏色或字型。 📱 響應式測試 • 使用手機、平板、筆記型電腦及桌上型電腦預設值預覽版面。 • Pro：自訂檢視區大小、方向、縮放、裝置螢幕截圖及並排比較。 📸 螢幕截圖 • 擷取可見頁面、選取區域及裁切後的影像。 • Pro：整頁及元素螢幕截圖、註記、遮蓋工具、裝置外框及 JPG/WebP 匯出。 ⚛️ 開發人員工具 • 預覽 CSS 和 HTML 匯出內容並探索網站資產。 • Pro：複製／下載程式碼、匯出 React JSX、Vue 元件和 Tailwind HTML/JSX、替換本機圖片、批次下載可用資產，以及在已儲存的網站上執行自訂 JavaScript。 • 免費錄製編輯巨集，並使用 Pro 重播。 🔎 SEO 與無障礙功能 • 執行 11 項 SEO 檢查和 8 項無障礙檢查。 • 檢視標題、頁面統計資料、偵測到的技術和色彩對比。 • Pro：以 JSON 或 Markdown 匯出分析報告。 🧹 一鍵清理 移除支援的 Cookie 橫幅、快顯視窗、覆蓋層、固定列、聊天小工具、應用程式橫幅、推播提示、廣告及捲動鎖定。Pro 新增自動清理功能，可設定類別並針對個別網站選擇停用。 🆓 免費版與 Pro 免費版包含視覺化編輯、HTML/CSS 檢查、基本螢幕截圖、響應式預設值、一個網站的已儲存編輯、網站分析及清理工具。Pro 解鎖進階設計、無限制儲存網站、加強版螢幕截圖、程式碼匯出及其他自動化功能。 🎁 免費試用 Pro 7 天。使用 Google 登入，準備好時即可開始試用。無須付款卡。符合資格的每個 Google 帳戶可試用一次。此工具適合所有希望以視覺化方式編輯及檢查網頁的人。 注意：編輯只會變更瀏覽器中呈現的頁面，不會直接修改原始網站或將變更發布到其伺服器。