web-dev-qa-db-ja.com

Chrome開発者ツール：スニペットサポートとは何ですか？

バージョン19の時点で、ChromeのWeb Inspectorには「スニペットサポート」と呼ばれる実験的な機能があります。有効化する方法は次のとおりです。

  1. Chrome：flagsを開き、「開発ツールの実験」を有効にして、再起動します。

  2. Web Inspector（開発者ツール）を開き、右下隅の設定歯車アイコンを押し、「スニペットサポート」を有効にして再起動します。

    enable snippets support

  3. スクリプトパネルを開き、左側の「ナビゲータツリー」アイコンをクリックして、空の「スニペット」タブを見つけます。

    snippets tab

私の質問は、次のとおりです。これを何に使用できますか？スニペットをどのように入力できますか？

javascriptgoogle-chrome-devtoolsweb-inspector
76
Jo Liss

要するに、スニペットは、複数行のコンソール、反復的なJS開発ワークフロー、および一般的なデバッグヘルパーの永続ストアです。

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

スニペットが役立つユースケースの一部は次のとおりです。

  • ブックマークレット-すべてのブックマークレットをスニペットとして、特に編集したいものとして保存できます。
  • Utilities-現在のページと対話するためのデバッグヘルパーを保存およびデバッグできます。そのようなユーティリティのコミュニティキュレーションリストが利用可能です。
  • デバッグ-スニペットは、構文の強調表示と永続性を備えた複数行のコンソールを提供し、1ライナー以上のコードのデバッグに便利です。
  • モンキーパッチコード-実行時にパッチを適用するコードはスニペットで実行できますが、多くの場合、[ソース]タブでコードをライブ編集できます。

snippets screenshot

最後に、私は個人的に武器庫に含めることができるいくつかの一般的なスニペットを収集しています： github.com/paulirish/devtools-addons/wiki/Snippets

スニペットをすばやく実行するには、これを実行できます。 「コマンドパレット」の場合はCtrl-Shift-P、次にバックスペース、そして！プレフィックスを付けてから、実行するスニペット名を入力します。

enter image description here

84
Paul Irish

私はポール・アイリッシュにそれについて何か知っているかどうか尋ねました、彼はどちらとも言えませんが、それはまだ完全に実装されていないと言い、バグトラッカーを指し示しました、私は頭を見つけました ticket diffに多くのFIXME: To be implemented.コメントがあるコードを作成します。

12
JaredMcAteer

右クリックして新しいものを作成します。

Chrome DevTools Snippets — New

9
NVI

Chromeデベロッパーツールのスニペットサポートにより、JavaScriptコードスニペットを作成、編集、保存、実行できます。

5
vsevik

自分でその実験を有効にすることはできません（Developer Tools experiments私のchrome:flagsが、Safariから this の説明を見つけました。

要するに、「HTMLとCSSのブロックを入力して、その場でレンダリングできる小さなユーティリティです」。

ブログの投稿から、Safariにはバグがあるように思われるため、多分Chromeはまだ実装していません。

3
Vidar S. Ramdal

便利なスニペットのリストはこちらにあります http://bgrins.github.io/devtools-snippets/

便利なスニペットの1つは「jquerify.js」です。これを使用すると、jQueryがまだ含まれていない場合は、任意のページに含めることができます。

3
NavaRajan