Video-Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren


Im folgenden kleinen Video-Tutorial möchte ich dir kurz zeigen, wie du mit Hilfe des Google Chrome Developer Tools oder der Firefox- und Safari-Erweiterung Firebug HTML und CSS-Elemente einer Webseite direkt im Browser kontrollieren kannst. So kannst du z.B. schnell die CSS-Klasse und die verwendeten CSS-Eigenschaften eines HTML-Elements heraus finden und diese dann gegebenenfalls anpassen oder, wenn du an einem WordPress Child-Theme arbeitest, in deinem eigenen Stylesheet neu definieren.

Hilfreiche Browser-Erweiterungen zur Webentwicklung:

Kennst du noch weitere Tipps oder nützliche Browser-Tools, die bei der Webentwicklung weiterhelfen? Über dein Feedback und weitere Tipps freue ich mich sehr!

8 Kommentare zu “Video-Tipp: HTML- und CSS-Elemente schnell im Browser kontrollieren

  1. Super, Ellen! Wieder sehr hilfreich! Verfolge euren Blog inzwischen regelmäßig und freue mich immer wieder über eure Tipps und Themes. Weiter so!

  2. Hallo Ellen,

    danke für dieses kleine Tutorial. Ich habe das jetzt mal mit Firefox ausprobiert und bin begeistert. Damit lassen sich wirklich auf die Schnelle ein paar Dinge kontrollieren.

    Herzliche Grüße
    Klaus

  3. Ich klicke täglich mind. 100 mal auf den Marienkäfer :)

    Noch ein cooles Werkzeug für JQuery Fans heißt: Firequery

  4. Hi Ellen,

    ich such nach einer Möglichkeit Videos anstelle eines Thumbnails auszugeben. Also wenn kein Artikelbild gesetzt ist dann soll er den Embed oder ShortCode nehmen. Bei Diesen Post hast du es ja offensichtlich auch so. Ich war schon auf der Suche, habe aber nicht brauchbares gefunden.

    Grüße :)

  5. Hallo,
    bin vor kurzem erst zum ersten mal auf eure Seite gehoppt.
    Erst einmal vielen Dank für eure tollen Tuts. Auch dieses ist echt gelungen.

    Ich möchte hier der Vollständigkeit halber die f12-Funktion im IE (ab Version 8) erwähnen.
    Das standardmäßig integrierte Developer-Tool hat hier sicher auch einen Platz verdient. Um mal nur ein paar Funktionen zu nennen…

    1. Debuggen von HTML und CSS
    – Änderungen möglich, die dann temporär direkt im Browser dargestellt werden
    – Änderungen können in einer Datei gespeichert werden
    – Elementauswahl bei Mausklick wie in anderen Debuggern
    2. Debuggen von JScript
    – Profilerstellung für JScript Debugging
    – Aufzeichnen von Zeitdaten zur Laufzeit-Optimierung
    – Vergleich der Zeitdaten von verschiedenen Profilen
    3. Inhaltssuche beim Debuggen
    – STRG-F-Funktion für Debug-Inhalte, je nach ausgewählter Registerkarte ob nun HTML, CSS oder JS
    4. schnelles Abgrenzen von Elementen
    – einfach mal auf „Kontur“ klicken statt das Element im CSS zu suchen und mit border:1 editieren zu müssen
    5. Cache und Cookie-Steuerung
    6. Testen in verschiedenen Browser- und Dokument-Modi
    – einfach mal anzeigen lassen wie es im IE7 etc. aussieht leicht gemacht…
    7., 8., 9.,…und und und. ;)

    Ich möchte hier keinen zur Nutzung überreden, finde das Tool aber wirklich sehr ansprechend und deshalb in meinen Augen nennenswert.

    Lieben Gruß vom Bloghopper!

  6. Hallo Ellen,
    danke für die super Video-Anleitung. Ich bin WordPress/CSS-Newbie und gerade eben dabei mich in das spannende Thema einzuarbeiten. Für eine Demo-Site habe ich das freie Theme „i-max“
    http://templatesnext.org/imax/
    installiert, nun befindet sich in der ersten Zeile „Mail us“ und „Call us“. Ich habe das theme-verzeichnis nach diesen strings schon Höhe x Breite x Tiefe durchsucht (auch auf dem mysql-Server in der DB) … ohne Erfolg :(
    Wie finde ich dies Datei/Tabelle mit diesen Strings und wie, wenn überhaupt möglich, kann ich diese auf deutsch (Anruf / eMail) ändern? Danke für eure Hilfe!
    Gerd

    CSS snippet:


    Call us : 0171 – 12345678

  7. vielen Dank! die Funktion war völlig neu für mich und hat mich begeistern. Jedoch werden bei mir die Änderungen nicht dauerhaft übernommen. Wo kann / muss ich die Änderungen speichern? Ich habe mit google Chrome gearbeitet. Danke für den Hinweis :-)
    LG SINA

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *