Safari 允許您: 
以下是一個簡單的入門指南,教你如何在 Safari 中使用“檢查元素”,並利用它提供的體驗,以最少的程式設計知識編輯網站文字和圖片。快來看看: 如何使用 Google Chrome 編輯網站上的文字以更改其內容.

快速連結
什麼是檢查元素?
Inspect Element 是一款開發者的工具。它不僅適用於 Safari,也適用於 Chrome、Firefox 和 Edge 等其他網頁瀏覽器。使用 Inspect Element,您可以深入網站後台,發現 HTML 和 CSS 等前端程式碼。但是,它無法讓您深入了解後端內容,例如資料庫。
您不僅可以查看此程式碼,還可以編輯它。這意味著您可以更改網站的外觀。您可以替換圖片、重寫部分文字、使用不同的字體、切換配色方案等等。但是,這些變更是本地的。除了您之外,其他人都無法看到;當您刷新頁面或離開頁面時,這些變更就會消失。
為什麼要使用檢查元素?
如果您是初出茅廬的 Web 開發者,Inspect Element 是一款非常棒的工具。您可以親眼看到您喜愛的網站的程式碼,並在實際環境中隨意修改。使用 Inspect Element 還能激發許多有趣的靈感。
例如,企業主可以查看競爭對手的網站上包含哪些關鍵字,或者設計師可以使用 Inspect Element 快速識別他們認為有吸引力的字體或在其網站上測試不同的配色方案。
現在,我們將重點放在如何使用「檢查元素」編輯網頁的基本內容。查看 如何使用 Firefox 中的「檢查元素」工具檢查任何網站.
如何在 Safari 上存取檢查元素
您可以使用 Safari 上的開發者選單開啟 Inspect Element:
- 開啟 Safari 應用程式
.
- 點擊頂部功能表列中的 Safari。
- 從下拉菜單中,選擇 喜好.
- 選擇“進階”選項。
- 選取顯示框。 在功能表列中開發選單.

選擇此選項後,您可以右鍵單擊網頁並選擇 檢查元素或者,您可以在功能表列中選擇“開發”,然後選擇“顯示 Web 檢查器”。
如何在 Inspect Element 中搜尋 Web 元素

若要開始編輯項目,請右鍵點選要編輯的內容,然後按一下 檢查元素這將打開“開發者”窗口,其中相關部分會突出顯示。您可能會發現要檢查的特定元素(例如圖像或文字)被隱藏了;要找到它,請使用左側的箭頭展開重疊的部分。

為了縮小選擇範圍,請點選「檢查元素」工具列上的「目標」圖示。現在,當您瀏覽程式碼時,網站的相應部分將突出顯示。或者,您可以使用遊標選擇網站的某個部分。當您想要在網頁的繁忙區域中聚焦特定項目時,此功能非常有用。
如何使用檢查元素編輯網站文本
若要在網站原始碼中找到某段文字並將其設定為可編輯,請雙擊該文字。您可以直接在程式碼中輸入新文本,也可以刪除現有文本。編輯完特定字串後,請按 進入 ,網頁上的文字就會改變。
過程真的就這麼簡單!唯一不起作用的情況是,文字實際上是圖像的一部分,例如徽標。
如何使用檢查元素編輯網站圖片
雖然圖片在前端以視覺形式呈現,但它們在網站程式碼中以連結的形式顯示。您可以右鍵單擊圖片,然後選擇“檢查元素”以跳到其在程式碼中的位置。網站圖片通常具有 JPG、GIF 或 PNG 檔案副檔名,但並非全部。

雙擊這些圖片字串,您可以根據需要編輯或將它們保存到您的系統。如果您想替換圖片,請將其替換為其他圖片網址。或者,您可以刪除整個程式碼字串以從視圖中移除圖片。勾選 每位專業人士使用的熱門 Web 開發工具.
使用 Safari 深入研究網頁設計
Safari 內建的「檢查元素」工具可讓您輕鬆尋找和變更與文字和圖像對應的程式碼,就像取代文字或 URL 字串一樣簡單。使用「檢查元素」編輯網站後,只需刷新頁面,一切就會恢復正常。現在您可以查看 如何使用 Chrome DevTools 解決網站問題.










