書籤小工具（Bookmarklet）是基於JavaScript 的書籤，可添加到Web 瀏覽器中。本文將向您展示一些強大的瀏覽器技巧，以幫助您改進Web 開發工作流程，以及如何將這些技巧轉換為節省時間的書籤小工具。
設計模式（由於它是JavaScript 屬性，因此樣式為designMode）適用於喜歡在實時網站上試驗不同文案變化的人。例如，喜歡觀察內容在網站設計流程中閱讀效果的文案撰寫者，或者想要確保文本在特定字體大小下舒適地適應特定空間的設計師。
JavaScript 具有一個非常簡單的功能，可以使整個HTML 文檔可編輯。它的工作原理與HTML 的contenteditable="true" 名值屬性（或JavaScript 中的contentEditable="true"）完全相同，但適用於整個文檔。如果您想了解其工作原理，請首先使用相關的鍵盤快捷鍵打開瀏覽器的控制台：
接下來，在控制台中鍵入document.designMode="on" ，按Return ，然後單擊任何文本元素。您會看到，只需單擊這些文本元素（以及所有其他文本元素），即可對其進行編輯。這種在實時網站上編輯文本的方法比打開DevTools，然後右鍵單擊並選擇“編輯文本”選項要快得多，也省力得多。
雖然我不確定“設計模式”是否是該功能最準確的描述，但它仍然非常有用，而且令人驚訝的是，它已經存在了很長時間。
那麼，啟用它的更快方法是什麼呢？當然是書籤小工具！使用javascript: document.designMode="on";void 0;作為URL 創建一個書籤。
當HTML 元素沒有背景時，很難可視化它們的邊界和/或準確測量它們與其他元素之間的距離。開發人員在處理視覺不平衡（即即使某物“看起來不對勁”，但實際上並非如此）、邊距折疊（忽略某些邊距）、各種display:/float:/position: 問題等時，可能需要更好地可視化邊界。
應用背景意味著為所有HTML 元素應用半透明背景，以便更好地可視化它們的邊界和間距。我們很多人通常通過打開DevTools 然後在“樣式”框中鍵入類似selector { background: rgb(0 0 0 / 10%); }的CSS 聲明來做到這一點。但是，這仍然非常費力且重複——我們可以使用書籤小工具來簡化它。
同樣，要創建一個書籤，我們將創建一個URL。以下是我們可以為此使用的內容：
javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");我們使用半透明背景，因為透明度會疊加，這確保每個嵌套元素都是可區分的，並且可以測量它們之間的距離。
您是否曾經需要測試一個Web 事件，該事件首先需要一系列交互或滿足某些條件？測試或調試這些類型的功能非常耗時。此事件模擬書籤小工具可用於立即觸發特定事件，從而使測試變得輕而易舉。
模擬事件意味著編寫一個“臨時”按鈕來觸發JavaScript 事件，從而更容易快速重複地測試事件，而無需滿足任何通常的用戶界麵條件，例如需要登錄。
假設您已設置好JavaScript 事件偵聽器，請為要觸發/模擬的每個事件創建一個書籤，並提交以下URL：
javascript: document.querySelector("SELECTOR").click();將“SELECTOR”替換為您唯一的選擇器，將“click”替換為“focus”或“blur”（必要時），或擴展代碼段以使其觸發更複雜的事件，例如滾動。
Cookie 是由網站訪問者訪問的網站存儲在網站訪問者計算機上的令牌。 Cookie 包含可由創建它們的網站讀取的數據，直到它們超過其過期日期或已被刪除。 Cookie 的存在本身可以確定訪問者是否已登錄，而數據本身可以存儲用戶信息。
您可能想要使用書籤小工具設置Cookie 的一個示例場景是當您想要在網站測試期間強制登錄狀態時。網站在登錄用戶和未登錄用戶的情況下通常看起來非常不同，但是登錄和註銷最終會變得非常繁瑣，因此此書籤小工具可以節省大量時間。
手動為Cookie 編寫expires= 日期非常麻煩，但幸運的是，此創建您自己的設置Cookie 書籤小工具應用程序可以為特定Cookie 生成書籤小工具，如果您知道其確切名稱。
您可能想要向HTML 元素添加或刪除類以觸發新狀態或外觀變化，也稱為切換類。類切換發生在大多數實時網站的幕後，但它也可以在測試期間用於跳過滿足某些用戶界麵條件。
類切換可用於觸發外觀變化（例如備用主題或狀態）甚至動畫，但在僅出於測試目的（即網站實際上並未以這種方式為用戶運行）時，使用開發者工具進行操作可能會有點棘手。與其他書籤小工具類似，使用此書籤小工具可以快速切換類並節省時間。
創建以下書籤小工具以定位與您選擇的“SELECTOR”匹配的所有元素，這反過來會切換“CLASS”。
javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));雖然從技術上講它不是“書籤小工具”，但Scott Jehl 的這個可書籤化的數據URI 在新標籤頁中打開了一個：
所以，這是我的新顏色選擇器應用程序！ 它只是一個包含在數據URI 中的HTML 顏色輸入，因此我可以將其添加為書籤。 （您可以自己添加）：
data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">
這為什麼很酷？好吧，您需要從頁面上獲取顏色值多少次，卻發現自己打開DevTools，單擊一堆元素，並仔細檢查CSS 屬性以查找該值？最好運行這個小工具，單擊該元素，然後立即獲取顏色！
是否有任何過於重複的Web 開發工作流程需要您使用Web 瀏覽器的有時很麻煩的開發者工具？如果是這樣，創建您自己的節省時間的書籤小工具非常容易。只需記住以javascript:開頭即可。
如果您已經創建了書籤小工具來簡化您的工作流程，我很想看到它！請在評論中分享它們，讓我們創建一個不錯的集合。
以上是6個有用的書籤來促進網絡開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！
