楽しみと利益のためのコマンドラインAPI

ブラウザー開発者ツールコマンドラインAPI：開発とデバッグ効率を改善するための強力なツール

この記事では、ブラウザー開発者ツールの強力なコマンドラインAPIを調査します。これは、開発とデバッグエクスペリエンスを大幅に改善するために、さまざまなエイリアス、便利な機能、ショートカットを提供します。

コアポイント：

コマンドラインAPIを使用すると、開発者はJavaScriptコンソールのWebページと対話できます。
APIはJavaScriptコンソールアクセスに限定されており、ページスクリプトに使用することはできませんが、ブラウザウィンドウで直接コードスニペットを実験するのに便利です。
APIは、
• （$エイリアス）、document.querySelector（オブジェクトのすべてのプロパティをリスト）、dir、（ブレークポイントを設定し、関数呼び出しを監視します）。 debug monitor制限（たとえば、ネイティブメソッドやカスタムイベントには適用されない）にもかかわらず、コマンドラインAPIは開発者にとって強力なツールであり、効率を大幅に向上させ、ワークフローを簡素化します。

コマンドラインAPIには、一連のエイリアス、便利な機能、ショートカットが含まれており、JavaScriptコンソールでWebページと直接対話できるようになります。この記事では、開発とデバッグのエクスペリエンスを改善するためのいくつかの実用的なツールとそのア​​プリケーションを紹介します。

ブラウザのJavaScriptコンソールにさまざまな方法でアクセスできます。通常、キーを押して、[コンソール]タブをクリックします。

F12より深く行く前に、クイズをしましょう：ブラウザのCSSレイアウトのアウトラインを視覚化する方法を知っていますか？

回答：

108バイトのコードのみが必要です。

この簡潔なコードの作成者であるAddy Osmaniが言ったように、これは「Twitterサイズのデバッガー」です。あなたは今それを試すことができます。そのコードのラインをコピーして、お気に入りの開発者ツール（Chrome's Devtools、FirefoxのFirebug、Opera's Dragonfly、SafariのWeb Inspector、さらにはIEのF12ツールなど）のJavaScriptコンソールに貼り付けます（つまり、シリーズのみをサポートしていますが、

オブジェクト）。

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

$console

色の16進価値の生成は印象的ですが、特別なものにもっと注意を払ってもらいたいと思います。これは、のエイリアスであり、コマンドラインAPIの多くの巧妙な機能の1つです。 APIが提供できる他の機能を見てみましょう。

コマンドラインAPIは、JavaScriptコンソールでのみ使用できます。ページ上のスクリプトにAPIを提供することはできません。しかし、この利点は、この記事の残りの部分のすべてのコードスニペットをブラウザウィンドウで直接試す機会を与えることです。 JavaScriptコンソールと実験を開くだけです。

$$document.querySelectorAlldom Exploration

jqueryライブラリに精通している場合、

が何をするかを推測したかもしれません。

のエイリアスとして、指定されたCSSセレクターに一致する最初のDOM要素への参照を返します。

有名なCookie Clickerゲームで使用する方法を見てみましょう。この単調であるが奇妙に中毒性のあるゲームに遭遇したことがない場合は、基本的に大きなクッキーをクリックして、より多くの焼き菓子を生産し、さまざまなベーキング機器を購入します。その後、これらのデバイスはより多くのクッキーを作成します...あなたはそれを手に入れます。

さて、コンソールをクッキーをクリックして手とマウスに休憩を与えることができたら、それは素晴らしいことではないでしょうか？ちょっとしたJavaScriptと私たちの新しい友人$を使用すると、コードの単純な行で実装できます：

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

これは興味深いものですが、場合によっては、コマンドラインAPIのDOM選択関数にも実際の価値があります。この記事の紹介で$$の力について学びました。 document.querySelectorAllのエイリアスとして、指定されたCSSセレクターに一致するすべてのDOM要素を含む配列を返します。

たとえば、

この関数を使用して、ウェブサイトのすべての画像ソースを抽出できます。

setInterval(function() { $("#bigCookie").click(); }, 10);

特定の要素を探していて、それを再確認したい場合は、

を使用してください。たとえば、inspectは、開発者ツールの[要素]タブの要素に直接移動します。 （JavaScript関数を渡すと、inspect(document.body)も機能します - ソースパネルに移動します。）body inspect

オブジェクトトラッキング

