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

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

什么是片段面板？

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

• 保存您的代碼以供重復使用。
• 只需單擊一下即可運行腳本。
• 在瀏覽器會話之間共享代碼。
• 使用斷點和監(jiān)視表達式調試腳本。

如何訪問

您可以通過打開 DevTools 來訪問 Snippets（右鍵單擊 > Inspect > Sources > Snippets）。

但為什么？

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

代碼片段位于控制臺和啟動您自己的本地實例之間的中間位置。

實際用途

演示

在您職業(yè)生涯的某個階段，您可能需要直接與客戶互動或為內部團隊演示某些內容。 片段允許您在無法訪問代碼的實時網(wǎng)站上顯示潛在的更新。 我使用片段向客戶展示了某些更改的潛力，包括批量 CSS 更新、重新排列部分以及實時站點的操作。 通過控制臺或 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ù)您的代理機構，您可能需要將入職客戶轉換為您自己公司的專有模板。 根據(jù)客戶的設置，您可能無法使用預構建的抓取工具來選擇您自己的自定義抓取工具。我使用片段來測試抓取站點，以確保我們只從適當?shù)脑刂刑崛?shù)據(jù)。當您在難以抓取的網(wǎng)站上工作且所需數(shù)據(jù)位于頁面上且在后端不可用時，這會很有幫助。

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

重復性任務

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

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

結論

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

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

以上是釋放 Chrome DevTools 代碼片段的強大功能的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！