zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Wie am besten eine Seite mit Firebug CSS debuggen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.03.2015, 11:08
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard Wie am besten eine Seite mit Firebug CSS debuggen

Ich habe eine Seite, in die ziemlich viele .css-Dateien importiert werden und ich möchte ein Element daraus isolieren, um es a) zu verstehen und b) zu debuggen bzw. zu ändern.

Ich dachte, daß ich mir vielleicht mittels Firebug sämtliches CSS in eine Datei hole und das Ganze dann lokal als HTML-File inklusive sämtlichen CSS mir anschaue.

Oder wäre da vielleicht Google Webdeveloper besser geeignet? Ich bin von Webdeveloper etwas abgekommen und habe mit Firebug angefangen. Allerdings finde ich, daß Firebug den Browser (FireFox) ganz schön bremst.

Gibt es andere Tools, die man empfehlen kann? Oder besser Google Chrome benutzen? Letzterer scheint ja etwas schneller zu sein.

Viele Grüße und danke für Hilfe im voraus,

Christoph
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.03.2015, 11:30
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Bei mir bremst Firebug gar nichts, aber Firebug und Chrome/Opera Webdeveloper-Tools sind gleich gut. Warum willst du alles in eine CSS Datei laden undlokal ansehen? Wenn du das Element untersuchst, (live, auf der Website) dann siehst du doch schon alle dazugehörigen Werte/Styles und kannst sogar nachvervolgen wie diese Werte zustande kommen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.03.2015, 11:56
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Bei mir bremst Firebug gar nichts, aber Firebug und Chrome/Opera Webdeveloper-Tools sind gleich gut. Warum willst du alles in eine CSS Datei laden undlokal ansehen? Wenn du das Element untersuchst, (live, auf der Website) dann siehst du doch schon alle dazugehörigen Werte/Styles und kannst sogar nachvervolgen wie diese Werte zustande kommen.
Wenn alles in zig Dateien verstreut ist und man etwas sucht, man findet nichts. Geht mir jedenfalls so, wenn man über mehrere .css-Dateien suchen muß.

Kann ja sein, daß ich nicht genügend versiert bin mit den Tools, wie z.B. Firebug. Vielleicht gibt es hier ja eine Sparte für die Bedienung von Firebug oder anderen Tools. Ich finde die sehr unintuitv.

Ich habe mir im Moment so geholfen, daß ich den gesamten Source-Code der Seite in notepad++ geholt habe und darin dann alle .css-Dateien include, die als link drin stehen.

Grüße
Christoph
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
  #4 (permalink)  
Alt 13.03.2015, 12:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Du untersuchst ein Element, dann siehst du im rechten Teil von Firebug alle CSS Regeln, welche auf dieses Element wirken. Oben stehen die Regeln die am stärksten sind und unten die, die am schwächsten sind. Durchgestrichene Werte (von schwachen Regeln) werden von stärkeren Regeln überschrieben. Im rechten Teil kannst du den Tab von Styles auch auf Berechnet umschalten, dann siehst du für jeden einzelnen Wert (font-size, padding, ... ) den aktuell berechneten Wert und auch, von welcher CSS Regel dieser kommt.
Mit Zitat antworten
  #5 (permalink)  
Alt 13.03.2015, 12:09
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Nur als Hinweis, mittlerweile ist für sowas kein Firebug mehr notwendig. Das läßt sich komplett mit den Bordmitteln testen. (Kontextmenü: "Element untersuchen"). dort wird auch angezeigt, welches CSS zum Einsatz kommt und in welcher Datei dieses steht und man kann es auch editeren oder (de)aktivieren.
Mit Zitat antworten
  #6 (permalink)  
Alt 13.03.2015, 12:13
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Das stimmt, danke für den Hinweis. Noch kann ich nicht ganz auf Firebug verzichten, in der nächsten Firebug-Version (3.0) wird FB ja kein eigenständiges Plugin mehr sein sondern auf die vorhandenen Tools aufsetzen.
Mit Zitat antworten
  #7 (permalink)  