JavaScriptのプロトタイプ継承を理解しようとすると、コンソールに小さなアシスタントがあります：

。このメソッドがオブジェクトで呼び出されると、たとえば

やdirなどのオブジェクトのすべてのプロパティのリストが表示されます。これは、便利な多くのシーンの1つにすぎません。すべてのオブジェクトのプロパティを便利に表示しました。 prototype __proto__オブジェクトの直接プロパティ（つまり、プロトタイプチェーンから継承されていないプロパティ）のみに興味がある場合は、dirおよび

を使用して、名前と関連する値を含む配列を取得できます。 、 それぞれ。試してみてください：

keys valuesオブジェクトはJavaScriptで最も基本的でユビキタスなデータ構造であるため、これらの関数を使用してオブジェクト状態を追跡することがよくあります。

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}

デバッグ

私のウェブサイトやアプリケーションに問題があるときはいつでも最初に行うことは、エラーメッセージのコンソールを確認することです。コンソールで多くの開発時間を費やしました。もしそうなら、あなたは

や

などの機能に興奮する必要があります。それらは、コマンドラインAPIによって提供される強力なデバッグツールの2つの例です。 （残念ながら、SafariのWeb検査官は両方の機能をサポートしていません。）

debug monitor

これにより、関数の最初の行にブレークポイントが設定され、関数が呼び出されるたびにデバッガーが開きます。私はほとんど常にコンソールで作業しているので、これはソースコードを閲覧し、特に圧縮コードを扱うときに手動でブレークポイントを設定するよりもはるかに高速です。この動作をオフにするには、同じ関数にYourLibrary.someFunctionを呼び出してください。 undebug

デバッガーに電話をかけたくないが、特定の関数と使用するパラメーターを呼び出すたびに通知を受け取るだけの場合は、

友人です。 monitor

コンソール内の次のコード：

たとえば、

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

に電話すると、Chromeはこのように通知されます：square

square(5);function square called with arguments: 5

監視を停止するために、

同じ関数に電話をかけるだけです。 FireBugでは、unmonitorはページコードの関数のみで動作することに注意してください。 monitor

コマンドラインAPIは、イベントデバッグのサポートも提供します。

指定されたオブジェクトに登録されている各イベントタイプ（「クリック」または「Mousedown」など）の配列を含むオブジェクトを返します。 getEventListeners

getEventListeners(document);

さらに進むには、を使用して、指定されたイベントが実際にトリガーされているかどうかについて、コンソールでフィードバックを取得することもできます。コンソールに以下の入力を続けてください：

monitorEvents

monitorEvents(window, "resize");ブラウザウィンドウを変更すると、さらに検査するためにイベントオブジェクトとともにコンソールでフィードバックが表示されます。 FireBugは、どのDOM要素が現在のビューポートから外れているか、オーバーフローしているかを通知する素敵な追加機能を追加します。これは、レスポンシブレイアウトのデバッグに非常に役立ちます。

複数のイベントを指定したり、イベントタイプリストから選択することもできます。

完全なリストについては、Google開発者のコ​​マンドラインAPIリファレンスを参照してください。その時点でmonitorEvents(window, ["scroll", "mousedown"]);を使用してイベント監視を無効にできることは驚くことではないかもしれません。 monitorEvents(document, "key"); Chromeユーザーにとっての追加の利点

unmonitorEvents遅かれ早かれ、コンソールのデバッグ機能は、次のような欠点を公開します。

および

ネイティブ方法には適用されません

カスタムイベントには適用されません

オブジェクトのプロパティにアクセスしたときの中断など、
• の不足している機能debug monitor
幸いなことに、Amjad Masadはこれらの問題を彼の優れたChrome Extension Debug Utilsで解決しました（GitHubでソースコードを見つけることができます）。
• monitorEvents
コマンドラインAPIを使用する方法は？

• コマンドラインAPIは、Webページとアプリケーションを一時的に評価するための一連の便利で便利な機能を提供します。特に私のデバッグワークフローでは、console.logナイトメア全体をすぐに置き換え、私のお気に入りのツールの1つになりました。

  JavaScriptコンソールは、すべての主要なブラウザにアクセスできる強力なツールです。使用していますか？もしそうなら、あなたの好きなヒントとヒントは何ですか？

  （FAQの部分は、被験者との相関が弱く、長すぎるため省略されています。）

以上が楽しみと利益のためのコマンドラインAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。