小書簽是添加到 Web 瀏覽器的基于 JavaScript 的書簽。我想向您展示一些很棒的 Web 瀏覽器 hack，以幫助您的 Web 開發(fā)工作流程，以及如何將這些 hack 轉(zhuǎn)換為節(jié)省時間的書簽。
本期分享目錄：
激活開發(fā)設(shè)計模式
將背景應(yīng)用于所有內(nèi)容
模擬事件
設(shè)置 cookie
切換類
顏色小部件書簽
你還能想到哪些其他書簽？
激活開發(fā)設(shè)計模式
設(shè)計模式（designMode因為它是JavaScript 屬性而被設(shè)計）適合喜歡在實時網(wǎng)站上嘗試各種副本的人。例如，喜歡觀察內(nèi)容在網(wǎng)站設(shè)計流程中如何閱讀的文案，或者說，想要確保文本以特定字體大小舒適地適合特定空間的設(shè)計師。
JavaScript 有一個非常簡單的功能，可以使整個 HTML 文檔可編輯。它與 HTML 的name-value 屬性（或在 JavaScript 中）完全一樣，但適用于整個文檔。如果你想看看它是如何工作的，首先使用相關(guān)的鍵盤快捷鍵進入瀏覽器的控制臺：contenteditable="true"``contentEditable="true"
Chrome: Option + ?+ J/ Shift+ CTRL+J
Firefox: Option + ?+ K/ Shift+ CTRL+K
Safari: Option + ?+ C/ Shift+ CTRL+C
接下來，document.designMode="on"在控制臺中鍵入，點擊<kbd style="margin: 0px; padding: 0px;">Return</kbd>，然后單擊任何文本元素。您將看到該文本元素（以及所有其他文本元素）現(xiàn)在只需單擊它們即可進行編輯。這種在實時網(wǎng)站上編輯文本的方法比打開 DevTools，然后右鍵單擊并選擇“編輯文本”選項要快得多……而且不那么煩人。
雖然我不確定“設(shè)計模式”是對該功能最準確的描述，但它仍然非常有用，而且它實際上已經(jīng)存在了很長時間，令人驚訝。
還有什么更快的方法來啟用它？當(dāng)然是小書簽！javascript: document.designMode="on";void 0;使用URL創(chuàng)建書簽。
將背景應(yīng)用于所有內(nèi)容
當(dāng) HTML 元素沒有背景時，很難可視化它們的邊界和/或準確測量它們與其他元素之間的距離。開發(fā)人員可能希望在處理光學(xué)不平衡時更好地可視化邊界（即，當(dāng)某些東西“看起來不對”時，即使它不是）、邊距崩潰（當(dāng)某些邊距被忽略時）、display:/ float:/的各種問題position:等等。
應(yīng)用背景意味著對所有 HTML 元素應(yīng)用半透明背景，以便更好地可視化它們的邊界和間距。這是我們許多人通常通過打開 DevTools 然后selector { background: rgb(0 0 0 / 10%); }在“樣式”框中鍵入 CSS 聲明來完成的事情。但同樣，這真的很煩人和重復(fù)——我們可以用書簽來簡化一些事情。
再次，為了創(chuàng)建書簽，我們將創(chuàng)建一個 URL。這是我們可以使用的：
javascript: document.querySelectorAll("*").forEach(element => element.style.background="rgb(0 0 0 / 10%)");
我們使用半透明背景，因為透明度堆疊，這確保每個嵌套元素都是可區(qū)分的，并且可以測量它們之間的距離。
模擬事件
您是否曾經(jīng)必須測試首先需要一系列交互或滿足某些條件的 Web 事件？必須測試或調(diào)試這些功能非常耗時。此事件模擬書簽可用于即時觸發(fā)特定事件，使測試變得輕而易舉。
模擬事件意味著編寫一個觸發(fā) JavaScript 事件的“一次性”按鈕，從而更容易快速、重復(fù)地測試事件，而無需滿足任何常見的面向用戶的條件，例如需要登錄。
假設(shè)您設(shè)置了JavaScript 事件偵聽器，請為您要觸發(fā)/模擬的每個事件創(chuàng)建一個書簽并提交以下 URL：
javascript: document.querySelector("SELECTOR").click();
將“SELECTOR”替換為您唯一的選擇器，將“click”替換為“focus”或“blur”（必要時），或者擴展代碼片段以使其觸發(fā)更復(fù)雜的事件，例如滾動。
設(shè)置 cookie
Cookie 是訪問者正在訪問的網(wǎng)站存儲在網(wǎng)站訪問者計算機上的令牌。Cookie 包含創(chuàng)建它們的網(wǎng)站可以讀取的數(shù)據(jù)，直到它們超過其到期日期或被刪除。僅 cookie 的存在就可以確定訪問者是否登錄，而數(shù)據(jù)本身可以存儲用戶信息。
您可能希望使用小書簽設(shè)置 cookie 的一個示例是您希望在網(wǎng)站測試期間強制進入登錄狀態(tài)。對于已登錄的用戶而言，網(wǎng)站通常看起來非常不同，但是，登錄和注銷最終會變得非常乏味，因此這個小書簽可以節(jié)省相當(dāng)多的時間。
手動為 cookie 編寫expires=日期實在是太尷尬了，但幸運的是，如果您知道它的確切名稱，這個create-your-own-set-cookie-bookmarklet 應(yīng)用程序可以為特定 cookie 生成一個書簽。
切換類
您可能希望從 HTML 元素中添加或刪除類，以觸發(fā)新狀態(tài)或外觀更改，也稱為切換類。類切換發(fā)生在大多數(shù)實時網(wǎng)站的幕后，但它也可以在測試期間用于跳過必須滿足某些面向用戶的條件。
類切換可用于觸發(fā)外觀的更改（例如替代主題或狀態(tài)）甚至動畫，但僅出于測試原因使用開發(fā)人員工具執(zhí)行此操作時可能會有點繁瑣（即網(wǎng)站實際上并不能正常運行）用戶的方式）。與其他小書簽類似，使用此小書簽可以快速切換課程并節(jié)省時間。
創(chuàng)建以下小書簽以定位與您選擇的“SELECTOR”匹配的所有元素，然后切換“CLASS”。
javascript: document.querySelectorAll("SELECTOR").forEach(element => element.classList.toggle("CLASS"));
顏色小部件書簽
雖然從技術(shù)上講不是“書簽”，但 Scott Jehl 的這個可書簽數(shù)據(jù) URI<input type="color">在新選項卡中打開了一個：
data:text/html;charset=utf-8,%3Chtml%3E%3Ctitle%3EColor Picker%3C%2Ftitle%3E%3Cinput type%3D"color"%3E%3C%2Fhtml%3E
你還能想到哪些其他書簽？
是否有任何過度重復(fù)的 Web 開發(fā)工作流程需要您使用 Web 瀏覽器有時令人尷尬的開發(fā)人員工具？如果是這樣，創(chuàng)建自己的省時書簽非常容易。請記住以javascript:!開頭的 URL。
如果您制作了一個書簽來簡化您的工作流程，我很樂意看到它！在評論中分享它們，讓我們開始收藏。
如有相關(guān)前端方面的技術(shù)問題 ，歡迎主頁添加我，我會定期在群里給大家分享最新技術(shù)和解答問題 。
