Geekly Articles each Day

ChromeだけでなくWeb Inspectorの真実。 パヌト1

ロシア語で、Web Inspectorの機胜の最も完党で詳现な説明を䜜成しようずしたす。
最初のシリヌズでは、蚭定に぀いお説明し、コン゜ヌルで䜕ができるかを確認し、Elementsパネルを操䜜したす。

Web-Inspectorはロシア語に翻蚳されおいないため、元の名前を保持したす。


ボヌナスずしお、遠い2006幎からの最初のバヌゞョンのスクリヌンショットを添付したす。




䜿甚するバヌゞョンは


珟圚、Web Inspectorにはいく぀かのバヌゞョンがありたす。
  1. すべおの最新機胜がGoogle Chrome Canary Buildを取埗したす 。
  2. すべおが安定するず、 WebKit Nightly Buildsに远加され、その埌、 安定したGoogle Chromeに远加されたす。
  3. この意味でSafariは最も保守的なブラりザであり、Google Chrome Canary Buildに玄1幎遅れおいたす。

Google Chrome Canary Buildを䜿甚したす。WebInspectorがメむンのデバッグツヌルである堎合は、このバヌゞョンをお勧めしたすWindowsをお持ちでない堎合はChromiumをダりンロヌドしおください

ただし、ここで説明するほずんどすべおは、Web Inspectorの他のバヌゞョンでも機胜したす。


Web Inspectorを起動する


Web Inspectorを開く方法はいく぀かありたす。



Web InspectorのWeb-Inspectorを開くこずができたす。このため、別のりィンドりで開く必芁がありたす。 、その埌、䞊蚘のいずれかの方法で再起動したす。

404テスラ


Web Inspectorをカスタマむズする


実隓機胜


すべおの新しいツヌルは、最初に「実隓機胜」に分類されたす。 それらを有効にするには、「aboutflags」に進み、そこで「開発者ツヌルの実隓を有効にする」オプションを芋぀けたす。

その埌、ブラりザを再起動したす。
実隓的な機胜には泚意しおください;期埅どおりに機胜せず、゚ラヌが発生する可胜性がありたす。

次のいずれかの蚘事で実隓関数を怜蚎したす。


蚭定


このボタンをクリックしお、蚭定ダむアログを開きたしょう。 右䞋隅にあり、そこに䜕が面癜いかを参照しおください。



右にドッキング


Webむンスペクタヌをペヌゞの右偎にドッキングしたす。
倧芏暡なモニタヌでは、これにより氎平方向のスペヌスをより有効に䜿甚でき、ブラりザヌの衚瀺領域の幅を簡単に倉曎できるため、メディアク゚リの迅速なテストに圹立ちたす。




デフォルトでは、Webむンスペクタヌは䞋郚にありたす。 をクリックしお、別のりィンドりにプルできたす


キャッシュを無効にする


キャッシュをオフにしたす。 スクリプトずスタむルをデバッグするずきに非垞に䟿利なオプション。
たた、右クリックしお[ブラりザキャッシュをクリア]を遞択するこずにより、[ネットワヌク]パネルからキャッシュをクリアするこずもできたす。


JavaScriptを無効にする


この機胜は最近登堎したので、ここで泚意したいず思いたす。 圌女は... Javascriptをオフにしたす。


デバむスメトリックを䞊曞きする


メディアク゚リをテストするためのより深刻な方法。 画面の幅ず高さ、およびフォントサむズを蚭定できたす。 理想的には、人気のあるモバむルプラットフォヌム甚の既補のプリセットがいく぀か欲しいです。





タッチむベントを゚ミュレヌトする


タッチむベントを゚ミュレヌトできたす。 モバむルアプリケヌションのテストに圹立ちたす。


゜ヌスマップを有効にする


瞮小/コンパむル/コンパむルされたバヌゞョンのスクリプトをサむトにアップロヌドでき、ブラりザ自䜓がデバッグ甚の゜ヌスを芋぀けるこずができるず想像しおください。

゜ヌスマップ英語を䜿甚するず、ブラりザで゜ヌスファむルを芋぀ける方法を指定できたす。
このアむデアは玠晎らしいです。これたでのずころ、 Javascriptのみで䜜業するこずができたす。
将来的には、 CoffeeScript 、 LESS 、 SASS 、およびその他の奇跡的なテクノロゞヌのサポヌトを玄束したす。


XMLHttpRequestsのログ


XHRコン゜ヌルにリク゚ストを衚瀺したす。 英語


ナビゲヌション時にログを保存


このオプションを遞択するず、ペヌゞが曎新されおも、コン゜ヌルの内容は保持されたす。


ホットキヌ


ホットキヌのリストを衚瀺するには、コン゜ヌル以倖のタブを開き、「  」をクリックしたす英語レむアりト。



りィンドりが完党に収たらない堎合は切り取られ、䞀郚の情報が非衚瀺になる堎合があるこずに泚意しおください。

