Share
In diesem Tutorial werde ich mir Chrome-Entwicklertools anschauen, insbesondere, wie sie Ihren HTML / CSS-Workflow beschleunigen können. Ich werde auch ein paar andere Entwickler-Tools betrachten, die verfügbar sind.
Chrome ist aufgrund seiner Schnelligkeit, Benutzerfreundlichkeit und Unterstützung für die Übernahme früher experimenteller Funktionen wie moderner CSS3-Eigenschaften schnell zu einer beliebten Wahl unter Webdesignern und -benutzern geworden. Anlässlich der I / O-Konferenz von Google im Jahr 2012 wurde bekannt gegeben, dass Chrome mittlerweile über 310 Millionen aktive Nutzer hat - fast doppelt so viele wie 160 Millionen Nutzer im Vorjahr.
Google Chrome wurde erstmals am 2. September 2008 veröffentlicht. Es wurde als BETA für Microsoft Windows XP und spätere Versionen eingeführt. 2009 hatte Google Betaversionen für OS X und Linux veröffentlicht. Google Chrome 5.0 wurde am 25. Mai 2010 angekündigt. Dies war das erste stabile Release, das alle drei Plattformen unterstützte.
Einer der Gründe für seine Beliebtheit bei Webdesignern und -entwicklern sind die Entwicklertools, die mit dem Browser gebündelt werden. Mit diesen Entwickler-Tools können wir Code einfach und effizient testen und debuggen. Ohne diese Tools ist Ihr Workflow möglicherweise schwieriger.
Google beschreibt die Entwicklertools von Chrome als
Mit den Developer Tools, die in Chrome enthalten sind, erhalten Webentwickler und Programmierer einen umfassenden Zugang zu den internen Komponenten des Browsers und ihrer Webanwendung. Die Entwicklertools basieren weitgehend auf dem WebKit Web Inspector, einem Teil des Open Source WebKit-Projekts.
Die Chrome Developer Tools sind eine Webanwendung, die in HTML, JavaScript und CSS geschrieben ist. Die App wird zur Javascript-Laufzeit ausgelöst. Einmal ausgelöst, können wir mit Webseiten interagieren und mit ihnen herumspielen.
In diesem Artikel werde ich genauer untersuchen, wie diese Tools Ihren HTML- und CSS-Workflow beschleunigen können. Ich beziehe mich auf Designer, die die Entwicklungswerkzeuge von Chrome noch nicht unbedingt kennen gelernt haben, aber ich bin mir sicher, dass Sie auch dann etwas lernen werden, wenn Sie mit ihnen vertraut sind.
Zunächst müssen Sie Chrome öffnen und zu einer Seite Ihrer Wahl navigieren. Auf die Entwicklungswerkzeuge kann auf drei verschiedene Arten zugegriffen werden. Sie können mit der rechten Maustaste auf eine Webseite klicken und "Inspect Element" auswählen. Sie können den Schraubenschlüssel oben rechts in Chrome auswählen und "Tools> Developer Tools" auswählen. Der dritte und letzte Weg besteht darin, eine Reihe von Abkürzungen zu verwenden, die Chrome uns zur Verfügung gestellt hat:
Drücken Sie unter Windows und Linux
Drücken Sie auf dem Mac
Wenn Sie ein Webdesigner sind, verbringen Sie einige Zeit im Elementbereich der App. Mit dieser App können Sie alles im Dokumentobjektmodell (kurz DOM) sehen..
Es zeigt das DOM wie eine Baumstruktur an, sodass Sie sich leicht im HTML-Dokument zurechtfinden können. Das Tolle an dem Inspector-Tool ist, dass wenn Sie den Mauszeiger über ein DOM-Element in der Baumstruktur bewegen, das entsprechende Tag auf der angezeigten Webseite hervorgehoben wird. Durch die Auswahl der kleinen Lupe in der unteren linken Ecke des Inspektors können Sie auf einfache Weise direkt auf der angezeigten Webseite einen Dom-Knoten auswählen, der hervorgehoben wird. Dies kann viel Zeit sparen, wenn Sie schnell den Namen oder den Typ des Attributs eines Elements auf Ihrer Seite überprüfen möchten.
Sie können den HTML-Code der Dom-Knoten bearbeiten, indem Sie darauf doppelklicken. Daraus können Sie Attribute wie Werte, IDs und Klassen oder sogar den HTML-Tag-Typ ändern.
Wenn Sie mit der rechten Maustaste auf einen Knoten klicken, wird ein Kontextmenü angezeigt, in dem Sie die HTML-Datei kopieren oder vollständig löschen können. Sie können auch den XPath des Knotens kopieren. Der XPath ist eine Abfragesprache zum Auswählen von Knoten aus einem Dokument. Dies kann nützlich sein, wenn Sie Dinge wie die Abfragesprache von Yahoo (YQL) verwenden..
Sie können auch HTML-Elemente auf der Seite ziehen. Wählen Sie dazu einen Knoten aus und ziehen Sie ihn an eine andere Stelle im Baum. Dies wird dann auf der von Ihnen überprüften Webseite angezeigt.
Am unteren Rand des Elements-Inspektors befindet sich eine Leiste, über die Sie entlang der Elemente-Eltern navigieren können. Dies hinterlässt eine Spur der Vorfahren der ausgewählten Elemente, sodass Sie übergeordnete Elemente schnell und einfach anzeigen und finden können.
Eine weitere praktische Funktion des Bedienfelds Elemente ist für die Arbeit mit Bildern gedacht. Bewegen Sie den Mauszeiger einfach über das Bild-Tag und Sie werden von einem kleinen Popup-Fenster begrüßt, das das Bild, die Abmessungen des gerenderten Bildes und die ursprüngliche Bildgröße anzeigt. Die gerenderte Größe kann manchmal größer sein als die ursprüngliche Bildgröße, was beim Hinzufügen von Rändern oder Auffüllen entstehen kann.
Beachten Sie, dass sich die gerenderte Größe auf die gerenderte Elementgröße bezieht und nicht unbedingt auf die Größe des tatsächlichen Bildes.
Die Entwicklertools von Chrome sind äußerst hilfreich beim Debuggen von CSS. Manchmal können CSS-Stile zusammenfallen und unerwünschte visuelle Effekte auftreten. Indem wir überprüfen können, welche Stilregeln vom Browser auf das Element angewendet werden, können wir die Wurzel des Problems finden und den Fehler beheben.
Im Abschnitt "Berechneter Stil" können Sie sehen, welche Stile von der Rendering-Engine des Browsers auf das Element angewendet werden. Dies ist der letzte Satz von Stilen, die auf die Webseite angewendet werden. Wenn Sie auf den kleinen Pfeil links neben einem bestimmten berechneten Stil klicken, können Sie erkennen, woher der Stil kommt. Wenn Sie also nicht verstehen können, warum das Div dauerhaft mit einem schwarzen Hintergrund dargestellt wird oder warum der Text nicht fett wird. Schauen Sie sich den berechneten Stil an und sehen Sie, was der Browser sieht.
Der Abschnitt "Styles" und "Matched CSS Rules" funktionieren auf ähnliche Art und Weise. In beiden Fällen können Sie CSS-Regeln zu einem Element hinzufügen, entfernen und ändern. Mit dem Bedienfeld 'element.style' können Sie Eigenschaften zu diesem bestimmten Element hinzufügen, unabhängig von der ID oder Klasse, die es besitzt. Stellen Sie sich diese als Inline-Stile vor. Dies unterscheidet sich vom Abschnitt "Abgeglichene CSS-Regeln", da sich die Regeln, die Sie in diesem Abschnitt ändern, auf jedes andere Element mit dieser bestimmten ID oder Klasse auswirken.
Sie stellen manchmal fest, dass eine Regel durchgestrichen ist. Dies liegt in der Regel daran, dass es durch eine andere Regel einer anderen Eigenschaft überschrieben wird. Um herauszufinden, warum es überschrieben wird, können Sie den oben genannten Abschnitt "Berechneter Stil" verwenden.
Weitere Designer, mit denen ich in letzter Zeit gesprochen habe, entfernen sich von dem Ansatz, eine bestimmte Website in einem Bearbeitungspaket wie Photoshop und Fireworks zu entwerfen, und bewegen sich in Richtung eines "Design im Browser" -Ansatzes. Dieser neue Ansatz ermöglicht es Ihnen, Ihre Arbeit so zu sehen, wie der Browser sie sieht.
Bearbeitungswerkzeuge wie Photoshop haben andere Rendering-Engines als Browser, was dazu führen kann, dass Schriftarten und Farben unterschiedlich aussehen. Dadurch wird das Design in situ platziert und Sie können sehen, wie es im Browser angezeigt wird. Ganz zu schweigen von den Vorteilen, die es für das Responsive Design und für die Vielzahl an Gerätetypen hat, mit denen wir uns jetzt befassen müssen. Natürlich spielt eine Software wie Photoshop immer noch eine große Rolle in meinem Workflow, obwohl ich sie heute zum Erstellen von Stil-Sets verwende, im Gegensatz zu tatsächlichen Layouts.
Eine praktische Funktion für diesen neuen Ansatz ist die Möglichkeit, Farben auszuwählen. Durch Klicken auf das Zahnradsymbol in der oberen rechten Ecke des Bedienfelds „Stile“ können Sie zwischen verschiedenen Farbmodi wechseln. Sie sind:
Wenn Sie zum Beispiel Schwarz verwenden und dann die Live-Webseite anzeigen und feststellen, dass es für die angestrebte Ästhetik etwas zu dunkel ist, können Sie einfach auf das kleine Farbfeld neben dem Eigenschaftswert klicken und die Anzeige wird angezeigt Wählen Sie einen Farbwähler aus, mit dem Sie die Helligkeit des Schwarzen ein wenig verringern können. Dies ist sehr nützlich für das spontane Design.
Durch das Anpassen von Rändern, Polsterungen und Positionen können wir in Echtzeit sehen, wie viel Breite wir diesem div geben müssen, um es richtig zu positionieren. Dies erspart Ihnen sicherlich viel Zeit, wenn Sie zwischen dem Browser und Ihrem Code-Editor wechseln und Ihr Dokument speichern und aktualisieren müssen.
In der oberen rechten Ecke der "Stile" neben dem Zahnrad-Symbol befindet sich ein kleines Markierungssymbol. Wenn Sie darauf klicken, können Sie zwischen den verschiedenen Zuständen eines Elements wechseln. Diese verschiedenen Zustände sind
Wenn Sie einen dieser Bereiche aktivieren, bleibt der gewählte Zustand erhalten und Sie können seine Eigenschaften bearbeiten.
Eine meiner Lieblingsfunktionen des Dev Tools Styles Inspector ist die Möglichkeit, in Ihrem Stylesheet schnell nach Aufenthaltsort der Eigenschaft zu suchen, in der Sie Ihre Leben bearbeiten. Wenn Sie rechts von der Eigenschaft, die Sie bearbeiten, nachsehen, werden der Name des Stylesheets und die Zeilennummer in Bezug auf den Aufenthaltsort angezeigt. Durch Klicken auf den Link gelangen Sie in die Quellensicht. Dies zeigt im Wesentlichen Ihr Stylesheet vollständig. Von hier aus können Sie wie in Ihrem Code-Editor daran arbeiten. Der einzige Unterschied besteht darin, dass Sie Ihre Ergebnisse in Echtzeit sehen.
Sie können Ihr Stylesheet auch speichern, indem Sie die Seitenleiste herausschieben. Wenn Sie mit der rechten Maustaste auf den Namen klicken, wird ein neues Kontextmenü geöffnet, in dem Sie das Stylesheet im Browser öffnen und speichern können. Das Tolle daran ist, dass Sie durch Klicken auf "Lokale Änderungen" einen vollständigen Änderungsverlauf aller vorgenommenen Änderungen sehen können. Wenn Sie also etwas falsch gemacht haben und zu den Änderungen zurückkehren möchten, die Sie vor zehn Minuten vorgenommen haben, hat Chrome Ihren Rücken.
Zurück in der Elements-Seitenleiste haben wir das Metrikfenster. Mit diesem Fenster können Sie die Box-Modellparameter des aktuellen Elements anzeigen und Änderungen daran vornehmen. Dies gibt eine visuelle Darstellung dieser Parameter, die Folgendes umfassen:
Chrome Developer Tools gehören zu den nützlichsten Tools, um meinen HTML / CSS-Webdesign-Workflow zu beschleunigen.
Natürlich gibt es viele andere Verwendungen für sie, zum Beispiel die Analyse der Seitenladezeiten und die Leistung von Skripten. Es gibt auch andere Tools, die ähnliche Aufgaben ausführen wie Firebug for Firefox. Die neueste Version von Firefox enthält auch einige hilfreiche Tools, die noch nicht in Chrome implementiert wurden, obwohl sie hoffentlich bald einen Tag dauern werden. Dazu gehören Dinge wie die 3D-Ansicht. In der 3D-Ansicht können Sie eine 3D-Darstellung einer Website anzeigen, um die Sie sich drehen und orientieren können. Dies macht es leicht, die Verschachtelung Ihrer Inhalte zu visualisieren. Sie haben auch den "Responsive Mode" eingeführt, der die Website in einen Frame versetzt, dessen Größe Sie ändern können, um zu sehen, wie sie bei unterschiedlichen Haltepunktgrößen angezeigt wird.
Ich sage nicht unbedingt, dass die Entwickler-Tools von Chrome die besten sind. Für mich ist es das einzige, das ich je benutzt habe und ich weiß, wie viel Zeit es mir und meinem Workflow gespart hat. Deshalb wollte ich Ihnen einige der Tipps, die ich entdeckt habe, mitteilen und hoffen, dass sie Ihnen auch etwas Zeit sparen!
Accentsconagua