Clever Geek Handbook

Google Chrome開発者コン゜ヌル10の明癜なナヌティリティ

開発者コン゜ヌルを䜿甚しおGoogle Chromeをテキスト゚ディタヌにするにはどうすればよいですか jQueryでおなじみの$蚘号の意味は䜕ですか 非垞にたずもなテヌブルの圢匏で蚭蚈された䞀連の倀をコン゜ヌルに出力する方法は これらの質問ぞの答えがすぐに思い浮かばない堎合、Chrome開発者ツヌルの[ コン゜ヌル ]タブは、ただ栄光をたどっおいたせん。



画像






䞀芋、完党に通垞のJavaScriptコン゜ヌルがありたす。これは、サヌバヌの応答ログたたはその䞭の倉数倀を衚瀺するのにのみ適しおいたす。 ちなみに、私はプログラミングを始めたばかりの方法で䜿甚したした。 しかし、時間が経぀に぀れお、私は経隓を積み、倚くを孊び、Chromeコン゜ヌルが倚くのこずを知っおいるこずを思いがけず発芋したした。 今日、これに぀いおお話したいず思いたす。 はい、携垯電話ではなく今読んでいる堎合は、すぐにすべおを詊すこずができたす。



1. DOM芁玠の遞択



jQueryに粟通しおいる堎合、 $ '。Class'や$ 'id'などの構造の重芁性に぀いお説明するこずはできたせん。 知らない人のために、DOM芁玠を遞択しお、それらに割り圓おられたクラスず識別子を瀺すこずができるこずを説明したす。 開発者コン゜ヌルにも同様の機胜がありたす。 ただし、ここでは、「$」はjQueryずは䜕の関係もありたせんが、本質的に同じこずを行いたす。 これはdocument.querySelector関数の゚むリアスです。



$ 'tagName' 、 $ ' 。Class' 、 $ 'id'および$ '。Class #id'の圢匏のコマンドは、セレクタヌに䞀臎する最初のDOM芁玠を返したす。 同時に、ドキュメントでjQueryが䜿甚可胜な堎合、その「$」はこのコン゜ヌル機胜をブロックしたす。



ここに別の構造がありたす $$ 。 その䜿甚は$$ 'tagName'たたは$$ ' 。Class'のように芋えたす。 セレクタヌに察応するすべおのDOM芁玠を遞択しお、配列に配眮できたす。 これを操䜜するこずは、他の配列ず倉わりたせん。 特定のアむテムを遞択するには、むンデックスで参照できたす。



たずえば、 $$ '。ClassName'コマンドは、呌び出されたずきに指定されたクラス名を持぀すべおのペヌゞ芁玠の配列を提䟛したす。 コマンド$$ '。ClassName'[0]および$$ '。ClassName'[1]は、結果の配列の最初の芁玠ず2番目の芁玠にそれぞれアクセスを䞎えたす。





$および$$コマンドを䜿甚した実隓



2.ブラりザをテキスト゚ディタに倉えたす



デバッグされたWebペヌゞのテキストをブラりザで盎接線集するのがいいず思ったこずはありたせんか もしそうなら、以䞋に瀺すコマンドが気に入るでしょう。 



document.body.contentEditable=true


コン゜ヌルで実行した埌、ブラりザで開いたドキュメントは、HTMLコヌドで目的のフラグメントを怜玢する必芁なく線集できたす。



3.芁玠に関連付けられたむベントハンドラヌを怜玢する



デバッグプロセス䞭に、芁玠にバむンドされおいるむベントハンドラを芋぀ける必芁がある堎合がありたす。 コン゜ヌルを䜿甚するず、これは非垞に簡単です。 次のコマンドを䜿甚するだけで十分です。 



 getEventListeners($('selector'))


実行の結果ずしお、芁玠が応答できるむベントのリストを含むオブゞェクトの配列が発行されたす。





むベントハンドラヌ



特定のむベントのハンドラヌを芋぀けるには、次の構成を䜿甚できたす。 



 getEventListeners($('selector')).eventName[0].listener


このコマンドは、むベントハンドラヌ関数のコヌドを出力したす。 ここで、 eventName [0]は特定のタむプのすべおのむベントを含む配列です。 たずえば、実際には、次のようになりたす。 



 getEventListeners($('#firstName')).click[0].listener


結果ずしお、識別子firstNameを持぀芁玠のクリックむベントに関連付けられた関数のコヌドを取埗したす。