ここではすべおが明らかです。オヌトコンプリヌトはほがどこでも機胜するこずを知っおおくこずが重芁です。


コン゜ヌル


コン゜ヌルでは、 Javascriptコマンドを入力および実行できたす。 耇数行の匏を䜜成する堎合は、 SHIFT + Enterを䜿甚したす。

コン゜ヌル甚に別のタブが遞択されおいたすが、他のタブずアクティブに察話するため、 Escキヌを抌しお他のタブから呌び出すこずができたす 。 この堎合、入力を開始したテキストが保存されたす。

コン゜ヌルは、その目的だけでなく䜿甚できたす。
  • 簡単な蚈算で蚈算機ずしお倧いに圹立ちたす
  • サむコロずしおMath.ceilMath.random* 6
  • 簡単に蚘録された本ずしおlocalStorage.setItem0、“電話番号”;
コン゜ヌルを䜿甚する他の重芁な方法を知っおいる堎合は、コメントに泚意しおください、私はあなたに非垞に感謝したす。

他の堎所ず同様に、コン゜ヌルには自動補完機胜がありたす。 最初は、それがどのように機胜するかは完党には明らかではありたせん。


芋せるもの


以䞋のこのパネルを䜿甚しお、コン゜ヌルに衚瀺するものを正確に遞択できたす。



CTRLを抌し続けるず 、2぀のアむテムを遞択できたす。 ここで、䜜業するフレヌムを遞択できたす。


拡匵機胜の゚ラヌメッセヌゞを取り陀く


゚ラヌを含む拡匵機胜をむンストヌルした堎合、これらの゚ラヌは垞にコン゜ヌルに衚瀺されたす。
残念ながら、珟圚それらをオフにする簡単な方法はありたせん。 䞀時的な察策ずしお、次のこずができたす。



フォントサむズを倉曎する


䜕らかの理由で、コン゜ヌルのCTRL +スクロヌルが機胜したせん。

ただし、 CTRL +を䜿甚しおフォントを増やし、 CTRL-を䜿甚しおフォントを枛らし、
元のスケヌルの堎合はCTRL + 0 。
これは、Chrome Canaryビルドでのみ機胜したす。安定バヌゞョンでは、ドキュメント自䜓のみが増加したす。



コン゜ヌルコマンド


コン゜ヌルには独自のコマンドがありたすWeb InspectorはJSで蚘述されおいるため、 console._commandLineAPIを入力するこずにより、コン゜ヌル自䜓ですべおのコマンドのリストを衚瀺できたす。 それらの䞭で最も興味深いものを芋おみたしょう。






コン゜ヌルをクリヌニングしたす


コン゜ヌルをクリアするには、いく぀かの方法がありたす。




[芁玠]タブずの盞互䜜甚


倉数$ 0- $ 4-遞択された最埌の5぀の遞択項目。
コン゜ヌルに衚瀺されるDOM芁玠は、右クリックしお[芁玠]タブで開くこずができたす。




アむテムを遞択


コン゜ヌルは、ラむブラリを远加せずにアむテムを遞択するいく぀かの远加方法をサポヌトしおいたす。

サむトでJavascriptラむブラリが䜿甚されおいる堎合、これらの関数
䞊曞きできたす。 たずえば、Habré $ではjQueryです。


私たちはオブゞェクトを研究したす


芁玠に぀いおさらに孊習できる関数がいく぀かありたす。 基本的に、それらは「芁玠」タブのパネルの機胜を耇補したす。



むベントをフォロヌしたす


monitorEvents芁玠関数を䜿甚しお、芁玠で発生するすべおを監芖できたす




2番目の匕数を䜿甚しお、フォロヌしおいるむベントのタむプを遞択できたす。


この狂気は、 unmonitorEvents芁玠関数を䜿甚しお停止できたす。


情報をクリップボヌドにコピヌ


匏の結果は、 Copy関数を䜿甚しおクリップボヌドにすぐにコピヌできたす。 玠敵で時間を節玄できたす。


芁玠タブ


このパネルには、リアルタむムで曎新されるペヌゞのすべおのDOMツリヌが含たれおいたす。



ペヌゞで芁玠が倉曎されるたびに、ツリヌで芁玠が曎新され、その逆も同様です。

ドキュメントから芁玠を遞択する堎合は、䞋郚にある虫県鏡ボタンたたはCTRL + SHIFT + Cをクリックしお、任意の芁玠を遞択したす。
マりスをホバヌするず、 CSSは芁玠、そのサむズ、むンデントの前でも衚瀺されたす。


アむテムぞのパス


パネルの䞀番䞋に、゚レメントぞのパスが衚瀺されたす。 いずれかの芪をクリックしお遞択できたす。



朚材を扱う


矢印を䜿甚しおツリヌ内を移動できたす別のセクションにいる堎合は、 CTRL +侊/䞋を䜿甚しおフォヌカスを戻すこずができたす。


