Chrome DevTools のスニペット パネルは、見(jiàn)落とされがちな強(qiáng)力なツールです。 スニペットを使用すると、開(kāi)発者はカスタム JavaScript コードをブラウザーで直接作成、保存、実行できます。この機(jī)能は、新しいローカル/開(kāi)発/ステージング インスタンスを起動(dòng)する必要なく、JavaScript の実験、デバッグ、デモを行うのに役立ちます。

この記事では、日常の開(kāi)発作業(yè)での実際的な使用法をいくつか示しながら、スニペット パネルの機(jī)能に焦點(diǎn)を當(dāng)てたいと思います。

スニペットパネルとは何ですか?

Chrome DevTools のスニペット パネルは、本質(zhì)的には、再利用可能な JavaScript コードを作成して保存できるミニコード エディターです。コンソールでコマンドを入力するのとは異なり、スニペットを使用すると次のことが可能になります。

• 再利用できるようにコードを保存します。
• ワンクリックでスクリプトを?qū)g行します。
• ブラウザセッション間でコードを共有します。
• ブレークポイントとウォッチ式を使用してスクリプトをデバッグします。

アクセス方法

DevTools を開(kāi)いてスニペットにアクセスできます (右クリック > [検査] > [ソース] > [スニペット])。

しかし、なぜ？

前回の記事では、Web サイトのデバッグに役立つコンソールを使用するさまざまな方法について説明しました。 スニペットはこれを少し超えています。 JavaScript をコンソールに直接追加することは機(jī)能しますが、繰り返しのタスクでは少し面倒です。 そこでスニペットが活躍します。 これにより、スクリプトを繰り返したり展開(kāi)したりすることができます。

スニペットは、コンソールと獨(dú)自のローカル インスタンスの起動(dòng)との中間に位置します。

実用的な用途

デモ

キャリアのある時(shí)點(diǎn)では、クライアントと直接やり取りしたり、社內(nèi)チーム向けに何かをデモしたりする必要があるかもしれません。 スニペットを使用すると、潛在的な更新を表示するコードにアクセスできないライブ サイトに表示できます。 私は、CSS の一括更新、セクションの再配置、ライブ サイトの操作など、特定の変更の可能性をクライアントに示すためにスニペットを使用しました。 コンソールまたは Elements コンソールを介した CSS の操作は、単一インスタンスの場(chǎng)合は正常に機(jī)能しますが、スニペットは一括更新の場(chǎ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);

サイトのスクレイピング

代理店によっては、オンボーディングクライアントを自社獨(dú)自のテンプレートに変換する必要がある場(chǎng)合があります。 クライアントの設(shè)定によっては、獨(dú)自のカスタム スクレーパーを選択して、事前に構(gòu)築されたスクレーパーを使用できない場(chǎng)合があります。スニペットを使用してサイトのスクレイピングをテストし、適切な要素からのみデータを取得していることを確認(rèn)しました。これは、必要なデータがページ上にあり、バックエンドで利用できないような、スクレイピングが難しいサイトで作業(yè)している場(chǎ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);

反復(fù)的なタスク

サイトを手動(dòng)でテストしていて、タスクを何度も繰り返すのが初めての場(chǎng)合。 ユーザーがどのような経験をしているかを確認(rèn)するには、クリック イベントを繰り返す必要があるかもしれません。スニペットを作成すると、これを繰り返し実行するのに非常に役立ちます。スニペットをスクリプト內(nèi)のブレークポイントと組み合わせて、より長(zhǎng)いワークフローを支援します。

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

結(jié)論

スニペット パネルは、開(kāi)発ワークフローを強(qiáng)化できる多用途ツールです。タスクを自動(dòng)化し、効率的にデバッグし、コンテンツを分析することで、日常業(yè)務(wù)の時(shí)間と労力を節(jié)約できます。

スニペットには別の使用例がありますか?以下のコメント欄で共有してください!

以上がChrome DevTools スニペットの力を解き放つの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。