一鍵式系統清理讓您的 Mac CleanMyMac X 既快速又安全。免費試用
我們習慣於這樣的觀念：網站只是面向用戶的、後台進行的所有工作（例如，代碼和設計）的圖形表示。 很難想像這兩個世界可以相互作用。 我們看到的網頁屬於瀏覽器，而網頁的創建主要發生在文本編輯器中。
但事實並非如此。 由於網站只是瀏覽器中發生的代碼視圖，因此有一個名為“檢查元素”的特殊選項，它不僅可以讓您查看底層代碼，還可以進行臨時調整併測試網站在進行一些可逆更改後的外觀。
那麼，讓我們看看如何在中使用 Inspect Element Mac 在各種瀏覽器中，讓我們看看為什麼這樣做是個好主意的更多原因。
為什麼應該使用“檢查元素”快捷方式？
如果您以前一直在不知道如何在線檢查頁面的情況下工作，您可能想知道為什麼需要這樣做。
學習如何打開 Inspect Element 的各種功能有很多好處。
- 開發商 將 Inspect Element 作為其瀏覽器訪問功能。 在永久推出更改之前，它對於在臨時環境中調試和測試更改非常有用。
- 設計師 他們可以看到他們的模型如何在現實生活中實現或從其他網站收集想法。
- 營銷人員 您可以使用 Inspect Element 更改內聯文本或檢查是否 Google Analytics已成功安裝，請 example。
- 客戶服務代理 必須允許 Inspect Element 就用戶和網站訪問者報告的錯誤與開發人員進行有效溝通。
如何檢查所有瀏覽器中的元素
在深入研究一些實際示例之前，我們需要回顧一下如何在各種瀏覽器中啟用 Inspect Element 以及它們對應的 Inspect Element 快捷方式是什麼。
Safari在某些方面，它是與 Inspect Element 最不兼容的瀏覽器，因為它甚至一開始就沒有向您顯示此選項； 您必須首先啟用檢查元素：
- 開始 Safari
- 轉到首選項 (⌘ +,)
- 導航到“高級”選項卡
- 勾選“在菜單欄中顯示開髮菜單”
之後，您將可以使用以下開發工具 Safari 在菜單欄（稱為“開發”）中，您可以在其中找到“顯示頁面源代碼”（Option + ⌘ + U）。 使用顯示頁面源 ➙ 元素顯示網站的所有代碼，如果您將光標指向特定部分，它也會在瀏覽器中突出顯示。 如果您想打開“檢查元素”選項 Safari 在頁面中的特定內容上，您可以右鍵單擊它並選擇“檢查元素”。
Firefox y Google Chrome 它的工作方式類似，但您已經預先啟用了檢查元素。 他 Firefox “檢查元素”快捷鍵是 Option + ⌘ + I，您也可以右鍵單擊任何元素進行檢查。
Chrome 檢查器可以在菜單欄中的 View ➙ Developer 下找到，或者使用快捷鍵 Option + ⌘ + I。否則，您可以在 Chrome 同樣的方法：右鍵單擊網頁上的任意位置。
如何使用 Inspect Element 進行網站更改
當您知道如何檢查中的元素時 Mac，您將獲得能夠臨時更改網站任何元素的超能力。 為此，您需要啟用“檢查元素”選項並逐字修改 HTML 或 CSS 的任何部分。
在所有瀏覽器中使用 Inspect Element 進行更改的過程都是類似的。 例如更改特定文本 Safari:
- 右鍵單擊文本並選擇檢查元素
- 雙擊代碼文本使其可編輯。
- 寫入文本替換
- 採取 Enter
同樣，您可以更改任何網頁上的圖像或動畫：只需將當前 URL 替換為新圖像或 GIF 的 URL 即可。
要更改顏色或字體大小，請打開檢查元素並對 CSS 進行調整。 您可以使用複選框快速關閉任何選項並實時查看結果，或鍵入新值。
最後，您甚至可以激活其他 HTML 元素狀態。 為了 example，使按鈕看起來像是被單擊或懸停在其上。 為此，只需右鍵單擊具有狀態的 HTML 元素並選擇一個新元素即可。
有時您可能會遇到一個錯誤，即您的更新不會自動顯示在頁面上。 發生這種情況是因為您的瀏覽器已緩存該網站，並且每次更新時它並沒有真正更新。 為了解決這種情況，您應該使用 CleanMyMac X 等工具清除瀏覽器的緩存。
CleanMyMac X 是優化速度、安全性和額外存儲空間的最佳實用程序 Mac。 因此，它具有滿足任何掃描需求的各種掃描和工具。 Mac 可以想像的。 例如，從瀏覽器中刪除緩存文件：
- Inicie CleanMyMac X
- 轉到隱私選項卡
- 選擇您要清理的瀏覽器
- 檢查 cookie、本地存儲以及任何其他適用於您的內容
- 單擊刪除
✕ 刪除應用橫幅
現在您知道如何臨時動態調整任何網站。 但如果您需要使更改永久化怎麼辦？ 真正改變您的網站的最佳工具是什麼？
免費試用✕
RapidWeaver 是一種設計和構建網站的好方法，甚至無需接觸 HTML。 這個無代碼構建器允許您通過拖放和降價創建佈局，因此您可以構建從投資組合到電子商務創意的任何內容，並在幾天甚至幾小時內上線，而無需僱用昂貴的開發人員。
✕ 刪除應用橫幅
如何使用仿真檢查頁面
當今設計任何網站的一個非常重要的方面是了解它如何在各種設備（尤其是智能手機）上運行。 當然，您需要確保您的佈局完全響應。 如果您的網站處於活動狀態，您可以在智能手機上訪問它。 但是，當您的項目僅存在於本地計算機上時，您該怎麼辦？
最常用的功能之一 Chrome Inspector 正在您的各種設備上模擬環境 Mac。 要查看您的網站在移動設備上的外觀，您只需啟用 Inspect Element Chrome 按 Option + ⌘ + I。在左側，您將在移動網站上看到完全交互式的版本。 您可以在頂部下拉菜單中更改設備類型以及分辨率和比例。 現在您可以進行更改並在任何設備上查看它們的反映。
跨設備網站設計的下一個層次是將這些網站轉變為可運行的應用程序，以實現完全類似本機的功能。 構建應用程序需要額外知識和時間的日子已經一去不復返了。 現在，您可以使用 Unite 和 Coherence X 等工具立即從網站創建出色的應用程序。
Unite 是一個基於 WebKit 2 的工具，可以將任何網站簡單地轉換為應用程序 Mac 關於進展。 您可以在本機窗口中查看該應用程序 Mac、使用快捷方式、啟用通知、將圖標保存到 Dock 等等。
✕ 刪除應用橫幅
同樣，Coherence X 構建應用程序 Mac 來自網站，其中許多最受歡迎，來自 Netflix A Facebook A Twitter，已預設使用。 您創建的每個應用程序都會保護您的數據，並獨立於瀏覽器或您的任何其他進程運行 Mac。 後端的引擎由 Google Chrome 讓您可以相信您的新應用每次都能完美運行。
✕ 刪除應用橫幅
如您所見，學習如何檢查 Element Mac 它可以提供多種好處，從調試到跨多個設備提出新想法。 重要的是要記住，您可以使用一些工具來幫助您。 CleanMyMac X 可以幫助清除緩存並優化您的 Mac。 RapidWeaver 可以幫助您構建新網站，而 Unite 和 Coherence X 可以將這些網站轉變為應用程序。
最重要的是，您可以通過 Setapp 試用 7 天，完全免費使用 CleanMyMac X、RapidWeaver、Unite 和 Coherence X，Setapp 是一個擁有 220 多個創意應用程序的平台 Mac 幫助您創建、設計和營銷任何您能想像到的項目。 立即免費試用 Setapp 上的所有應用程序，盡情發揮您的想像力。