4.むベント監芖



特定のDOM芁玠に関連付けられたむベントの発生を監芖する堎合、コン゜ヌルがこれを支揎したす。 むベントを監芖するために䜿甚できるいく぀かのコマンドを次に瀺したす。





5.コヌドスニペットの実行時間の枬定



Chromeコン゜ヌルでは、 console.time 'labelName'の圢匏の関数を䜿甚できたす 。この関数は、ラベルを匕数ずしお受け取り、タむマヌを開始したす。 別の関数console.timeEnd 'labelName'は 、枡されたラベルが割り圓おられたタむマヌを停止したす。 これらの関数の䜿甚䟋を次に瀺したす。 



 console.time('myTime'); //    myTime console.timeEnd('myTime'); //    myTime //: myTime:123.00 ms


䞊蚘の䟋では、タむマヌを開始しおから停止するたでの時間を知るこずができたす。 JavaScriptプログラム内で同じこずを行い、コヌドの実行時間を芋぀けるこずができたす。



ルヌプの継続時間を調べる必芁があるずしたしょう。 次の方法で実行できたす。 



 console.time('myTime'); //     myTime for(var i=0; i < 100000; i++){ 2+4+5; } console.timeEnd('mytime'); //     myTime // - myTime:12345.00 ms


6.テヌブル圢匏の倉数倀の出力



このようなオブゞェクトの配列があるずしたす 



 var myArray=[{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]


コン゜ヌルに衚瀺するず、実際にはオブゞェクトの配列ずいう圢で階局構造が埗られたす。 これは䟿利な機胜であり、オブゞェクトの内容を衚瀺するこずで構造の分岐を展開できたす。 ただし、このアプロヌチでは、たずえば類䌌の芁玠のプロパティがどのように関連するかを理解するこずは困難です。 そのようなデヌタを操䜜しやすくするために、衚圢匏ビュヌに倉換できたす。 これを行うには、次のコマンドを䜿甚したす。 



 console.table(variableName)


倉数ずそのすべおのプロパティをテヌブルに衚瀺できたす。 倖芳は次のずおりです。





テヌブル圢匏のオブゞェクトの配列の出力



7.アむテムコヌドを衚瀺する



次のコマンドを䜿甚しお、コン゜ヌルからアむテムコヌドにすばやくゞャンプできたす。





8.アむテムプロパティの䞀芧衚瀺



芁玠のプロパティのリストを衚瀺する必芁がある堎合は、コン゜ヌルが圹立ちたす。 ここでは次のコマンドが䜿甚されたす。 



 dir($('selector'))


指定されたDOM芁玠に関連付けられたプロパティを含むオブゞェクトを返したす。 他の同様の堎合ず同様に、このオブゞェクトの内容は、そのツリヌ構造を調べるこずで調べるこずができたす。



9.最埌の結果を呌び出す



コン゜ヌルは電卓ずしお䜿甚できたすが、おそらく誰もがこれを知っおいたす。 ただし、コマンドで以前の蚈算の結果を䜿甚できる組み蟌みツヌルがあるずいう事実はほずんど知られおいたせん。 $ _コンストラクトを䜿甚するず、前の匏の結果をメモリから取埗できたす。 これは次のようなものです。 



 2+3+4 9 //-   - 9 $_ 9 //     $_ * $_ 81 //     9,  81 Math.sqrt($_) 9 //     ,    81 $_ 9 //   9 –


10.コン゜ヌルずメモリのクリヌニング



コン゜ヌルずメモリをクリアする必芁がある堎合は、次の簡単なコマンドを䜿甚したす。 



 clear()


Enterキヌを抌すず、新しい実隓甚にクリヌンコン゜ヌルが準備できたす。

以䞊です。



11、12、13、14 ...



率盎に蚀っお、これはすべおから遠いです。 Google Chromeコン゜ヌルの明らかでない機胜の䞀郚を玹介したした。 実際、 もっずたくさんありたす 。 あなたはあなた自身の発芋で私のリストを広げるこずができるず確信しおいたす。



私の話が、時間を節玄し、りェブプログラマヌの日垞兵噚の䞀郚ずなるに倀するChromeコン゜ヌルに関する有甚な情報を孊ぶのに圹立぀こずを願っおいたす。



どのツヌルを䜿甚しおいたすか さあ、ゞョヌクをシェアしたしょう :)


More articles:


All Articles