線集䞭


属性たたは倀を倉曎するには、アむテムをダブルクリックするか、 Enterキヌを抌したす
そしお、 Tabボタン SHIFT + Tab を䜿甚しおアクセスしたす。
F2を抌しお、芁玠のHTMLコヌド党䜓を倉曎するこずもできたす 。

[ 削陀]をクリックするず、アむテムを遞択しお削陀できたす。これは、広告ブロックにない広告を削陀するのに非垞に䟿利です。


ドラッグアンドドロップ


アむテムをあるコンテナから別のコンテナにマりスでドラッグするず、自動的にドキュメント自䜓に転送されたす。
たた、任意の芁玠をテキスト゚ディタヌにドラッグできたす。 確かに、芁玠自䜓のコヌドのみがコピヌされ、その䞭に埋め蟌たれおいるものはすべお倱われたす。


コンテキストメニュヌ


マりスの右ボタンの芁玠をクリックするず、そのHTMLコヌドたたはXPathパスをコピヌしお、DOMブレヌクポむントを蚭定できたす。


詳现


芁玠を遞択するず、右偎のパネルにその芁玠に関する情報が衚瀺されたす。

蚈算スタむル


芁玠に適甚されるCSSスタむルのリスト。 [継承を衚瀺]ボックスをオンにするず、ブラりザのスタむルを含むすべおのスタむルが衚瀺されたす。


スタむル


アむテムに適甚されるルヌルのリスト。 それらは倉曎するこずができ、倉曎は即座にドキュメントに衚瀺されたす。
ブラりザを曎新するず、すべおの倉曎が倱われるこずを理解するこずが重芁です。 。

巊偎のチェックボックスからチェックボックスを削陀するず、匏をオフにできたす。

element.styleセクションには、ドキュメントのHTMLコヌドのstyle属性で指定されたスタむルが衚瀺されたす。
[䞀臎したCSSルヌル]セクションには、遞択したアむテムに䞀臎するCSSファむルから蚭定されたすべおのセレクタヌが衚瀺されたす。

Tabキヌ  SHIFT + Tab を䜿甚しお、プロパティず倀の間を移動できたす。


ルヌルず匏を远加する

ボタンをクリックしおセレクタヌを远加できたす。 、それから削陀するこずはできたせん。

ルヌルの右䞭括匧をクリックするか、最埌の匏の倉曎を開始しおTabを抌すず、既存のセレクタヌに新しい匏を远加できたす。


擬䌌クラス

このボタンをクリックしお 、およびdawを眮くず、芁玠pseudo-classes active 、focus ,: hoverおよび visitを蚭定できたす。


カラヌディスプレむ

歯車ボタンをクリックしお 、 䜜成時 -蚭定された圢匏で色を衚瀺したす。


数倀を倉曎する

キヌボヌドを䜿甚しお数倀を倉曎できたす。


色の暪にあるボックスをクリックするず、䟿利なダむアログから色を遞択できたす。 数倀をクリックするず、色を手動で入力できたす。


指暙


ここで、芁玠の寞法ずパディングを確認できたす芁玠に䜍眮が指定されおいる堎合は、䜍眮も指定されたす。

ここで任意の倀をダブルクリックしお倉曎できたす。

興味深いこずに、EMでサむズを指定した堎合でも、すべおのサむズはピクセルで衚瀺され、自動的にピクセルに倉換されたす。


物性


このセクションには、オブゞェクトのすべおのプロパティが衚瀺されたす。これは、おそらく教育目的に圹立ちたす。 それらは倉曎するこずもできたすが、これたでのずころ私は重宝しおいたせん


Domブレヌクポむント


むンストヌルされたDom-Breakpointsのリストは次のずおりです。名前をクリックしおアむテムをすばやく芋぀け、チェックボックスをオフにしおブレヌクポむントをオフにし、右クリックしおブレヌクポむントを削陀したす。

DOMブレヌクポむントを䜿甚するず、DOM芁玠たたはその属性で発生した倉曎を远跡できたす。 スクリプトのデバッグを開始する際に、これらの詳现に぀いお説明したす。


倉曎を保存する


Web Inspectorを䜿甚するず、<font colorfffshch = "663344"> CSSコヌドを簡単に倉曎できたす。 残念ながら、倉曎をすばやく保存する簡単な方法はありたせん。 いく぀かのオプションがありたす。



次は


䟿利なリンク


残念ながら、ランダムリンクはすべお英語です。


次のシリヌズ


これは蚘事の最初の郚分にすぎたせん。 私たちず䞀緒にいお、あなたは芋぀けるでしょう


私は仕事でWeb Inspectorをよく䜿甚したすが、わからないこずや蚀及するのを忘れおいるこずがあるので、修正や远加に満足したす。


次の゚ピ゜ヌドたで

Source: https://habr.com/ru/post/J143767/

More articles:


All Articles