如何使用檢查元素

設備鏈接

大多數人都沒有意識到他們可以隨意使用開發工具的寶庫,而且這些工具隱藏在他們最喜歡的瀏覽器中。

如何使用檢查元素

每個網絡瀏覽器都提供開發人員工具來檢查網站的編碼。但是,對於普通互聯網用戶來說,它是一個外國實體。畢竟,谁愿意看網站的編碼,對吧?

事實證明,通過查看網站的編碼,您可以學到很多東西。繼續閱讀以了解檢查元素功能必須提供的內容以及如何使用它。

大多數瀏覽器都有檢查網站元素的工具,但它們通常都以相同的方式工作。

在谷歌瀏覽器中使用檢查元素

  1. 打開您要檢查的網站。
    如何使用檢查元素
  2. 右鍵單擊頁面上的任意位置並選擇Inspect
    如何使用檢查元素
    或者
  3. 單擊工具欄右上角的三個垂直點。
    如何使用檢查元素
  4. 轉到更多工具
    如何使用檢查元素
  5. 選擇開發者工具
    如何使用檢查元素
    或者
  6. 在 PC 上按F12鍵盤快捷鍵(或在 Mac 上按CMD + Options + I。 )
    如何使用檢查元素

在 Microsoft Edge 中使用檢查元素

  1. 打開一個網站。
    如何使用檢查元素
  2. 單擊瀏覽器工具欄右上角的三個垂直點。
    如何使用檢查元素
  3. 向下滾動並單擊更多工具
    如何使用檢查元素
  4. 單擊開發人員工具
    如何使用檢查元素
    或者
  5. 右鍵單擊網站上的任意位置,然後單擊檢查
    如何使用檢查元素
    或者
  6. Ctrl + Shift + I
    如何使用檢查元素 如何使用檢查元素如何使用檢查元素

這三種方法中的任何一種都會給您相同的結果。

如果操作正確,一個新窗格會在瀏覽器底部打開。這些是開發人員工具,包括元素選項卡。這是檢查元素所需的工具。

默認情況下,該面板將在屏幕底部打開,但您可以隨時更改它的顯示方式。按照以下簡單步驟重新定位開發人員工具面板:

  1. 單擊“開發人員工具”面板上角的三個水平點。
    如何使用檢查元素
  2. 選擇停靠側(左側、底部或右側)或取消停靠到單獨的窗口。
    如何使用檢查元素

將光標懸停在 Developer Tools 面板框架的邊緣並拖動將縮小或加寬工作區。例如,如果您選擇將面板停靠在瀏覽器窗口的右側,請嘗試將鼠標懸停在左邊框上。當您看到箭頭光標時,您可以拖動面板來調整它的大小。

使用檢查元素(特定於操作系統)

儘管僅向您展示如何在瀏覽器中使用 Inspect Element 可能已經涵蓋了所涉及的許多步驟,但無論如何我們都會向您展示如何在大多數操作系統上使用。

如何在 Chromebook 上使用 Inspect Element

Chromebook 上的默認瀏覽器是 Google,因此請按照 Chrome 瀏覽器說明訪問Inspect Element。這裡有一個小複習課程給你:

  1. 打開一個網站。
    如何使用檢查元素
  2. 單擊工具欄右上角的三個垂直點。
    如何使用檢查元素
  3. 選擇更多工具
    如何使用檢查元素
  4. 單擊開發人員工具
    如何使用檢查元素

您還可以使用右鍵單擊方法或F12功能鍵更快地訪問開發人員工具。

如何在 Android 設備上使用 Inspect Element

在 Android 設備上運行 Inspect Element 略有不同。查看如何在 Android 上訪問“檢查元素”面板:

  1. F12功能鍵。
    如何使用檢查元素
  2. 選擇切換設備欄
    如何使用檢查元素
  3. 從下拉菜單中選擇 Android 設備。
    如何使用檢查元素

