タグ付けされた質問 「google-chrome-devtools」

Chrome DevToolsは、Google Chromeに組み込まれたWeb開発ツールです。

4
他の要素がマウスオーバー/入力されたときにのみ表示される要素を検査します
別の要素がマウスオーバー/入力されたときにのみ表示される要素（ツールチップなど）を検査したいことがよくあります。表示される要素は、jQueryのmouseenterイベントを介して表示されます。 マウスが含まれている要素から離れるとツールチップが消えるため、ツールチップを検査できません。 JSイベントを一時停止して要素にカーソルを合わせ、ブラウザのJSを一時停止して正常に検査する方法はありますか？ 例として、Twitterブートストラップのツールチップhttp://getbootstrap.com/javascript/#tooltipsを調べてみてください。
1
Chrome> = 24-開発ツールを右にドッキングする方法は？
右側にdevtoolsをドッキングするのが好きです。画面を分割してウィンドウを手動で配置する必要がないことに気付いたとき、そのオプションを初めて見たときは、どれほどうれしく思いましたか。 そのオプションのクロムの最近のバージョンが欠落しているようです。すでに右側にdevtoolsがあるインストールでも、オプションは削除されます。 どこに行ったの？
20
Chromeでホバーされた要素を検査しますか？
Chromeのデベロッパーツールを使用して、サイトでツールチップがどのように構成されているかを確認しようとしています。ただし、アイテムにカーソルを合わせても、「要素を検査」しても、htmlのツールチップには何も表示されません。私はスタイルを次のように設定できることを知っています:hoverにいますが、それでもツールチップのhtmlまたはcssが表示されません。 何か案は？
12
React Nativeで（デバッグ用の）ネットワーク要求を表示するにはどうすればよいですか？
デバッグを支援するためにReact Nativeでネットワークリクエストを表示したい-理想的には、Chromeの開発ツールの[ネットワーク]タブで。 GitHub（https://github.com/facebook/react-native/issues/4122およびhttps://github.com/facebook/react-native/issues/934）には、これに関するいくつかのクローズされた問題がありますが、私はしませんそれらを完全に理解する。React Nativeのポリフィルの一部を元に戻し、追加のデバッグフラグを使用してコマンドを実行し、Chromeのセキュリティ設定を変更する必要があるようです。そして、どうやらこれを行うことにはセキュリティ上の問題があり、ひどい考えになるかもしれませんが、スレッドに関与している人は誰も、それらが何であるかを明確に述べていません。 誰かが、React Nativeで[ネットワーク]タブを機能させるためのステップバイステップのガイドと、それに伴うセキュリティ問題の説明を提供できますか？
9
ホバー要素を「検査」しますか？
注：私は同様のスレッドを読みましたが、まったく問題はありません。それを右クリックすると、すぐに消えます。 「要素の検査」はChromeの非常に貴重なツールですが、多くの皆さんがすでに持っている魔法のような方法を知った私の最新の進出は、ナビゲーションバーにある要素のサブメニューを作成するのを見たところです。親アイテム。 ポップアップ（またはダウン）のスタイルが適切ではないため、右クリックして>要素を検査して、正確にどこから来ているのかを確認し、目的の効果を達成するためのより良いアイデアを得ます。 しかし、マウスをメニューから離すとすぐに消えてしまいます。 そのため、検査ペインで別の要素を選択して、どの領域が同時に強調表示されているかを確認することはできません。 これを回避する方法はありますか？メニューを変更せずに、アクティブ化されると「ポップアップ」状態を維持しますか？
6
Chrome Webインスペクターを使用してホバーコードを表示する方法
chromes Webインスペクタを使用してコードを表示すると非常に便利です。しかし、たとえばボタンのホバーコードをどのように表示しますか？ボタンの上にマウスを移動する必要があるため、インスペクターでボタン（マウス）を使用できません。インスペクターでこれを達成するためのショートカットまたは他の方法はありますか？
3
シャドールートとは
Google Chromeの開発者ツールで、タグの#shadow-root下に右が表示され<html lang="en">ます。それは何をし、何に使用しますか？FirefoxでもIEでも表示されません。Chromeでのみ、これは特別な機能ですか？ 私は、それを示して、それを開くと<head>し、<body>かつ横に名前のリンクrevealクリックすることで、それが指す<head>と<body>、何もありません。
4
Chromeデベロッパーツールで特定のファイルに移動する方法
私は重いフロントエンドアプローチでWebアプリケーションを開発しています。DojoとAMD-wayを使用することで、現在100を超える異なるJavaScriptファイルを簡単にロードできるテスト画面があります。 特定の問題をデバッグする場合、または特定のファイルの古いバージョンが表示されるかどうかを確認する場合、Chromeデベロッパーツールの[ソース]タブでファイルを見つけるのが非常に困難です。 ファイルの名前を入力して、そのファイルのソースに移動するためのショートカットやアクションはありますか？
3
カラーピッカー（スポイト）の使い方は？
私が発見した、Chrome開発ツールに組み込まれた非常に便利なツールがあります。名前すら知らず、グーグルで見つけられません。ピクセルインスペクターツールだと思います。 私はそれを使用する方法を次の方法を見つけます： 1a。背景色でhtml要素を検査します。 1b。要素の背景色を定義します。 カラーピッカーをクリックします。 （開発ツールではなく）ページ上の任意の要素の上にマウスを移動します 参照：http : //skalar.darkware.hu/skalkaz/Chrome-Colorpicker.gif 私の質問：このツール名は何ですか？簡単に使うには？ほとんどの場合、色は気にしませんが、アイコンのピクセルを調べたいと思います。このツールのホットキーはありますか？
2
Google Chromeモバイルエミュレータ：画面キーボードに表示する方法
Chromeのモバイルエミュレーションツールを使用してWebサイトのモバイルバージョンをデバッグしていますが、テキストフィールドを選択するときに画面キーボードをポップアップする方法がわかりません。 テキストボックスをクリックしましたが、キーボードがポップアップしません。これをモバイルデバイスで実行すると、デフォルトの入力方法（キーボード）がポップアップ表示され、入力できます。 これを複製する方法はありますか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.