釋放 Chrome DevTools 程式碼片段的強大功能

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

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

什麼是片段面板？

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

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

如何訪問

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

但為什麼？

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

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

實際用途

示範

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

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);

抓取網站

根據您的代理商，您可能需要將入職客戶轉換為您自己公司的專有範本。 根據客戶的設置，您可能無法使用預先建置的抓取工具來選擇您自己的自訂抓取工具。我使用片段來測試抓取站點，以確保我們只從適當的元素中提取資料。當您在難以抓取的網站上工作且所需資料位於頁面上且在後端不可用時，這會很有幫助。

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);

重複性任務

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

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

結論

程式碼片段面板是一個多功能工具，可以增強您的開發工作流程。透過自動化任務、高效調試和分析內容，您將在日常工作中節省時間和精力。

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

以上是釋放 Chrome DevTools 程式碼片段的強大功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！