當您選擇特定的 Android 設備時,您會注意到該網站的移動版本已加載。從這裡開始,您可以在舒適的桌面上免費使用 Android 設備上的“檢查元素”功能。

此方法適用於 Chrome 和 Firefox 瀏覽器,因為它們的開發人員工具中有一項稱為設備模擬的功能。

它也適用於 iPhone 設備。您只需要在下拉菜單中選擇正確的選項即可。

如何在 Windows 中使用檢查元素

Inspect Element 工具不一定特定於操作系統,但它特定於瀏覽器。這意味著開發人員工具是您使用的瀏覽器的一項功能,不一定是 Windows。但是,無論您喜歡哪種瀏覽器,您都可以進入檢查元素面板。

如果您使用的是 Windows 操作系統,您還可能會使用 Microsoft Edge 瀏覽器。查看如何在 MS Edge 上訪問 Inspect Element:

  1. 打開您要檢查的網站。
    如何使用檢查元素
  2. 點擊瀏覽器窗口角上的三個垂直點。
    如何使用檢查元素
  3. 向下滾動並選擇更多工具
    如何使用檢查元素
  4. 單擊開發人員工具
    如何使用檢查元素

您還可以使用F12功能鍵更快地訪問 Inspect Element。此外,右鍵單擊網頁並選擇“檢查”也可以。

如何在 Mac 上使用檢查元素

如果您使用的是 Mac,您選擇的瀏覽器可能是 Safari。在 Safari 上打開 Inspect Elements 與在 Chrome 和 Firefox 上略有不同。但它與這些步驟一樣簡單:

  1. 打開 Safari 瀏覽器。
    如何使用檢查元素
  2. 單擊標題選項卡中的Safari ,然後從下拉菜單中選擇首選項。
    如何使用檢查元素
  3. 單擊位於屏幕頂部的高級齒輪圖標。
    如何使用檢查元素
  4. 選中Show Develop menu in menu bar複選框。
    如何使用檢查元素

完成這些步驟可在瀏覽器上啟用檢查元素功能。如果您不首先啟用檢查元素,您將不會在打開網站時看到該選項。

完成此步驟後,只需右鍵單擊任何打開的網頁並選擇“檢查”。您還可以使用快捷鍵命令:CMD + Option + I(檢查)。

如何在 iOS 上使用審查元素

您想使用“檢查元素”功能查看網頁的移動版本在 iPhone 上的顯示方式嗎?只需幾個簡單的步驟,您就可以做到這一點以及更多。但是在查看元素之前,您需要為您的 iOS 設備啟用Web Inspector :

  1. 轉到設置
    如何使用檢查元素
  2. 現在,選擇Safari
    如何使用檢查元素
  3. 滾動到底部並點擊“高級菜單”
    如何使用檢查元素
  4. 現在,點擊切換開關以打開Web Inspector
    如何使用檢查元素

此外,請確保按照上一節中的步驟在 Mac 上啟用“開發”菜單。

啟用 iOS 移動設備和 Mac 後,您將在 Mac 的頂部欄中看到“開發”菜單。單擊它可以查看已連接的 iPhone 和設備上活動的網頁。選擇網頁還會在 Mac 屏幕上打開同一頁面的 Web 檢查器窗口。

不過請記住,這些說明僅適用於運行 Mac 的 Safari,不適用於 Windows 上的 Safari。

元素被阻塞時如何使用檢查元素

有時,您會發現無法檢查網頁,如果您嘗試右鍵單擊它,檢查選項會變灰。您可能認為它被阻止了,但是有很多方法可以解決這個問題:

方法 1 –關閉 Javascript

  1. 進入設置
    如何使用檢查元素
  2. 搜索JavaScript
    如何使用檢查元素
  3. 關閉JavaScript
    如何使用檢查元素

方法 2 – 長期訪問開發者工具

不要右擊鼠標來檢查,而是這樣做:

  1. 轉到瀏覽器中的設置。
    如何使用檢查元素
  2. 選擇更多工具
    如何使用檢查元素
  3. 向下滾動並單擊Developer tools
    如何使用檢查元素

