小書(shū)簽是添加到網(wǎng)站瀏覽器的基于 JavaScript 的書(shū)簽。我想向您展示一些很棒的網(wǎng)站瀏覽器 hack，以幫助您的網(wǎng)站開(kāi)發(fā)工作流程，以及如何將這些 hack 轉(zhuǎn)換為節(jié)省時(shí)間的書(shū)簽。

設(shè)計(jì)模式（designMode因?yàn)樗荍avaScript 屬性而被設(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"

接下來(lái)，document.designMode="on"在控制臺(tái)中鍵入，點(diǎn)擊Return，然后單擊任何文本元素。您將看到該文本元素（以及所有其他文本元素）現(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ū)簽。

當(dāng) HTML 元素沒(méi)有背景時(shí)，很難可視化它們的邊界和/或準(zhǔn)確測(cè)量它們與其他元素之間的距離。開(kāi)發(fā)人員可能希望在處理光學(xué)不平衡時(shí)更好地可視化邊界（即，當(dāng)某些東西“看起來(lái)不正常”時(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ū)簽簡(jiǎn)化一些事情。


您是否曾經(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ù)的條件，例如需要登錄。

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í)間。