Chrome-Konsole: CSS-Selektor kopieren - aber wie?

[rongador]

Hi,

per Chrome-Konsole lässt sich bekanntlich wunderbar u.a. mit CSS arbeiten. Wenn man im Code ein Element anklickt, z.B. ein Bildelement (IMG), so erscheint auf der Webseite direkt beim Bild so eine Info-Blase, eine Art Overlay/Popup, welche exakt den richtigen CSS-Selektor darstellt, z.B. img.siteblog-content.lazyloaded

Dieser CSS-Selektor in dieser Info-Blase wird nur solange angezeigt wie sich der Mauszeiger auf dem jeweiligen Code-Bereich in der Konsole befindet. Bewegt man den Mauszeiger woanders hin, verschwindet die Info-Blase.

Gibt es eine Möglichkeit, diesen Selektor ohne Erweiterung einfach in die Zwischenablage zu kopieren?!

Man kann in der Konsole zwar mit der rechten Maustaste auf den Code klicken und im Kontextmenü in den Bereich "Kopieren >" wandern, doch keiner der dortigen Einträge kopiert den dargestellten CSS-Selektor wie er in der Info-Blase dargestellt wird. Es findet sich nur z.B. „OuterHTML kopieren“, „selector kopieren“, „JS-Pfad kopieren“.

Am ehesten würde wohl „selector kopieren“ passen, aber das gibt viel zu viel Code aus, praktisch vom Großen ins Kleine, z.B. (gekürzt):

#post-123456 > div > div.test-wrapper > div.sidebar.test > div > div.test-page-item > div.test-content-wrap > div.siteblog-content a > img usw.

Ich möchte jedoch nur den in der Info-Blase dargestellten Selektor

img.siteblog-content.lazyloaded

(Die Codes sind jetzt einfach nur hier im Beitrag geschriebene Beispiele)

kopieren. Wie geht das?

Gruß

 

[S.Kara]

Ich verstehe nicht so ganz was du kopieren möchtest.

Willst du den HTML-Code des ausgewählten Elements haben? Wenn ja könntest du F2 drücken und die Stelle kopieren die du haben möchtest.

Wenn du mit dem Element in der Konsole arbeiten möchtest dann kannst du mit $0 auf das zuletzt ausgewählte Element zugreifen.
Sprich: $0.style.display = "none" z.B.

 

[rongador]

@S.Kara Das steht doch bereits ganz genau in meiner Beschreibung.

Ich möchte jedoch nur den in der Info-Blase dargestellten Selektor

img.siteblog-content.lazyloaded

kopieren.

Was soll ich da jetzt nochmal erklären?

 

[S.Kara]

Was soll ich da jetzt nochmal erklären?

Vielleicht mal mit anderen Worten?

Wie ich es verstehe: Du willst das was hier ausgewählt ist kopieren:

Drückste STRG+C dann haste es. Daher kann das ja nicht die Frage sein.

Oder willst du dieses Element kopieren um es woanders einzufügen, dass es dort auch GENAU SO aussieht?
Falls ja dann geht das nicht.

 

[rongador]

@S.Kara Siehst Du diese Info-Blase über Deinem hellblauen Rechteck? Genau das, was dort steht, will ich in die Zwischenablage kopieren. In Deinem Beispiel also:

div.bbCodeBlock-expandContent.js-expandContent

Das habe ich so aber echt ganz genau beschrieben.

 

[netzgestaltung]

ich würde dir direkt zum firefox raten. da klickst du ein element an und kannst in der styles-box auf "Neue Regel hinzufügen" klicken und da steht es schon markiert, bereit zum kopieren.

 

[rongador]

Schön, das, was Du da markiert hast, ist aber nicht genau das, was ich meine. Du hast da eine Klasse eines bestimmten DIV angewählt. Bei mir ist es aber etwas umfangreicher, da geht es um den genauen Selektor eines bestimmten Elements.

Grundsätzlich verwende ich zur Arbeit allerdings Chrome. Firefox und Opera nutze ich auch, sogar Edge für manche Sachen. Aber hier geht es bewusst um Chrome.

 

[netzgestaltung]

probier das mal bei einem element mit id. was soll bitte ein "genauer Selektor" deiner meinung nach sein? Das Element hatte ja nur Klassen, die Methode ist aber gleich. Wenn du beginst elememt#id.class zu mixen wird dein CSS 100% unflexibel werden. besser du definierst element #id und .class jeweils in einer eigenen definition und nur wenn der mix zustandekommt greifen die regeln ineinander.

Wenn ein Element eine ID hat gibt es keinen genaueren Selektor als eine ID(die darf es ja nur einmal je seite geben...) - außer du willst unterschiedliches verhalten, je nach dem in welchen eltern das Element steckt.

Dann kommt wieder der "von außen nach innen" teil ins spiel. das lässt sich natürlich beliebig variieren beispielsweise body > .selector + .selector2 > header .selector #mein-selector - woher soll aber der browser deine Logik kennen?

