web-dev-qa-db-ja.com

Firefox DevToolsの[インスペクター]タブで簡単な検索を行う方法は？

Firefox DevTools を使用しており、HTMLツリーを表示するInspectorタブを使用しています。

Search HTML機能を使用すると、タグのみが検索されます。だから私がこれを持っているとしましょう：

<div class="lol">textinsidediv</div>

そして、「div」を検索すると、それに応じて<div>が返されます。ただし、「textinside」を検索すると、そこから始まっているにもかかわらず、コンテンツ内のテキストと一致しません。

私の質問：このHTMLツリー内の任意の文字列を検索するにはどうすればよいですか？

（逆に、Firebugは期待どおりに単純なテキスト検索を実行します。）

firefoxdomsearchfirefox-developer-tools
31
pillarOfLight

これは本当に役に立たないhtmlタグ検索ではなく、実際にCSSセレクターを検索します（css、JavascriptのquerySelector、またはjQueryセレクターで使用するものと同じです）

したがって、#idを検索したり、.classを検索して特定のクラスのすべての要素を調べたり、テキストを含む属性を持つすべての要素を検索したりできます。たとえば、[class*="o"]はすべての要素にクラス属性の文字o。これは、デザイナー/開発者が見つけたいものに役立ちます-テキストを見つけるには、次のことができます Ctrl+F ページ内で右クリックし、要素を調べます。

7
NoBugs

Firefox DevToolsのInspectorパネルでの検索では、Firefox 45以降のテキストコンテンツを検索できます（ バグ835896 を参照）。

ところでFirebug 2.0以降、 [〜＃〜] html [〜＃〜]パネル -でも検索できるようになりました。 CSSセレクターを使用 （プレーンテキスト検索に加えて）。

12
Sebastian Zartner

内部HTMLをコピーすることをお勧めしますが、HTMLとして編集することをお勧めします。これにより、全文を表示するインプレースパネルが表示され、次のコマンドで検索できます。 Ctrl+F または cmd+F。

Ctrl+G 次に見つけるために、 Ctrl+Shift+G 以前を見つける。

5
x77686d

回避策：インスペクターで、最も外側のタグを右クリックし、[内部HTMLのコピー]をクリックします。ワードプロセッサに貼り付けて、そこで検索します。

3
Raffi

これはFireFox45で修正されました...

https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Searching

0
Kenneth Stoddard

answer を参照してください。

開発ツール内で検索する代わりに...

  • どこでもページを右クリック
  • [ソースを表示]を選択します

Macの場合は、ソースビュー内でctrl/fまたはcmd/fを実行することにより、テキスト検索を簡単に実行できます。

0
Kenneth Stoddard