您可能聽說過 Chrome 瀏覽器的這一強大功能，即 Chrome 開發者工具。的確，它們中的大多數對 Web 開發人員有用，但有些對普通 Internet 用戶有用。本文重點介紹您可以使用 Chrome 開發人員工具執行的有用操作。例如，如何規避網站設置的限制，在表面上查找隱藏的字體、顏色和圖像，或者忘記密碼。
如何在 Chrome 中打開開發者工具？
要在 Google Chrome 中打開 Chrome 開發者工具，[Chrome のカスタマイズ]點擊（⋮）> 其他工具 -> 開發者工具。 你也可以 右鍵點擊 在您要編輯和選擇的頁面上 檢查我喜歡縮短鍵盤 Ctrl+Shift+I （在 Mac 上為 Cmd+Option+I）。
默認情況下，它會在右側打開一個新窗口，但我更喜歡將其保留在底部，因為它提供了更多擴展空間。要向下移動窗口，請單擊右上角的三個垂直點按鈕 (⋮)，然後選擇底部停靠選項。也可以開啟。 設置中的暗模式 對眼睛很舒服。下次我打開檢查元素時，它會記住我的更改。
另請閱讀：H如何更改谷歌瀏覽器的背景
Chrome 開發者工具的 10 條提示
1. 編輯網頁
這是開發者工具最基本的用法，但應該包括在內。您可以在瀏覽器中臨時編輯任何網頁（例如維基百科）。為此，請在 Chrome 中打開您要編輯的網頁，右鍵單擊並[要素の検査]選擇。轉到控制台選項卡（從頂部開始的第二個選項），粘貼以下代碼行並按 Enter：
document.body.contentEditable = true
這使得整個網頁像任何其他 Word 文檔一樣可編輯。只需單擊任意位置並開始輸入。但請注意，刷新頁面時所有效果都會丟失。因此，請務必在關閉瀏覽器之前對頁面進行截圖。
2.顯示保存的密碼
假設您想在手機上登錄 Instagram，但不記得密碼。幸運的是，它存儲在您的瀏覽器中。現在，您可以使用開發人員工具來揭示隱藏的密碼，而無需經歷艱苦的重置密碼過程。
右鍵單擊密碼字段 和，”檢查元素。‘ 這將打開 Document Inspector 窗口並提示您 ‘密碼“ 什麼時候 ”句子在裡面 ” 密碼類型 輸入字段。這將顯示隱藏在星號中的密碼。
3. 截取網頁截圖
你知道你可以使用 Chome Dev Tools 截取網頁而不使用任何額外的插件嗎？它只提供兩種設置。 您可以截取移動版網頁的屏幕截圖，並從頂部的下拉菜單中選擇多種移動版佈局。
要截取屏幕截圖，請打開 Chrome 開發者工具。[コンソール]轉到選項卡並按 。 Ctrl + Shift + M(Windows) 或 cmd + 選項 + M（蘋果電腦）。然後點擊 右上角的三點菜單 網頁的 捕獲屏幕截圖或捕獲全尺寸屏幕截圖屏幕截圖現在將保存在您的下載文件夾中。
另請閱讀：滿足各種需求的 7 個最佳 Chrome 屏幕截圖擴展
還有其他方法可以截取屏幕截圖。您始終可以安裝屏幕截圖擴展程序或使用計算機的本機屏幕截圖快捷方式 prtsc (windows) 和 cmd+shift+4 (MacOS)，但此方法也可以正常工作。
4.使用顏色選擇器
我喜歡極簡的顏色，而且大部分時間我都在瀏覽 Google 上的極簡圖片，以尋找特色圖片和縮略圖的靈感。或者，如果某個特定網站的配色方案吸引了您的眼球，並且您想知道它使用什麼顏色，您可以隨時安裝 Color Picker 擴展。但是有一種更快的方法可以做到這一點。
啟動 Chrome 開發工具並點擊左側 風格 在選項卡上，單擊顏色旁邊的小框。這將 顏色選擇器工具，您可以單擊網頁上的任意位置。如果您想找到該顏色，顏色選擇器將為您提供十六進制代碼。 只需複制十六進制代碼並將其粘貼到 Photoshop 中。
5. 將您的網站更改為移動版式
每次打開網站時，它都會在內部發送大量數據，包括您的 IP 地址、確切日期和時間、URL、您來自哪裡、用戶代理等。
用戶代理可幫助網站識別您的瀏覽器。此外，在某些情況下，更改用戶代理會有所幫助。例如，如果您想檢查網站是否有響應。但我最喜歡的是訪問不同版本的網站。例如，印度的一些政府網站只在 Internet Explorer 中打開，或者以 Instagram 為例。如您所知，您無法在計算機上將照片上傳到 Instagram，但可以從移動網站上傳。那麼為什麼不讓您的桌面瀏覽器看起來像您的移動瀏覽器呢？
為此，請啟動 Chrome 開發工具。 單擊三個垂直點。和其他下 工具 選擇 網絡條件. 取消選中 一個標有 用戶代理，自動選擇 從彈出框中 移動瀏覽器如果您嘗試訪問政府網站，請選擇其他兼容的瀏覽器。關閉窗口並刷新頁面。如您所見，有一個功能齊全的上傳按鈕，您可以使用該按鈕將照片從您的計算機上傳到 Instagram。
6.搜索任何東西
另一個很難確定的有用功能是搜索。 搜索選項卡允許您搜索網頁上的特定內容或 HTML 元素。
例如，如果您想知道網站上使用的字體， 3個點 然後點擊 尋找 輸入字體或完全使用它 字體系列， 您可以在代碼行中找到信息。
或者讓我們看另一個例子。我遇到了一個在後台使用視頻的網站，我想確切地知道它是哪個視頻，但保存頁面不起作用。相反，請使用 Chrome 開發工具 “視頻” 滾動瀏覽結果以查看 URL 是否可見。在這種情況下，使用常識，如果它是一個視頻文件，擴展名很可能是 mp4, 試試看。現在我在 mp4 中有一些結果。其中之一必須是視頻文件。點擊查看網址。複製該 URL，將其粘貼到瀏覽器中，然後就可以開始了。
7. 移除彈窗
i 的另一個有用功能是從網站中刪除彈出窗口。例如，以 Quora 為例，這是一個僅向其成員提供內容的流行問答網站。 當我從 Google 訪問此站點並嘗試閱讀多個頁面時，我收到一個彈出窗口，要求我註冊。以下是如何刪除它：右鍵單擊頁面以顯示 Inspect 元素。 將光標移動到代碼行 直到彈出窗口（覆蓋內容）被突出顯示。一旦完成， 刪除那行代碼頁面正文中還有另一層透明度，這可能導致鏈接變得無響應。也刪除那個。
閱讀：如何查看網站上被阻止的內容
8. 更改瀏覽器的 GPS 位置
有兩種方法可以知道網站從哪裡瀏覽。 IP 地址和瀏覽器位置。 更改您的 IP 地址很容易，但使用我們的 VPN 和智能 DNS，更改您的瀏覽器位置並非易事。
例如，前幾天我使用 VPN 瀏覽 CBS，一切正常。但是當我決定在 CBS 上觀看本地頻道時，我收到一個彈出窗口，詢問我的瀏覽器在哪裡。下一個，[許可]當我單擊 時，它表示該內容在我所在的位置不可用。
要修復它，請打開 開發者控制台, 右鍵單擊屏幕。面板底部是 按三個按鈕 點擊傳感器選項來自 更多的一個新窗口將在開發者工具窗口的下半部分打開。 地點信息， 選擇 ”自定義位置。根據緯度和經度輸入您當前的位置。如果您不知道這些值，您可以隨時使用 Google 地圖。或者只是選擇城市的名稱，如 加利福尼亞現在重新加載頁面並在彈出窗口中允許位置數據。刷新頁面[場所を許可]如您所見，我現在可以流式傳輸我的本地電台。
9.使用尺子
與顏色選擇器工具一樣，Google Chrome 開發者工具也包括一個標尺。這對於以像素為單位測量頁面高度和寬度很有用。
要顯示標尺，請右鍵單擊要使用標尺的頁面並選擇檢查元素”。然後你必須第一次啟用它。點擊右上角的三個垂直點 環境。 將打開一個新窗口。 元素 部分選擇 顯示標尺 選項。
10.限制Chrome的下載速度
如果您想限制下載速度，可以使用 Chrome 開發工具來實現。它不僅限制了實際的包下載速度，還限制了流媒體。如果您想在看電影時限制瀏覽器的帶寬，它就像一個魅力。
要設置標籤速度， 轉到開發者選項， 什麼時候 單擊選項按鈕 選擇審核旁邊的設置或直接按 F1 打開設置. [スロットリング]轉到標籤 點擊 ‘添加自定義配置文件’您可以命名您的個人資料並設置下載和上傳速度。添加形狀後，[追加]點擊完成。
此配置文件僅適用於當前打開的選項卡，並且需要“開發人員選項”窗口處於活動狀態。否則節流將不起作用。要啟用配置文件， 轉到網絡選項卡 在開發者工具中[オフライン]點擊旁邊的下拉菜單 選擇自定義配置文件 您的頁面目前正在調整中。您從此頁面下載的任何內容均受您設置的限制。不要關閉檢查元素窗口或刷新頁面。
如何使用 Chrome 開發者工具？
總體而言，開發人員工具的用例比修補您喜歡的網站要多。換句話說，您的網站在服務器端沒有做的任何事情都可以使用 Chrome 開發人員工具進行更改。或者， Web開發人員 使用擴展程序一鍵訪問所有功能以及更多功能。
