school Are you a developer in an agency in the UK, Indonesia or India? Find out more about our free 2 day Progressive Web Apps training .

任意のページからのコード スニペットの実行

スニペットは、Chrome DevTools の [Sources] パネルで作成および実行できる小さいスクリプトです。 どのページからもアクセスしたり実行したりできます。 スニペットを実行すると、そのスニペットは現在開いているページのコンテキストから実行されます。

複数のページで繰り返し使用している小さいユーティリティやデバッグ スクリプトに気付いたら、これらのスクリプトをスニペットとして保存することを考えてください。 スニペットをブックマークレットの代わりに使用することもできます。

TL;DR

  • スニペットは、(ブックマークレットと同様に)どのページからも実行できる小さいスクリプトです。
  • スニペットの一部をコンソールで実行するには、[Evaluate in Console] 機能を使用します。
  • ブレークポイントなど、[Sources] パネルでよく使われる機能もスニペットで動作します。

スニペットの作成

スニペットを作成するには、[Sources] パネルを開いて [Snippets] タブをクリックし、ナビゲータ内で右クリックして [New] を選択します。

スニペットの作成

エディタでコードを入力します。未保存の変更があるスクリプトには、次のスクリーンショットのように名前の横にアスタリスクが付きます。 Command+S(Mac)または Ctrl+S (Windows、Linux)を押して変更を保存します。

未保存のスニペット

スニペットの実行

スニペットを実行するには 3 つの方法があります。

  • すべてのスニペットのリストが表示された左側のペインでスニペットのファイル名を右クリックし、[Run] を選択します。
  • [Run] ボタン([run snippet] ボタン)をクリックします。
  • Command+Enter(Mac)または Ctrl+Enter(Windows、Linux)を押します。

コンソールでスニペットの一部を評価するには、その部分をハイライト表示し、エディタ内の任意の場所を右クリックして [Evaluate in Console] を選択するか、キーボード ショートカット Command+Shift+E(Mac)または Ctrl+Shift+E(Windows、Linux)を使用します。

コンソール内での評価

ローカルな変更の表示

スニペットに加えた変更の差分を表示するには、(スニペットが表示されている状態で)エディタ内を右クリックし、[Local modifications] を選択します。

ローカルな変更

[History] という名前の新しいタブが [Console] ドロワーに表示されます。

スニペットの履歴

タイムスタンプはそれぞれ変更を表します。タイムスタンプの横にあるカラットを展開すると、その時点の変更の差分が表示されます。[revert] リンクをクリックすると、改訂履歴が削除されます。 2016 年 6 月 27 日時点では、[apply revision content] と [apply original content] の各リンクは意図したとおりに動作しないようです。

ブレークポイントの設定

他のスクリプトと同様に、スニペットにもブレークポイントを設定できます。[Sources] パネル内からブレークポイントを追加する方法については、ブレークポイントの追加を参照してください。