Chromeデベロッパーツール。Snippets Supportとは？

質問

バージョン 19 で、Chrome の Web インスペクタに、スニペットのサポートという実験的な機能が追加されました。これを有効にする方法は次のとおりです。

1. chrome:flagsを開き、"Developer Tools experiments"を有効にして、再起動します。

2. Web Inspector (Developer Tools) を開き、右下の設定の歯車アイコンを押し、"Snippets support" を有効にし、再起動します。

   

3. Scripts パネルを開き、左側の "navigator tree" アイコンをクリックし、空の Snippets タブを見つけます。

   

私の質問は これを何に使うのですか？どのようにスニペットでこれを移入することができますか？

どのように解決するのですか？

簡単に言うと、スニペットは複数行のコンソールであり、反復的なJS開発ワークフローであり、共通のデバッグヘルパーのための永続的なストアなのです。

developers.google.com/chrome-developer-tools/docs/authoring-development-workflow#snippets

スニペットが支援できるユースケースには、以下のようなものがあります。

• ブックマークレット - は、特に編集したいブックマークレットをスニペットとして保存することができます。
• ユーティリティ - 現在のページと相互作用するためのデバッグヘルパーを保存し、デバッグすることができます。そのようなユーティリティのコミュニティが作成したリストが利用できます。
• デバッグ - スニペットは、シンタックスハイライトと持続性を備えた複数行のコンソールを提供し、ワンライナー以上のコードのデバッグのために便利です。
• モンキーパッチのコード - 実行時にパッチを当てたいコードは、Snippetsを通して行うことができますが、多くの場合、Sourcesタブでコードをライブ編集することができます。

最後に、個人的によく使うスニペットを集めてみたので、それを入れておくとよいでしょう。 github.com/paulirish/devtools-addons/wiki/Snippets

スニペットをすばやく実行するために、次のことができるようになりました。Ctrl-Shift-Pでコマンドパレットを表示し、バックスペース、そしてプレフィックスとして「！」を使用し、実行したいスニペット名を入力します。