Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Webdesign » Sonar: Kostenloses Tool von Microsoft hilft dir Fehler auf deiner Website aufzuspüren

Sonar: Kostenloses Tool von Microsoft hilft dir Fehler auf deiner Website aufzuspüren

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 6. November 2017
Bookmarke mich
Share on pocket

Haurand Webdesign

HELD Werbeagentur

design andrea becker

Der Informations­designer

TYPO3 & Shopware Agentur München - 3m5.

Webagentur klickbeben

In der Vergangenheit legte Microsoft nicht viel Wert auf Webstandards. Aber spätestens mit dem neuen Browser Edge ist man auch bei Microsoft interessiert daran, sich an HTML- und CSS-Standards zu halten. Mit Sonar gibt es nun sogar ein Tool, welches Websites auf die Einhaltung solcher Standards überprüft. Darüber hinaus weist Sonar auf Optimierungsmöglichkeiten und auf Sicherheitsmängel hin.

Sonar: Website angeben und auf Ergebnisse warten

Um deine Website mit dem Tool zu prüfen, gibst du ganz einfach die URL deiner Website an und wartest auf die Ergebnisse. Es kann ein paar Minuten dauern, bis Sonar deine Website geprüft hat. Über einen Permalink rufst du die Ergebnisse anschließend einfach ab.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Übersicht der Ergebnisse

Sonar prüft deine Website in fünf verschiedenen Kategorien. Als erstes ist die Barrierefreiheit an der Reihe. Dabei richtet sich Sonar an die WCAG-Richtlinie des W3C, die vorgibt, wie eine Website ausgezeichnet sein muss, damit sie als barrierefrei gilt. Dazu gehört zum Beispiel, dass Nicht-Text-Inhalte wie Bilder mit alternativen Informationen für Sehbehinderte ausgezeichnet werden.

Die zweite Kategorie beschäftigt sich mit Interoperabilität und prüft zum Beispiel, ob eine Website mit validem HTML ausgezeichnet wurde und ob alle wichtigen Angaben im HTML-Kopf gemacht wurden. Dazu zählen unter anderem Angaben zum Zeichensatz und zum Viewport.

Speziell für den Internet Explorer prüft Sonar, ob Fehlerseiten eine Mindestgröße von 256 Bytes haben, da der alte Microsoft-Browser ansonsten eigene Fehlerseiten ausgibt.

Sonar macht Optimierungsvorschläge für schnellere Websites

In der Kategorie Performance bekommst Vorschläge gemacht, wie deine Website schneller und performanter werden kann. So findet Sonar unter anderem heraus, ob du in Sachen Bildkomprimierung bereits alles gegeben hat. Sonar verrät dir sogar, wie viele Kilobytes du bei entsprechend guter Komprimierung einsparen kannst.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Performance-Vorschläge

Wer Accelerated Mobile Pages (AMP) nutzt, um Inhalte einer Website speziell für Mobilgeräte auszugeben, wird per Sonar auch über Fehler bezüglich der AMP-Auszeichnung informiert.

Das Besondere an AMP ist, dass solch ausgezeichnete Inhalte schneller geladen werden können, da sie auf speziellen Servern zwischengespeichert sind. Dieses Zwischenspeichern funktioniert jedoch nur, wenn die Auszeichnung valide ist. Neben Google unterstützt im Übrigen auch Microsofts Suchmaschine Bing AMP.

Unterstützung von Progressive Web Applications (PWA)

Noch eine weitere recht neue Technologie wird unterstützt: nämlich Progressive Web Applications. Darunter versteht man Webanwendungen, die fast wie native Apps auf Smartphones und Tablets laufen.

Sonar prüft hierbei, ob das notwendige Manifest für PWAs vorhanden ist und ob entsprechende Icons zur Darstellung auf dem Startbildschirm existieren. Außerdem prüft Sonar, ob ein App-Name im Manifest angegeben ist. All diese Angaben sind notwendig, damit eine Website als Progressive Web Application auf einem Mobilgerät ausgeführt werden kann.

Sonar hilft Sicherheitsmängel festzustellen

Zu guter Letzt wird geprüft, ob eine Website Sicherheitsmängel aufweist, die zum Beispiel Angriffe auf eine Website begünstigen können. So prüft Sonar zum Beispiel, ob bestimmte verzichtbare und potenziell unsichere Header verschickt werden.

Sonar: Kostenloses Tool von Microsoft hilft dir bei der Entdeckung von Fehlern auf deiner Website
Sicherheitsvorschläge

So kann es beispielsweise vorkommen, dass Servertechnologien wie PHP und ASP.NET Informationen über die verwendete Technologie und Version über einen Header ausgeben. Für einen Hacker sind solche Informationen interessant, da es einfacher ist, vorhandene Sicherheitslücken in der Technologie auszunutzen.

