Chrome DevTools 中的 Snippets 面板是一個經(jīng)常被忽視的強大工具。 程式碼片段允許開發(fā)人員直接在瀏覽器中編寫、保存和運行自訂 JavaScript 程式碼。此功能有助於實驗、調(diào)試和演示 JavaScript，而無需啟動新的本機/開發(fā)/登臺實例。

在本文中，我想重點介紹「程式碼片段」面板的功能，同時為您的日常開發(fā)工作提供一些實際用途。

什麼是片段面板？

Chrome DevTools 中的 Snippets 面板本質(zhì)上是一個迷你程式碼編輯器，您可以在其中編寫和保存可重複使用的 JavaScript 程式碼。與在控制臺中輸入命令不同，程式碼片段允許您：

• 儲存您的程式碼以供重複使用。
• 只需單擊即可運行腳本。
• 在瀏覽器會話之間共用程式碼。
• 使用斷點和監(jiān)視表達式偵錯腳本。

如何訪問

您可以透過開啟 DevTools 來存取 Snippets（右鍵 > Inspect > Sources > Snippets）。

但為什麼？

在上一篇文章中，我介紹了使用控制臺來幫助調(diào)試網(wǎng)站的不同方法。 片段超出了這個範(fàn)圍。 直接將 JavaScript 新增至控制臺是可行的，但對於重複的任務(wù)來說有點煩人。 這就是片段發(fā)揮作用的地方。 這允許重複和擴展腳本。

程式碼片段位於控制臺和啟動您自己的本機實例之間的中間位置。

實際用途

示範(fàn)

在您職涯的某個階段，您可能需要直接與客戶互動或為內(nèi)部團隊示範(fàn)某些內(nèi)容。 片段可讓您在無法存取程式碼的即時網(wǎng)站上顯示潛在的更新。 我使用片段向客戶展示了某些變更的潛力，包括批量 CSS 更新、重新排列部分以及即時網(wǎng)站的操作。 透過控制臺或 Elements 控制臺操作 CSS 對於單一實例來說效果很好，但片段在批次更新方面表現(xiàn)出色。

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

抓取網(wǎng)站

根據(jù)您的代理商，您可能需要將入職客戶轉(zhuǎn)換為您自己公司的專有範(fàn)本。 根據(jù)客戶的設(shè)置，您可能無法使用預(yù)先建置的抓取工具來選擇您自己的自訂抓取工具。我使用片段來測試抓取站點，以確保我們只從適當(dāng)?shù)脑刂刑崛≠Y料。當(dāng)您在難以抓取的網(wǎng)站上工作且所需資料位於頁面上且在後端不可用時，這會很有幫助。

const style = document.createElement('style');
style.innerHTML = `
  nav {
    background-color: #6366f1 !important;
  }
  h1 span {
    color: #ff0000 !important;
  }
  header {
    background-color: #6366f1 !important;
  }
`;
document.head.appendChild(style);

重複性任務(wù)

如果您正在手動測試網(wǎng)站並且剛開始一遍又一遍地重複任務(wù)。 也許您需要重複點擊事件才能查看使用者的體驗。編寫一個片段對於重複執(zhí)行此操作非常有幫助。將程式碼片段與腳本中的斷點結(jié)合起來，以協(xié)助完成更長的工作流程。

const h1 = document.querySelector('h1').innerText;
console.log(h1);

結(jié)論

程式碼片段面板是一個多功能工具，可以增強您的開發(fā)工作流程。透過自動化任務(wù)、高效調(diào)試和分析內(nèi)容，您將在日常工作中節(jié)省時間和精力。

程式碼片段有不同的用例嗎？在下面的評論中分享吧！

以上是釋放 Chrome DevTools 程式碼片段的強大功能的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！