Mit dem Browser Safari von Apple ist es möglich ganz leicht fehler im Html und Javascript zu finden und diese zu beheben, sowie informationen über elemente, tags und einstellungen zu bekommen.
Hier werde ich euch die Wichtigsten funktionen zum Web-debuggen zeigen.
1. Safari Developer aktivieren:
Nachdem ihr euch Safari von Apple - Safari - Intelligenter und besser im Web surfen runtergeladen habt sind die Developer funktionen vorerst deaktiviert, um diese zu aktivieren müsst ihr Strg+, drücken um in die einstellungen zu kommen. Auf dem letzten Tab(Erweitert) sucht ihr unten nach einer Checkbox mit dem Text Menü Entwickler in der Menüleiste anzeigen, und aktiviert diese.
Nun könnt ihr das Fenster wieder schließen.
2. Fehler finden und entfernen
Hierfür habe ich ein script verwendet was typische fehler aufweist:
<html>
<head>
<meta name="description" content="Test seite">
<title> test
<style>
body {
background-color: #dedede;
}
.Container1 {
background-color: #CCC;
height: 20;
width: 400;
margin: auto;
}
.Container2 {
background-color: #FFF;
height: 25;
width: 400;
margin: auto;
}
</style>
</head>
<body>
<script>alet("Text");</script>
<div class="Container1">
<font size=1> Ein text
</div>
<div Class=Container2>
<font size=2> Text 2 </div></body>
</div>
</html>
Die fehler sind:
der titel tag wurde nicht geschlossen
im Javascript wurde alet schtatt alert geschrieben
ein </div> am ende zu viel
und 2 mal den font tag nicht geschlossen.
Nun safari zeigt es ohne probleme an, doch ie zeigt nichts an.
Nun geht es ans fehler finden, dafür gehen wir in safari mit rechtsklick an irgendeine stelle und klicken element informationen.
Der Developer bereich öffnet sich.
Nun, um die fehler im script zu finden geht ihr auf den bereich resseurcen
Legende: Grau umkreist = auswahl welche dateien angezeigt werden sollen (für debugging empfiehlt sich dokumente)
weiss=die dateien die für diese seite geladen werden
Blau=die suche nach dateien
Rot=Alle von safari gefundenen fehler in allen scripts(und warnungen)
schwarz=die gefundenen fehler und warnungen in dem einzelnen script
Nun klickt ihr auf das entsprechende script und der Code View öffnet sich.
Hier befinden sich im code rote und gelbe boxen, in denen gefundene fehler meldungen stehen bzw warnungen
Safari hat alle fehler aus dem obrigen script gefunden
WICHTIG Safari findet nicht immer alle fehler aber wenn man keine findet sollte die seite eigentlich recht gut funktionieren sogar im ie
3. informationen über elemente
Man hat eine seite und will gerne wissen welches element mit welchem html code verbunden ist, auch dies ist in Safari developer ganz leich möglich.
Man klickt auf das entsprechende element zu dem man die informationen haben will mit der rechten maustaste. und klickt auf element informationen.
nun verkleinert man den aufpopenden bereich erstmal so dass man die seite auch noch gut sehen kann.
nun haben wir hier eine liste mit dem html code:
hier ist nun nur der html code von dem main file bzw der darin enthaltenen frames inform eines code baumes dargestellt
legende:
rot=fehler und warnungen im script
blau=script durchsuchen
grün= die übergeodneten elemente in denen sich das element befindet (<body> steckt in <html>)(fährt man mit der maus über die einzelenen einträge so wird er im browserfenster blau markiert
gelb=die konsole in der man commands eingeben und die fehler sehen kann
braun= developer fenster als seperates fenster oder in der seite intigriert
schwarz=Eigenschaftsfenster
grau=html code baum(beim drüberfahren wird das element über dem die maus ist im Browser herforgehoben)per doppelklick sind die tags veränderbar.
Das eigenschaftsfenster:
eingeteilt in Style, Maße und eigenschaften,
Style: Die css tags, können an und abgeschaltet werden, unterteilt ind eigene css tags, und die von den übergeordneten objekten die auf dieses übertragen werden
Maße: Wo das element sitzt, und woran es sich orientiert
Eigenschaften: Die eigenschaften (bei <font> z.b. size) die das objekt haben kann und die werte (per doppelklick editirbar) nicht vergebene werte werden mit null gekenzeichnet unterteilt in eigene eigenschaft und geerbte eigenschaften.
4. Mobile seite bzw andere Clienten testen
Safari hat die Funktion dem Server einen benutzerdefinierten User Agent zu senden, damit "gaukelt" es dem Server vor Safari mobile, Firefox, ie, Opera (win/mac) zu sein auch User definierte Header können eingegeben werden. Die funktion findet sich oben im menü unter Entwickler: User Agent da kann man auswählen (unter win muss man alt drücken damit das menü erscheint, die seite wird neu geladen)
Es gibt noch einige weitere Funktionen die zu erklären aber ewig dauern würde
Das developer Fenster(mit Code Tree etc) gibt es in gleicher Form auch unter Google Chrome