Logo von c't

Suche
Abonnieren

Tägliche Top-News bei WhatsApp, Facebook Messenger, Telegram & Insta

preisvergleich_weiss

Recherche in 1.681.728 Produkten

Daniel Berger

Webseiten mit Browser-Tools analysieren und bearbeiten

Eine Webseite ist nie fertig – immer ist etwas zu verbessern. Und manchmal funktioniert sie nicht, wie sie soll. Bei der Fehlersuche helfen dann Entwicklerwerkzeuge: Mit ihnen analysieren und reparieren Sie Ihre Webseite direkt im Browser.

Links & Extras zum Artikel: Links (12) Bilder (3)

Wegen des vielen Plastiks kann man an modernen Autos kaum noch herumschrauben. Webseiten hingegen erlauben den vollen Zugriff – ihre Quelltexte liegen offen im Web. Und was Hebebühne, Schraubenschlüssel und Schraubendreher dem Automechaniker ermöglichen, leisten beim Webdesign die Entwicklertools. Mit ihnen schauen Sie unter die Haube einer Webseite und analysieren, optimieren und editieren deren Code. Inzwischen haben alle relevanten Browser solche Tools mit an Bord.

Die Werkzeuge nützen nicht nur Profis, die jedes bisschen Performance aus ihrer Seite kitzeln wollen – sie sind auch für Einsteiger nützlich. Denn die Tools helfen HTML, CSS oder JavaScript zu verstehen, indem sie das Studium der Quelltexte erleichtern. Man kann direkt ausprobieren, welche Codezeile welche Funktion hat und was passiert, wenn man an den Schräubchen dreht. Die Veränderungen an einzelnen Elementen sind sofort im Browser zu sehen und mit einem Reload sind alle Änderungen wieder weg; kaputt machen kann man also nichts. ...

Sie möchten wissen, wie es weitergeht?

Diesen Artikel jetzt für 2,49* € kaufen mit

Direkt nach dem Kauf steht Ihnen der Artikel als PDF zum Download zur Verfügung. Lesen Sie hier mehr (Verbraucherinformationen).

Die Bestellung findet auf einer externen Desktop-Browser-Seite statt.

* Alle Preise verstehen sich inklusive der gesetzlichen MwSt.

Links zu diesem Artikel

  1. Chromes DevTools
  2. Firefox-Werkzeuge
  3. Internet Explorer: F12-Entwicklertools

Remote Debugging

  1. Android SDK
    Enthält auch die USB-Treiber für das "Remote Debugging".
    Download, Screenshots, Bewertungen und weitere Informationen bei heise Downloads.
  2. ADB (Chrome-Erweiterung)
  3. Remote Debugging mit Android und Chrome
  4. Remote Debugging mit Android und Firefox

Zugaben

  1. "PageSpeed Insights" für Chrome und Firefox
    Browser-Erweiterung
  2. "PageSpeed Insights" (Onlineversion)
  3. modern.ie
  4. Explore and Master Chrome DevTools
    Videotutorial mit Übungsaufgaben
  5. BrowserStack
    Download, Screenshots, Bewertungen und weitere Informationen bei heise Downloads.

Bilder zu diesem Artikel

Chrome protokolliert in seinem Texteditor jeden Arbeitsschritt, mit einem Klick setzen Sie alles zurück.
Die 3D-Ansicht von Firefox hilft beim Aufspüren von Fehlern in der Verschachtelung. Und schick sieht sie auch aus.
In den Einstellungen der DevTools verbergen sich experimentelle Zusatzfunktionen wie das „Port Forwarding“.

Kommentieren

Anzeige
Anzeige