JavaScript のスニペットを実行する

Sofia Emelianova
Sofia Emelianova

コンソールで同じコードを繰り返し実行している場合は、コードをスニペットとして保存することを検討してください。スニペットはページの JavaScript コンテキストにアクセスできます。これは、ブックマークレットに代わる機能です。

[ソース] パネルでスニペットを作成し、任意のページでシークレット モードで実行できます。

たとえば、以下のスクリーンショットでは、左側に DevTools ドキュメントのホームページが表示され、右側の [ソース] > [スニペット] ペインにスニペット ソースコードが表示されています。

スニペットを実行する前の DevTools ドキュメント ホームページ。[実行] ボタンがハイライト表示されている。

以下は、メッセージをログに記録し、ホームページの HTML 本文を、メッセージを含む <p> 要素に置き換えるスニペット ソースコードです。

console.log('Hello, Snippets!');
document.body.innerHTML = '';
const p = document.createElement('p');
p.textContent = 'Hello, Snippets!';
document.body.appendChild(p);

実行。 [実行] ボタンをクリックすると、[コンソール] ドロワーがポップアップ表示され、スニペットが記録する Hello, Snippets! というメッセージが表示され、ページのコンテンツが変更されます。

スニペット実行後のホームページ。

[スニペット] ペインを開く

[スニペット] ペインにスニペットが一覧表示されます。スニペットを編集するには、次の 2 つの方法のいずれかで開きます。

  1. [Sources] &gt; [その他のタブ。] &gt; [Snippets] に移動します。

    [Sources] ペインの [その他のタブ] メニュー。

  2. コマンド メニューから:

    1. Ctrl+Shift+P(Windows/Linux)または Command+Shift+P(Mac)を押して、コマンド メニューを開きます。
    2. Snippets」と入力し、[スニペットを表示] を選択して、Enter キーを押します。

    コマンド メニューから [スニペットを表示] を選択する。

[Sources] &gt; [Snippets] ペインに、保存したスニペットのリストが表示されます。この例では空です。

空の [Snippets] ペイン。

スニペットを作成

スニペットは、[スニペット] ペインで作成することも、DevTools の任意の場所の [コマンド メニュー] から対応するコマンドを実行して作成することもできます。

[スニペット] ペインでは、スニペットがアルファベット順に表示されます。

[Sources] パネルでスニペットを作成する

  1. [スニペット] ペインを開きます
  2. [新しいスニペットです。 新しいスニペット] をクリックします。
  3. スニペットの名前を入力し、Enter キーを押して保存します。

    スニペットに名前を付ける。

コマンド メニューからスニペットを作成する

  1. DevTools 内の任意の場所にカーソルを合わせます。
  2. Ctrl+Shift+P(Windows/Linux)または Command+Shift+P(Mac)を押して、コマンド メニューを開きます。
  3. Snippet」と入力して [新しいスニペットを作成] を選択し、Enter キーを押してコマンドを実行します。

    コマンド メニューから [新しいスニペットを作成] を選択する。

新しいスニペットにカスタム名を付ける場合は、スニペットの名前を変更するをご覧ください。

スニペットの編集

  1. [スニペット] ペインを開きます
  2. [スニペット] ペインで、編集するスニペットの名前をクリックします。[Sources] パネルがコードエディタで開きます。

    コードエディタで開いたスニペット。

  3. コードエディタを使って、スニペット内のコードを編集します。スニペット名の横にあるアスタリスクは、まだ変更を保存していないことを意味します。

    スニペット名の横のアスタリスクは、保存されていないコードを示します。

  4. Ctrl+S(Windows/Linux)または Command+S(Mac)を押して保存します。

スニペットの実行

スニペットの作成と同様に、[スニペット] ペインとコマンド メニューの両方から実行できます。

[Sources] パネルでスニペットを実行する

  1. [スニペット] ペインを開きます
  2. 実行するスニペットの名前をクリックします。[Sources] パネルがコードエディタで開きます。
  3. エディタの下部にあるアクションバーで [実行。 実行] をクリックします。 または Ctrl+Enter キー(Windows/Linux)または Command+Enter キー(Mac)を押します。

    [Run] ボタン。

コマンド メニューからスニペットを実行する

  1. DevTools 内の任意の場所にカーソルを合わせます。
  2. Ctrl+O(Windows/Linux)または Command+O(Mac)を押して、コマンド メニューを開きます。
  3. ! 記号の後に実行するスニペットの名前を入力します。

    [開く] メニューからスニペットを実行する。

  4. Enter キーを押してスニペットを実行します。

スニペットの名前を変更する

  1. [スニペット] ペインを開きます
  2. スニペット名を右クリックして、[名前を変更] を選択します。

スニペットを削除する

  1. [スニペット] ペインを開きます
  2. スニペット名を右クリックして、[削除] を選択します。