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

Kayce Basques 氏
Kayce Basques
Twitter GitHub Glitch
ソフィア・エメリアノバ
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

スニペット ペインを開く

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

  1. [ソース] > タブの追加。 > [スニペット] に移動します。

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

  2. コマンド メニューから、次の操作を行います。

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

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

[ソース] > [スニペット] ペインに、保存したスニペットのリストが表示されます（この例では空）。

[Snippets] ペインは空です。

スニペットを作成

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

[スニペット] ペインでは、スニペットがアルファベット順に並べ替えられます。

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

  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）を押して保存します。

スニペットの実行

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

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

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

  3. エディタの下部にあるアクションバーで 実行。 [Run] をクリックするか、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. スニペット名を右クリックし、[削除] を選択します。