Chrome DevTools スニペットの力を解き放つ

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

この記事では、日常の開発作業での実際的な使用法をいくつか示しながら、スニペット パネルの機能に焦点を当てたいと思います。

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

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

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

アクセス方法

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

しかし、なぜ？

前回の記事では、Web サイトのデバッグに役立つコンソールを使用するさまざまな方法について説明しました。 スニペットはこれを少し超えています。 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 中国語 Web サイトの他の関連記事を参照してください。