[Guide]Safari zum Webdebuggen verwenden

    Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

    • [Guide]Safari zum Webdebuggen verwenden

      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-Quellcode

      1. <html>
      2. <head>
      3. <meta name="description" content="Test seite">
      4. <title> test
      5. <style>
      6. body {
      7. background-color: #dedede;
      8. }
      9. .Container1 {
      10. background-color: #CCC;
      11. height: 20;
      12. width: 400;
      13. margin: auto;
      14. }
      15. .Container2 {
      16. background-color: #FFF;
      17. height: 25;
      18. width: 400;
      19. margin: auto;
      20. }
      21. </style>
      22. </head>
      23. <body>
      24. <script>alet("Text");</script>
      25. <div class="Container1">
      26. <font size=1> Ein text
      27. </div>
      28. <div Class=Container2>
      29. <font size=2> Text 2 </div></body>
      30. </div>
      31. </html>
      Alles anzeigen

      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
    • Werbung zur Unterstützung des Forums ( Bitte AddBlocker deaktivieren )