方法 3 – 使用功能鍵

您還可以嘗試在阻止右擊檢查的網頁上使用F12功能鍵。

如何使用檢查元素

在遇到適合您的方法之前,您可能必須嘗試所有這些方法。作為最後的手段,您還可以嘗試通過輸入view-source: [enter full url]來查看源代碼。

如何使用檢查元素

如何在學校 Chromebook 上使用 Inspect Element

如果您的 Chromebook 是由學校發行的,則使用檢查元素功能涉及幾個簡單的步驟:

  1. 右鍵單擊或用兩根手指點擊網頁,然後選擇Inspect
    如何使用檢查元素
  2. Ctrl + Shift + I
    如何使用檢查元素如何使用檢查元素如何使用檢查元素
  3. 嘗試使用 view-source:[url] 方法,例如view-source:https://www.wikipedia.com

    如何使用檢查元素

但是,一些學校和組織會阻止此功能,因此如果它不適合您,您可能需要與您的組織或學校管理員聯繫。

如何使用 Inspect Element 尋找答案

您可以使用 Inspect Element 來查找各種問題的答案,例如:

  • 在移動設備上預覽網站設計。
  • 找出競爭對手正在使用的關鍵字。
  • 速度測試。
  • 更改網頁上的文本。
  • 查找快速示例以向開發人員展示您的需求。

當您啟動 Inspect Element 面板時,您將看到該網站的所有編碼。這包括內置於其中的所有 JavaScript、CSS 和 HTML 編碼。這就像查看網頁的源代碼,只是您可以對代碼進行更改。此外,您還可以看到實時實施的任何更改。

該工具對於營銷人員、設計人員和開發人員來說非常有用,可以在最終確定之前查看任何設計更改。但是,使用 Inspect Element 更改編碼不會永遠持續下去。當您重新加載頁面時,它將返回到默認狀態。

其他常見問題解答

如果您在閱讀以上內容後還不是 Inspect Element 方面的專家,那麼這裡有更多答案。

如何使用檢查元素命令查找答案?

使用檢查元素功能查找答案的唯一方法是網站在提交後立即顯示答案。在這種情況下,答案存在於編碼中。

否則,當您使用檢​​查元素功能時,您只是在查看測驗或測試的編碼,以及您提交的任何答案。

Inspect Element 是否違法?

不,Inspect Element 工具不是非法的;它專為網絡開發人員設計。查看網站的源代碼並不違法;如果您將收集的信息用於惡意目的,例如嘗試利用等,它只會成為一個問題。

是否可以在瀏覽器中禁用檢查元素?

最簡潔的答案是不。

您無法在瀏覽器中禁用 Inspect Element,但您可以設置參數以防止用戶執行某些操作,例如右鍵單擊網頁。有許多在線教程可以設置適當的腳本來禁用某些事件。但是,您實際上無法完全禁用檢查元素功能。

了解網頁的內部結構

查看網頁的“檢查元素”功能可能是您從來不知道自己需要的開發人員工具——即使您自己不是開發人員。它有大量的設計和營銷應用程序,可以使您的網站運行更順暢。也許會讓您比競爭對手更具優勢。

你用 Inspect Element 做什麼?在下面的評論部分告訴我們。

Sign up and earn $1000 a day ⋙

Leave a Comment

如何在手機玩遊戲時隱藏廣告

如何在手機玩遊戲時隱藏廣告

在玩遊戲時關閉廣告,這是許多手機遊戲玩家在完成一輪遊戲後想要的。

如何在 Epic Games Store 上取得免費手機遊戲

如何在 Epic Games Store 上取得免費手機遊戲

Android 上的 Epic Games Store 現在擁有與 PC 上類似的免費遊戲下載程式。以下是在 Epic Games Store 取得免費手機遊戲的方法。

在 Google 上玩 Pokemon 捕捉遊戲的說明