Ebenfalls geprüft wird, ob bei Verweisen protokoll-relative Links verwendet werden. So sollten Links grundsätzlich immer mit „http://“ oder „https://“ beginnen. Seitdem verschlüsselte Websites immer mehr Beachtung finden, beginnen – zum Beispiel beim Einbinden von JavaScript von Fremdanbietern wie Google – Links einfach mit „//“, was dazu führt, dass immer das Protokoll der einbindenden Website verwendet wird.

Auch in Sachen Cookies informiert Sonar dich, ob diese so gesetzt sind, dass keine Gefahr ausgeht. Im Idealfall werden Cookies nur von sicheren Verbindungen akzeptiert und können nur per HTTP (also nicht per JavaScript) ausgelesen werden.

sonar liefert zusätzliche Informationen zu Fehlern und Warnungen

Neben der Übersicht, die über die Anzahl der Fehler und Warnungen jeder Kategorie informiert, erhältst du eine Liste mit allen gefundenen Fehlern beziehungsweise Warnungen. Dort ist kurz und knapp erklärt, was du verbessern beziehungsweise in Ordnung bringen solltest.

Außerdem gibt es zu jedem Punkt einen Link zur Sonar-Dokumentation, in der du eine ausführliche Beschreibung erhältst, was geprüft wurde, wie es geprüft wurde und warum es wichtig und sinnvoll ist, den entsprechenden Fehler oder die Warnung aus der Welt zu schaffen.

Sonar selbst installieren

Microsoft hat Sonar unter Open-Source-Lizenz gestellt und bietet den Quelltext zum Herunterladen an. So kannst du dir das Tool selbst auf einem Server installieren. Voraussetzung ist, dass dort Node.js läuft.

Nach der Einrichtung von Sonar kannst du deine Webprojekte bequem über die Kommandozeile starten. So lässt sich das Tool nach deinen Wünschen konfigurieren.

So legst du Beispielsweise fest, welche Regeln geprüft werden sollen und welche für dich verzichtbar sind.

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Agenturpartner

WordPress Werkstatt

Freiburg im Breisgau

Carmen Hurst | Webdesign

Bad Homburg

4eck Media GmbH & Co. KG

Waren (Müritz)

dskom GmbH (SEO Profi Berlin)

Berlin

AdsMasters GmbH

Düsseldorf

Alle Agenturpartner

Jobs

Inside Sales Manager

Karlsruhe

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Grafik-Designerin

Freiburg im Breisgau

Webdesigner – Vollzeit

Remote

Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Webdesign Trends 2022: Das erwartet uns

Animation, Interaktion und Immersion: Das neue Jahr bringt zahlreiche Trends im Webdesign mit sich und entwickelt einzelne Bereiche weiter. Bereits jetzt ist klar – in Sachen Webdesign-Trends hat das Jahr 2022 einiges zu bieten.

 →   

Google Fonts sind nicht mehr datenschutzkonform. Was nun?

Mit dem Urteil des Landgerichts München vom 20.01.2022 ist nun auch die Verwendung von Google Fonts über die Fonts API nicht mehr datenschutzkonform. Zeit sich nach einer Lösung umzusehen, wie Du dennoch Google Fonts weiterhin einsetzen kannst.

 →   

Dunkel Design – herzlich willkommen auf Dr. Web

Wir freuen uns, dass Moritz Dunkel mit seiner Agentur DNKL.DSGN aus Köln an Bord ist. Moritz Dunkel von Dunkel Design verstärkt unser Agentur-Netzwerk. Inhaltsstarke Seiten

 →   

2 Antworten zu „Sonar: Kostenloses Tool von Microsoft hilft dir Fehler auf deiner Website aufzuspüren“
— was ist Deine Meinung?

  1. Mario sagt:
    27. November 2017 um 15:06 Uhr

    Also das Tool ist aber schon ziemlich komisch. Wer nach Fehlern scannt, sollte schon rudimentär mit HTML umgehen können. Das Teil ignoriert nämlich einen BASE-Tag im HEAD und mosert dann nicht vorhandenen Bilder an, weil es an der falschen Stelle sucht, da es eben BASE-HREF nicht beachtet.

    Außerdem werden bspw. überflüssige HTTP-Header gleich mal als Fehler ausgegeben, obwohl das bestenfalls eine Warnung ist.

    Auch die Security-Fehler sind mehr als grenzwertig.

    So ist das Tool jedenfalls nicht zu gebrauchen.

    Antworten
  2. Franz Meyer sagt:
    9. November 2017 um 14:38 Uhr

    Ein interessantes Analyse-Werkzeug. Danke für den Tipp!
    Wie aber das mit der HEADER SECURITY funktionieren soll weiß ich nicht.

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.