webentwicklung-frage-antwort-db.com.de

Gibt es ein Addon, mit dem Sie CSS-Selektoren in Firefox testen können?

Ich habe mich gefragt, ob es ein solches Addon in Firefox gibt, mit dem Sie CSS-Pfade testen können, um zu überprüfen, ob sie das richtige Element finden. Ich habe nach etwas ähnlichem wie xpather für xpath-Standorte gesucht.

45
user223871

FireFinder macht genau das, was Sie suchen. Sie können entweder CSS- oder XPath-Ausdrücke auswerten, es werden die übereinstimmenden Elemente aufgelistet und auch ein roter Rahmen um sie herum gezeichnet.

Wenn Sie nur kurze Tests durchführen müssen, können Sie auch die Entwickler-Symbolleiste (F12) öffnen und mit $$('selector') einige Schnellsuchen durchführen.

FireFinder

47
K. Norbert

Ja, Sie können sich für FireBug entscheiden, ein vielseitiges Firefox-Add-On für Web-Entwicklung.

Firebug

Um einen CSS-Selektor zu testen, wechseln Sie zur Registerkarte "Konsole" und geben Sie einen Befehl in das untere Formular ein ( more info , um die Befehlszeile zu finden).

Firebug command line

Verwenden Sie in der Befehlszeile die Syntax $$("your CSS selector"), um CSS-Selektoren zu testen, die näher erläutert werden hier . Verwenden Sie diesen Befehl beispielsweise, um alles auszuwählen:

$$("body")
21
Sarfraz

So verwenden Sie den integrierten CSS-Abfrageselektor in Firefox:

Gehen Sie zu Tools> Web Developer> Web Console

Sie können auch ctrlshifti in Windows/Linux oder cmdopti in Macintosh drücken.

Geben Sie Ihren CSS-Selector (unter Verwendung der traditionellen $$()-Syntax) ganz unten links ein.

Die Objektknotenliste wird auf der rechten Seite der Konsole angezeigt.

$$('div')
[object NodeList]
$$('div').length
42

Dies ist praktisch für Selenium Webdriver-Instanzen von Firefox, bei denen eine Erweiterung nicht möglich ist.

12
Droogans

Versuchen Sie es mit der Feuerwanze. http://getfirebug.com/

3
rui

Nicht sicher, ob das hilft. Versuchen Sie es mit Firebug. Ermöglicht die Auswahl eines Elements und das Anzeigen des CSS-Pfads sowie der aktuell angewendeten CSS.

Kann einige Experimente in html/css direkt im Browser durchführen.

3
Mikezx6r

FireFinder ist gut, aber ich habe mit FirePath für Firebug angefangen und bevorzuge es. Es funktioniert ähnlich, kann aber eine erweiterte Ansicht des HTML-Codes um die übereinstimmenden Elemente geben, ohne auf inspect, FriendlyFire usw. klicken zu müssen.

Das Feld, in dem Sie den Locator testen, enthält auch eine Syntaxprüfung, bei der das Feld rot wird, wenn die Syntax fehlerhaft ist. Klicken Sie einfach auf eval, um den Locator zu testen. Übereinstimmungen werden mit zusätzlichem HTML-Code um die übereinstimmenden Elemente angezeigt.

Um CSS-Locator zu testen, möchten Sie die Dropdown-Option "Sizzle" anstelle von CSS in FirePath. Die CSS-Option funktioniert nur für einfache CSS-Selektoren. Komplexe funktionieren nur im Sizzle-Modus (l-Modus). Beispiel:

div.namedService.photoService> div.photoBrowserContainer: nth-child (3)> div.albumName: enthält ('someName')

3
David

Die DOM-Standardfunktion document.querySelectorAll ist das, was Sie wollen, moderne Browser unterstützen dies. Siehe das Dokument

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

Sie können es in der integrierten Webkonsole aufrufen. In der Konsole gibt es eine Verknüpfung $$, nennen Sie es $$('div a').

Ich mag Firebug, weil er zum Blättern klicken kann, um das Element anzuzeigen. Es kann auch im "CSS" -Feld getestet werden.

2
muzuiget

Selenium IDE 1.0.11 veröffentlicht enthält einen CSS-Locator-Builder

2
chirag

Die Schaltfläche 'Suchen' in Selenium IDE ist dafür sehr hilfreich. Es verwendet dieselbe Methode zum Auffinden von Elementen wie Ihre Tests. Daher können Sie Elemente mithilfe einer der unterstützten Strategien suchen.

1
Dave Hunt

jQuery


Mit jQuery können Sie einem Element mit Hilfe des Selektors problemlos einen großen roten Rahmen hinzufügen.

$(document).ready(function(){

  $('#your-css-selector').css('border', '5px solid red');

});
0
Jon Winstanley

Firefinder eignet sich hervorragend zum Testen von Selektoren. Wenn Sie jedoch auch den CSS-Selektor für ein Element erhalten möchten, versuchen Sie SelectorGadget .

0
nacmartin

Ich finde, dass FirePath wirklich großartig ist. Hier können Sie nicht nur CSS, sondern auch xPath nachschlagen. Ich wünschte, es gäbe etwas ähnliches für Chrome und IE, aber leider!

0
Donshon

Firebug ( https://addons.mozilla.org/en-US/firefox/addon/1843 ) oder Web Developer Toolbar ( https: // Addons .mozilla.org/de-de/firefox/addon/60 ). Beide zeigen den Pfad.

0
Tom