webdevqa.jp.net

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

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

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

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

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

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

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

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

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

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

5
x77686d

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

3
Raffi
0

answer を参照してください。

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

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

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

0