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

Kayce Basques

Sofia Emelianova

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

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

注: DevTools は、スニペットをローカル設定として保存します。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! メッセージが表示され、ページのコンテンツが変更されます。

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

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

1. [ソース] > > [スニペット] に移動します。

   

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

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

   

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

スニペットを作成

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

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

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

1. [スニペット] ペインを開きます。
2. [新しいスニペット] をクリックします。

3. スニペットの名前を入力し、Enter キーを押して保存します。

   

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

1. DevTools 内の任意の場所にカーソルを合わせます。
2. Ctrl+Shift+P（Windows/Linux）または Command+Shift+P（Mac）を押して、コマンド メニューを開きます。

3. Snippet と入力し、[Create new snippet] を選択して Enter キーを押してコマンドを実行します。

   

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

スニペットを編集する

1. [スニペット] ペインを開きます。

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

   

3. コードエディタを使用して、スニペットのコードを編集します。スニペット名の横にアスタリスクが表示されている場合は、変更が保存されていないことを示します。

   

4. 保存するには、Ctrl+S キー（Windows/Linux）または Command+S キー（Mac）を押します。

スニペットを実行する

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

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

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

3. エディタの下部にあるアクションバーで [実行] をクリックするか、Ctrl+Enter（Windows/Linux）または Command+Enter（Mac）を押します。

   

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

1. DevTools 内の任意の場所にカーソルを合わせます。
2. Ctrl+O（Windows/Linux）または Command+O（Mac）を押してコマンド メニューを開きます。

3. ! 文字の後に、実行するスニペットの名前を入力します。

   

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

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

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

スニペットを削除する

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