在 Google 上玩 Pokemon 捕捉遊戲的說明

只需在 Google 上搜尋 Pokemon 名稱,您就會收集最新的 Pokemon 角色。

騰訊將 Android 遊戲引進微軟 Windows 11 商店

騰訊將 Android 遊戲引進微軟 Windows 11 商店

今年早些時候,微軟宣布決定停止推出適用於 Android 的 Windows 子系統,該子系統旨在允許 Android 應用程式在 Windows 11 上原生運行。

特殊字元 ϟ、✿、\˚ㄥ˚\、☎、☂、☁ 特殊字元或

特殊字元 ϟ、✿、\˚ㄥ˚\、☎、☂、☁ 特殊字元或

特殊字元不會出現在鍵盤上,但您必須透過特殊的方式找到它們。使用下面預製的角色表,您只需寫下您想要放入遊戲中的內容或角色名稱,然後複製您最喜歡的文字格式!

如何永遠不為安卓遊戲和應用程式付費

如何永遠不為安卓遊戲和應用程式付費

由於 Google Opinion Rewards,當在 Play Store 購物時,許多人多年來都沒有花過任何真實金錢。

了解可調整大小的 BAR:可為您提供額外遊戲效能的設置

了解可調整大小的 BAR:可為您提供額外遊戲效能的設置

如果您不了解可調整大小的 BAR 以及它如何提高效能,那麼您很可能已經停用它了。以下是如何啟用可調整大小欄以及該功能的效果。

暢玩 6 款有趣的 iMessage 遊戲,享受聊天的樂趣

暢玩 6 款有趣的 iMessage 遊戲,享受聊天的樂趣

如果您想與來自世界各地的對手一起玩樂,您可以嘗試許多不同類型的有趣的 iMessage 遊戲。

七款最佳遊戲啟動器,幫助您啟動和管理 PC 遊戲

七款最佳遊戲啟動器,幫助您啟動和管理 PC 遊戲

如果您擁有大量 PC 遊戲,可能很難記住哪個遊戲安裝在哪個啟動器上。幸運的是,您可以透過幾種方式啟動所有 PC 遊戲,而無需打開每個啟動器。

幫助您在幾分鐘內創建自己的遊戲的網站

幫助您在幾分鐘內創建自己的遊戲的網站

只需訪問以下網站,您只需幾分鐘即可建立自己的遊戲。

如何在 WePlay 上玩遊戲

如何在 WePlay 上玩遊戲

WePlay Boardgame 是與來自世界各地的朋友或陌生人一起玩棋盤遊戲的好方法。

這是一款需要顯微鏡才能玩的遊戲。

這是一款需要顯微鏡才能玩的遊戲。

帕特里克·吉萊斯皮 (Patrick Gillespie) 推出了基於經典遊戲的全新 Subpixel Snake 遊戲,並將遊戲規模縮小到用戶需要使用顯微鏡才能按照自己想要的方式進行遊戲的程度。

邀請大家在網路上暢玩超令人上癮的 3D 版恐龍遊戲《迷失生命》

邀請大家在網路上暢玩超令人上癮的 3D 版恐龍遊戲《迷失生命》

這款3D版的恐龍遊戲不僅畫面精美,而且極具吸引力,一定會帶給您全新的體驗。

Microsoft Edge Game Assist 現已推出,有什麼新功能?

Microsoft Edge Game Assist 現已推出,有什麼新功能?

早在 2024 年 11 月下旬,微軟就宣布推出 Edge Game Assist——一項新功能,讓您在電腦上玩遊戲時更輕鬆地瀏覽網路。

Snapdragon 8 Elite 的 Adreno 830 GPU 足以運行 AAA 遊戲

Snapdragon 8 Elite 的 Adreno 830 GPU 足以運行 AAA 遊戲

在 3DMark Steel Nomad Light 基準測試中將 Snapdragon 8 Elite 與 Radeon 780M 進行比較時,首次揭示了對 Adreno 830 GPU 圖形效能的評估。