如何在chrome（或任何瀏覽器）中編輯任何網頁
網頁只是您的Web瀏覽器顯示的文件。但是如果你可以直接在任何網頁上輸入來修改它呢？你可以，而且你不需要瀏覽器擴充套件它是每個現代瀏覽器內建的功能。
此功能利用了“文件.designMode“功能，您可以透過web瀏覽器的JavaScript控制檯啟用。它最近被Tomek Sułkowski在Twitter上強調，但它太酷了，我們不得不與讀者分享。
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
您可以使用此功能在列印前清理網頁，測試網頁更改的外觀，甚至只是惡作劇。這就像編輯一個Word文件一樣，不需要搞亂HTML。
要啟用此功能，請訪問網頁，然後開啟開發人員控制檯。要在Google Chrome中開啟控制檯，請單擊“功能表”>“更多工具”>“開發人員工具”，或按Ctrl+Shift+i。
我們以Chrome為例，這個特性也適用於其他現代瀏覽器。以下是如何在其他瀏覽器中開啟控制檯：
- 在Mozilla Firefox中，單擊“功能表”>“Web開發人員”>“Web控制檯”，或按Ctrl+Shift+K。
- 在Apple Safari中，單擊Safari>首選項>高階並啟用“在選單欄中顯示開發選單”。然後單擊開發>顯示JavaScript控制檯。
- 在Microsoft Edge中，單擊“功能表”>“更多工具”>“開發人員工具”，或按F12鍵，然後單擊“控制檯”選項卡。
單擊開發人員工具面板頂部的“控制檯”選項卡。在控制檯中鍵入以下內容並按Enter鍵：
document.designMode = 'on'
如果願意，現在可以關閉控制檯，並像編輯可編輯文件一樣編輯當前網頁。單擊某個位置**游標並鍵入文字。使用Backspace或Delete鍵刪除文字、影象和其他元素。
這隻會改變網頁在瀏覽器中的顯示方式。重新整理頁面後，您將再次看到原始頁面。如果您轉到另一個網頁或選項卡，在開啟控制檯並再次鍵入此行之前，它不會處於設計模式。
您甚至可以返回控制檯並執行以下命令來關閉設計模式：
document.designMode = 'off'網頁將不再可編輯，但您所做的更改將被保留，直到您下次重新整理頁面。
- 發表於 2021-04-03 02:56
- 閱讀 ( 31 )
- 分類：網際網路
你可能感興趣的文章
mac的safari快捷方式備忘單
Safari是Mac使用者最好的瀏覽器之一，在很多方面都優於Chrome。 ...
6種不用滑鼠快速瀏覽網頁的方法
...可以讓你以比滑鼠更快的速度完成任務。今天我們來看看如何將這一理念應用到你的網際網路瀏覽中。 ...
如何使用chrome開發工具解決網站問題
...除錯工具。使用chromedevtools很容易，但是您需要了解它是如何工作的，以便最大限度地利用它。 ...
如何使用raspberry pi作為代理伺服器（使用privoxy）
...許您使用代理設定。瀏覽器中的“幫助”功能將向您展示如何做到這一點。在Firefox中，只需鍵入“關於：首選項“在位址列。 滾動到“網路設定”部分，然後單擊“設定” 在“Configure Proxy Access to the Internet”下，選擇“Manual Pr...
功能鍵在chrome開發工具中的作用
...愛，但根據你執行的應用程式的不同，它們仍然很方便。ChromeDevTools在你的功能鍵後面隱藏了一些有趣的特性。他們就是這麼做的。 什麼是鍍鉻開發工具(chrome devtools)？ 顧名思義，chromedevtools是googlechrome瀏覽器中的一組開發工...
如何在googlechrome中建立、檢視和編輯書籤
...書籤一樣。以下是幾種建立、檢視和編輯書籤的方法。 如何建立書籤 啟動Chrome，前往一個網站，然後單擊Omnibox中的星形圖示。在這裡，您可以更改書籤的名稱並指定一個特定的資料夾，但我們暫時不討論這個問題。單擊“完成...
如何充分利用chrome書籤欄
...大、功能多樣的功能，但卻沒有獲得足夠的信任。下面是如何組織、美化和建立bookmarklet以充分利用它的潛力。 啟用書籤欄 如果您還沒有，要充分利用書籤欄，您必須首先啟用它。 啟動Chrome，單擊選單圖示，指向“書籤”，然...
如何整理網頁瀏覽器書籤
...需要書籤來訪問你從未訪問過的數百個網頁嗎？下面介紹如何備份書籤、高效地清除書籤，以及如何使瀏覽器更具條理。 先備份書籤 刪除大量書籤可能很困難。如果你需要一些你三年前書籤的晦澀網頁怎麼辦？ 為了避免這種...
如何自定義firefox的使用者介面使用者瀏覽器.css
...具欄上的多行，以及執行其他通常不可能執行的操作。 如何工作 相關報道：FirefoxQuantum不僅僅是“複製”Chrome：它的功能更強大 火狐的使用者瀏覽器.css檔案是Firefox使用的層疊樣式表（CSS）檔案。雖然樣式表通常應用於網頁，...
如何將web應用程式轉變為一流的桌面市民
...後臺執行。 web應用：離開瀏覽器並進入工作列 相關：如何將任何網頁轉換為Chromebook上的Web應用程式 Web應用通常生活在瀏覽器中，與您正在檢視的其他網站混合，並僅限於工作列上的單個瀏覽器圖示。Chrome和Internet Explorer允許...
