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