Alt 13.03.2015, 12:18
Benutzerbild von Krischu
"Validier erst mal"-Sager
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 09.08.2006
Beiträge: 323
Krischu befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Du untersuchst ein Element, dann siehst du im rechten Teil von Firebug alle CSS Regeln, welche auf dieses Element wirken. Oben stehen die Regeln die am stärksten sind und unten die, die am schwächsten sind. Durchgestrichene Werte (von schwachen Regeln) werden von stärkeren Regeln überschrieben. Im rechten Teil kannst du den Tab von Styles auch auf Berechnet umschalten, dann siehst du für jeden einzelnen Wert (font-size, padding, ... ) den aktuell berechneten Wert und auch, von welcher CSS Regel dieser kommt.
Danke, cloned und protonenbeschleuniger, das ist ermutigend. Ich werde vielleicht doch bei den Tools bleiben. Das Editieren ist mühsam, vor allem, wenn man die ganzen import-Statements noch berücksichtigen will.

Grüße
Christoph
__________________
--
Viele Grüße
Christoph
Mit Zitat antworten
  #8 (permalink)  
Alt 13.03.2015, 12:19
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ich hab ihn eigentlich nie genutzt, aber mir scheint auch, dass vieles (oder alles?) daraus übernommen wurde. Zumindest klingt es so, was hier beschrieben wurde.

Zitat:
Zitat von Krischu Beitrag anzeigen
Wenn alles in zig Dateien verstreut ist und man etwas sucht, man findet nichts. Geht mir jedenfalls so, wenn man über mehrere .css-Dateien suchen muß.

Kann ja sein, daß ich nicht genügend versiert bin mit den Tools, wie z.B. Firebug. Vielleicht gibt es hier ja eine Sparte für die Bedienung von Firebug oder anderen Tools. Ich finde die sehr unintuitv.
das wundert micht. Wie gesagt ich nutz kein Firebug, aber in den Web Entwickler Tools steht in den Auflistungen der CSS Eigenschaften immer dabei in welcher Datei diese stehen und läßt sich sogar anklicken. Wieso musst du suchen? (oder ist das im Firebug nicht so?)

Naoch ein Nachtrag: Ich seh gerade, dass dort sogar die Zeilenenummer und der genau Ort steht.

Geändert von protonenbeschleuniger (13.03.2015 um 12:21 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 13.03.2015, 12:20
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Krischu Beitrag anzeigen
Das Editieren ist mühsam, vor allem, wenn man die ganzen import-Statements noch berücksichtigen will.
auch das wird dort berücksichtigt. Mir ist wirklich nicht klar, wo du Schwierigkeiten hast?
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 13.03.2015, 12:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Zur Info @protonenbeschleuniger: Das editieren von styles, etc. funktioniert in Firebug exakt gleich wie in den nativen tools (und auch bei google chrome etc. ) Firebug hat "nur" ein paar Zusatzdinge, welche es für mich persönlich bequemer zum Arbeiten macht als rein die nativen Tools. Kann man mit einem Tool Elemente sinnvoll untersuchen so kann man es auch im anderen, da ist, wie gesagt, nicht wirklich ein Unterschied.

Ansonsten kann ich mich dir nur anschließen: Mir ist auch nicht ersichtlich, wo die Probleme genau liegen. Je weiter oben, desto wichtiger ist ein Statement. Alles, was durchgestrichen dargestellt wird, wird irgendwo überschrieben. Der einzige Punkt, der mir einfällt, wo das vielleicht verwirrend sein kann: Hast du einmal background: url transparent no-repeat left top; definiert und überschreibst dann nur das bild mit background-image dann wird die komplette background-Regel durchgestrichen.

Ansonsten: Lad ein Bild hoch und erklär mal was du da genau nicht verstehst?
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
css Style Änderung abhängig zur aktuellen Seite HansiLick CSS 18 04.01.2013 17:54
Erste Seite mit CSS: Was kann man verbessern? vht Site- und Layoutcheck 4 08.11.2009 15:32
Für jede Seite eine CSS datei? Spähling CSS 11 02.04.2009 18:30
Seite "halbiert" nach Klick auf Link - CSS Bug? Nina CSS 1 14.01.2004 15:20
Wie am besten alte HTML Seite mit Tabellen in CSS Layout ? Fidi CSS 0 07.01.2004 12:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:27 Uhr.