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

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

什么是片段面板？

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

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

如何訪問

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

但為什么？

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

代碼片段位于控制臺(tái)和啟動(dòng)您自己的本地實(shí)例之間的中間位置。

實(shí)際用途

演示

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

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

重復(fù)性任務(wù)

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

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

結(jié)論

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

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

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