Daher bietet er dir alles und du kannst streichen was du nicht brauchst. ich entwickel hauptsächlich im FF da er viel mehr Komfort im CSS Bereich bietet als der Chrome(+Derivate) und wenns im FF passt, passts auch im Chrome ;-)

 

[rongador]

Also immer noch am Thema vorbei:

Ich will das, was in der gut sichtbaren Infoblase steht in die Zwischenablage kopieren. Fertig.

 

[netzgestaltung]

Du kannst dir das mittels Javascript in der Konsole bauen. Ein Event-Listener, der auf Tastenkombi Lauscht und die funktion dann einen string deiner wahl aus dem element baut.
du mußt herausfinden, wie du das derzeit markierte Dom Element auswählst

 

[rongador]

Okay, das ist mir leider zu hoch. Ich will echt nur das, was in der Infoblase steht, kopieren. Ich meine: Es steht doch da. Es ist doch bereits dort, perfekt ausgeschrieben, es wird in einer einzelnen Blase angezeigt. DAS will ich. Ganz einfach. Wenn es nicht geht: Okay. Ich will nur wissen, ob und wie es seitens Chrome geht. Mehr nicht.

 

[netzgestaltung]

Ich hab das noch mal upgedatet, vergleich, probiers oder lasses. der screenshot ist aus dem chrome

Ergänzung (5. Januar 2023)

Ich hab das oben nun mit der Kopierfunktion erweitert, so dass es automatisch in der Zwischenablage landet.

Ergänzung (5. Januar 2023)

Also ich hab dir die Lösung hier runtergezogen:

Im Chrome zu beginn deiner Sitzung gibst du diesen Code in die Console:

var get_my_selector = function get_my_selector(element){
  var selector = element.tagName.toLowerCase() + '.' + element.className.replaceAll(' ', '.'); // baut den gewünschten slector
  selector = selector.replace(/^[.\s]+|[.\s]+$/g, ""); // entfernt punkte am ende
  navigator.clipboard.writeText(selector); // copy zwischenablage
  return selector; // anzeige in der console
};

Dann:

Im Chrome auf das Element mit der Rechten Maus und "Store as Global Variable" ganz unten auswählen, die Console klappt auf und zeigt "temp1" an.

Dann gibst du diesen Code in der Console ein:

get_my_selector(temp1);

und hast das wunschergebnis in der zwischenablage.

Anhang anzeigen 1307471

mfg.

 

[rongador]

Ich habe damit per JS noch nicht in der Konsole gearbeitet. Bleibt das dann so dauerhaft erhalten oder muss ich das bei jedem Chrome-Start erneut eingeben?

 

[netzgestaltung]

das wird beim seitenladen angegeben oder du baust es in die seite ein, dann reicht es, die funktion nur aufzurufen(mit pfeil nach oben auf der tastatur wird der letzte befehl wiederholt...).

 

[rongador]

Nee, es geht ja generell um die Funktionalität innerhalb Chromes, nicht von der Seite. Nagut, also es gibt keine integrierte Möglichkeit, das, was in der Infoblase steht, in die Zwischenablage zu kopieren. Außer man geht den Umweg wie über Dein JS. Danke dafür, aber dann ist es nicht das, was ich suche.

 

[netzgestaltung]

der chrome besteht ja quasi aus javascript. noch ein paar schritte und du kannst ein plugin draus bauen...

 

[rongador]

Mich wundert halt, dass man alles Mögliche per Rechtsklick "Kopieren" kann, aber nicht den Inhalt dieser Sprechblase.

 

[Iqra]

Moin,
da ist glaube ich ein kleines Missverständnis.

Das was man da sieht ist der "physische" Pfad zu einem DOM Knoten im Baum. Der ist natürlich auch als CSS Selector verwendbar.

ABER CSS selectors sind nicht rückwärts eindeutig. Man kann mit allen möglichen Selektoren einen, vielen, jeden zweiten, nach sonst welcher definierten Vorschrift passenden Knoten auswählen.

Wenn(!) es wirklich drum geht, exakt EINEN Knoten ansprechen zu können dann gibt man dem ne ID und verwendet keinen Pfad im Dokument.

#element {background-color: red}

Genauer spezifizierte Selektoren dann (und nur dann) wenn man wirklich konkretere Ansprüche hat. Ich habe geordnete und ungeordnete Listen, und will die einen Listenelemente rot und die anderen aber blau haben?

ul > li {color: red}
ol > li {color: blue}

sollen sie dagegen alle gleich geartet sein, dann nehm ich natürlich nur den Tag selber und nicht dessen Pfad.

Und so weiter.
Eine "rückgerichtete" Auswahl der Selektoren ist in keinem Fall zielführend.

 

[rongador]

Ich - will - lediglich - das - in die Zwischenablage kopieren - was - in - der Infoblase - steht.