Share
Testen Sie die großartigen neuen Funktionen von Chrome 4 für Entwickler, wie plattformübergreifende Unterstützung, hervorragende Web-Inspector-Integration und praktische neue Erweiterungen. Es wird immer schwieriger, Chrome den Titel als neuen Browser für Webentwickler zu verweigern. Wenn es noch nicht ganz da ist, wird es bald sein!
Mit kurzen Ladezeiten, einer knackigen JavaScript-Engine, einer soliden WebKit-Basis und einem großen Rückhalt hat Google Chrome einen beachtlichen Marktanteil erlangt und sogar Safari überholt, der im Dezember der drittbeliebteste Browser wurde. Für Entwickler war Firefox jedoch der Liebling vieler, da es auf jedem Betriebssystem ausgeführt werden kann und aufgrund seines umfangreichen Angebots an Webentwicklungs-Add-Ons wie Firebug und der Web Developer Toolbar. Es ist jedoch wichtig, JavaScript in allen Browsern zu testen. In jedem Browser (einschließlich Internet Explorer) ist ein zuverlässiger Satz von Tools enthalten. Genau das ist es, was Entwickler benötigen, um ihren Code optimal zu nutzen.
Zum Glück haben die Google-Leute hart gearbeitet, um Chrome plattformübergreifend zu machen, den fantastischen Web Inspector WebKit zu integrieren und Erweiterungen hinzuzufügen, wodurch Chrome 4 ein erstaunlich nützliches Werkzeug für die Webentwicklung ist. In diesem Lernprogramm werde ich einige der Funktionen demonstrieren, die Chrome 4 zu einer großartigen Ergänzung des Webentwickler-Hilfsprogramms machen.
Seit dem 25. Januar wurde Chrome 4 offiziell als stabil für Windows veröffentlicht. Mac- und Linux-Benutzer müssen jedoch etwas mutiger sein, um die Möglichkeiten von Chrome 4 kennenzulernen. Mac-Benutzer müssen die "dev" -Version herunterladen und Linux-Benutzer die "Beta" -Version. Das lohnt sich! Unter den folgenden Links erhalten Sie eine Kopie von Chrome für Ihr Betriebssystem, die alles unterstützt, was in diesem Artikel beschrieben wird:
Nun lasst uns in die Kleinigkeiten einsteigen! In Firefox ist Firebug ein Glücksfall für Entwickler, der eine Debugging-Konsole, HTML- und CSS-Manipulation, JavaScript-Profiling und viele andere Vorteile bietet. Die Leute von WebKit wurden aufmerksam und haben in den letzten Jahren eine Reihe von Tools namens Web Inspector perfektioniert, die Firebug mit ähnlichen Funktionen ausstattet. In Chrome 4 trägt der Web Inspector die Bezeichnung "Developer Tools".
Neben Chrome 4 ist der Web-Inspector bereits seit einer früheren Version von Chrome und Safari in Betrieb, obwohl er etwas versteckt ist. So greifen Sie in verschiedenen Browsern auf den Web Inspector zu:
Wenn Sie noch nicht mit der Firebug- oder Web Inspector-Konsole gearbeitet haben, verpassen Sie eine gute Möglichkeit, JavaScript zu debuggen. Die JavaScript-Konsole bietet mehrere wichtige Funktionen, z. B. das Erfassen von Fehlern und die Darstellung in einem nützlichen Format, das Testen kurzer Bits von JavaScript und die bequeme Protokollierung nützlicher Informationen wie Variablenwerte und Ausführungszeiten. In der Praxis verwende ich dieses Tool regelmäßig, um die Leistung meiner Programme zu bewerten und um sicherzustellen, dass bestimmte Variablen korrekt berechnet werden.
Neben der JavaScript-Konsole ist es immer schön, ein Tool zu haben, mit dem Sie schnell die HTML- und Style-Informationen bestimmter Elemente auf der Seite anzeigen können. Das Bedienfeld „Web-Inspector-Elemente“ bietet eine Baumstrukturansicht des Document Object Model (DOM), mit der Sie einen Drilldown in das Dokument durchführen können, um ein interessantes Element auszuwählen. Sie können auch auf die Informationen eines bestimmten Objekts zugreifen, indem Sie mit der rechten Maustaste auf ein Element im Browser klicken und „Element prüfen“ auswählen.
Abschließend möchte ich darauf hinweisen, dass das Bedienfeld Elemente mehr als nur eine einfache Prüfung zulässt. Sie können Stile ändern und hinzufügen, HTML bearbeiten und in den neuesten Versionen Ereignis-Listener anzeigen, die einem ausgewählten DOM-Element zugeordnet sind. Diese Funktionen können alle sehr nützlich sein, wenn Sie mit kleinen Macken zu tun haben, die Sie nicht genau verstehen können.
Die letzte Funktion, die ich in den Web Inspector / Developer Tools hervorheben möchte, ist die Registerkarte "Ressourcen". Wenn Sie mit Firebugs Registerkarte "Net" gearbeitet haben, werden Sie einige Ähnlichkeiten feststellen. Im Wesentlichen enthält die Registerkarte Ressourcen eine Auflistung aller Informationen, die zwischen Ihrem Browser und dem Server ausgetauscht werden, von den Bildern über das JavaScript bis hin zum Dokument. Es zeigt auch eine Menge praktischer Informationen, wie zum Beispiel:
Die Registerkarte Ressourcen ist ein elegantes Tool, mit dem Sie die Geschwindigkeit der Seite einfach überprüfen können. Sie kann dabei helfen, Leistungsengpässe zu erkennen und zu beseitigen. Probieren Sie es aus, um herauszufinden, wo Ihre Seite zu dick ist, und reduzieren Sie Ihre umfangreichen Bilder und Code, um Ihren Benutzern ein besseres Erlebnis zu bieten!
Eine vollständige Übersicht über die Web Inspector / Developer Tools kann leicht ein Tutorial für sich sein, aber wir haben noch mehr Grund zur Abhandlung! Es wird dringend empfohlen, die folgenden Ressourcen zu lesen, um mehr zu erfahren:
Obwohl ich im Vergleich zu Firefox immer von der Geschwindigkeit von Safari 4 und Chrome begeistert war, fehlte beiden eine wichtige Funktion: Add-Ons. In Chrome 4 wird dies durch Hinzufügen von "Erweiterungen" geändert. Sie können Chrome Funktionen hinzufügen, indem Sie Erweiterungen herunterladen und installieren oder die Standardwerkzeuge des Handels verwenden: HTML, CSS und JavaScript, um Ihre eigenen zu schreiben. Erweiterungen können vom Chrome Extensions Repository heruntergeladen werden und sollten relativ einfach zu installieren sein. Es wurden bereits einige sehr überzeugende Erweiterungen geschaffen, die die Webentwicklung von der schnellen Validierung bis zum Auflösungsversuch unterstützen. Schauen wir uns ein paar an.
Ein Webentwickler kann nie wirklich genug mit der Leistung besessen sein, und je mehr Tools zur Ermittlung der schleppenden Leistung desto besser. Genau hier setzt Speed Tracer an, eine von Google entwickelte Chrome-Erweiterung. Mit Speed Tracer wird der Bereich "Ressourcen" auf die nächste Ebene gebracht, indem die für die Ausführung von Low-Level-Aufgaben benötigte Zeit visualisiert wird, beispielsweise das Rendern von CSS oder das Analysieren von HTML und JavaScript. Ich würde dringend empfehlen, sich eine Videodemonstration von Speed Tracer anzusehen, die von den Leuten bei Google zusammengestellt wurde, um eine bessere Vorstellung davon zu bekommen, wie Sie die Leistung Ihrer Anwendungen verbessern können.
Beim Wechsel von Firefox zu Chrome ist eine Erweiterung, nach der jeder sucht, ein Ersatz für die fantastische Web Developer Toolbar. Für diejenigen, die es nicht wissen, befasst sich die Web Developer Toolbar mit den Aufgaben, die Firebug nicht bewältigen sollte, wie z. B. die schnelle Überprüfung von HTML und CSS, die Möglichkeit, JavaScript oder Bilder schnell zu deaktivieren, und ein Tool zum Überprüfen von Links. Diese Funktionen werden alle von Pendule mit Stil behandelt, der einen Großteil der Kernfunktionen der Web Developer Toolbar (nicht ganz alle) bietet, während er selbst ein paar Extras wie einen Farbwähler bietet.
Webentwickler müssen häufig sicherstellen, dass ihre Entwürfe mit einer Vielzahl von Auflösungen funktionieren. Mit dem Auflösungs-Test können Entwickler ihr Browserfenster effizient auf eine Reihe allgemeiner Auflösungen einstellen, um schnell und einfach testen zu können. Mit der neuesten Version können Sie sogar mehrere Fenster mit verschiedenen Auflösungen mit nur wenigen Klicks öffnen. Mit dem Auflösungs-Test können Sie sicherstellen, dass Ihre Zielgruppe die gewünschte Seite sieht.
Es gibt Situationen, in denen es nicht nur notwendig ist, einen Screenshot des aktuell sichtbaren Teils einer Website zu erstellen, sondern auch einen Screenshot der gesamten Seite. Möglicherweise möchten Sie beispielsweise eine vollständige Seite für die peer-kritische Überprüfung ausdrucken oder in Ihrem Portfolio demonstrieren. Ich habe früher ein Desktop-Tool dafür verwendet, aber jetzt macht Webpage ScreenShot gute Arbeit, mit ein paar Klicks ganzseitige Screenshots aufzunehmen.
Stolpern Sie jemals über eine fantastische Seite und fragen Sie sich: „Was verwenden sie, um dies zu erstellen?“ Ich tue es und finde mich oft im Quellcode, um herauszufinden, wer der Mann hinter dem Vorhang ist. Es ist zwar eine nützliche Trainingsübung, und wenn nötig, eine notwendige Übung Ja wirklich Wenn Sie wissen möchten, was los ist, kann Chrome Sniffer Ihnen normalerweise einen Überblick darüber geben, welche JavaScript- und PHP-Frameworks für eine bestimmte Seite verwendet werden. Navigieren Sie beispielsweise zu NetTuts. Chrome Sniffer informiert uns darüber, dass es unter Wordpress mit Google Analytics und jQuery ausgeführt wird.
Die Zukunft der Webentwicklung sieht immer heller und heller aus! Während wir vor einigen Jahren nur eine begrenzte Anzahl von Werkzeugen zur Verfügung hatten, um JavaScript zu debuggen, CSS zu basteln und HTML anzuzeigen, stehen uns heute eine Reihe leistungsstarker Optionen zur Verfügung. Google Chrome ist jetzt plattformübergreifend, hat den WebKit Web Inspector vollständig integriert und Erweiterungen hinzugefügt. Damit ist es ein vielseitiges Tool, mit dem Entwickler ihre eigenen Seiten verbessern können. Ich möchte Sie alle dazu ermutigen, sich eine Kopie herunterzuladen und zu prüfen, ob Sie Ihre Seiten verbessern können. Dann kommen Sie hierher und teilen Sie Ihre bevorzugten Plugins und Tools mit dem Rest von uns!
Wussten Sie, dass Sie bis zu 600 US-Dollar verdienen können, wenn Sie ein PLUS-Tutorial und / oder einen Screencast für uns schreiben? Wir suchen ausführliche und gut geschriebene Tutorials zu HTML, CSS, PHP und JavaScript. Wenn Sie die Möglichkeit haben, wenden Sie sich bitte an Jeffrey unter [email protected].
Bitte beachten Sie, dass die tatsächliche Kompensation von der Qualität des abschließenden Tutorials und des Screencasts abhängt.
Accentsconagua