Share
Google Chrome ist heute einer der größten Player im Web. Es ist schnell, zuverlässig, vollgepackt mit Funktionen und äußerst hilfreich, insbesondere wenn Sie Webentwickler sind. In Chrome können auch Erweiterungen von Drittanbietern installiert werden. Wir bauen diese Erweiterungen mit reinem HTML, CSS und JavaScript. Das Team von Google leistet wunderbare Arbeit. In diesem Artikel werden in Chrome einige nützliche Tools angezeigt, die unsere Entwicklungsprozesse unterstützen.
Heutzutage ist Reaktionsfähigkeit überall. Mit dem Aufkommen mobiler Geräte müssen wir unsere Anwendungen mit vielen unterschiedlichen Auflösungen laufen lassen. Die neuesten Versionen von Chrome enthalten wunderbare Instrumente, um unsere Arbeit zu erleichtern. Beginnen wir mit der Definition einer einfachen Seite und machen Sie sie weiter. Hier ist das HTML-Markup:
Sich anpassendes Webdesign
Responsive Webdesign (RWD) ist ein Webdesign-Ansatz…
Es gibt einige grundlegende Gestaltungsmöglichkeiten auf der Seite. Durch die CSS-Regeln werden die Links der Navigation verschoben und die beiden Abschnitte nebeneinander positioniert. Das Ergebnis sieht so aus:
Nachdem wir nun HTML und das grundlegende CSS installiert haben, können wir mit dem Experimentieren beginnen. Platzieren wir die Haltepunkte unserer Medienabfragen. Es ist wichtig, sie basierend auf dem Inhalt und dem Ort auszuwählen, an dem der Inhalt schlecht aussieht. Das Einstellen von Auflösungen wie 1024 x 768 ist nicht empfehlenswert, nur weil es beliebt ist.
Unser Inhalt bricht und wir möchten die genaue Größe des Darstellungsbereichs sehen. Also müssen wir das Fenster des Browsers vergrößern. Unter Chrome können wir das öffnen Entwickler-Tools-Panel und vergrößern Sie dort.
Beachten Sie, dass, während wir die Größe des Darstellungsbereichs ändern, die Größe im Ansichtsfenster angezeigt wird obere rechte Ecke. Dieser kleine Tooltip macht eine manuelle Überprüfung der Größe überflüssig. In unserem Fall wurden die beiden Bereiche unterhalb der Navigation um 500 Pixel zu stark zusammengedrückt. Das ist also der Ort für unsere erste Medienanfrage:
Abschnitt Float: Links; Breite: 50%; @media all und (max-width: 550px) section float: none; Breite: 100%;
Wenn wir etwas unter 550px gehen, werden wir feststellen, dass die Navigation eine horizontale Bildlauffunktion um 540px verursacht. Eine neue Abfragedefinition für Medien löst dieses Problem.
.nav list-style: none; Marge: 10px auto; Polsterung: 0; Breite: 510px; .nav li float: left; Marge: 0 20px 0 0; @media all und (max-width: 540px) .nav width: auto; .nav li float: keine; Marge: 0; Polsterung: 0; Text ausrichten: Mitte;
Das Ergebnis ist eine Webseite, die auf einer Vielzahl von Bildschirmen funktioniert. Ja, unsere Seite ist einfach und hat nur zwei Haltepunkte, aber der Auswahlprozess wird derselbe sein, selbst wenn wir eine riesige Website haben.
Häufig erhalten wir Fehlerberichte, dass unsere Anwendung auf einem bestimmten Gerät nicht ordnungsgemäß funktioniert. Chrome kann verschiedene Geräte simulieren, um dieses Problem zu lösen. Es legt die genaue Bildschirmauflösung fest und definiert die richtigen HTTP-Header. So sind wir in der Lage, einen genauen Einblick in das zu bekommen, was der echte Benutzer sieht. Die JavaScript-Browsererkennung funktioniert ebenfalls, da der Browser die Anforderungsheader ändert.
Nehmen wir an, wir müssen ein iPhone5-Gerät simulieren. Es gibt einen kleinen Knopf, der das öffnet Schublade Panel und dann gibt es eine Emulation Tab.
Wir wählen das Gerät aus und Chrome wendet alle Einstellungen in an Bildschirm, User-Agent und Sensoren Abschnitte. Der Browser emuliert sogar Berührungsereignisse.
Unsere Seite ist jetzt ansprechend, aber irgendwann müssen wir Änderungen vornehmen. Auch hier können wir Chrome als Werkzeug verwenden und sehen, welche Stile auf das Dokument angewendet werden. Zum Beispiel ist der Text im ersten Abschnitt zu groß. Das wollen wir ändern und eine neue Farbe setzen.
Das Elemente Das Panel ist auch hilfreich, wenn eine bestimmte CSS-Regel benötigt wird, aber wir wissen nicht, wo die Definition dieser Regel ist. Auf der rechten Seite befindet sich ein Abschnitt, der die berechneten Stile zeigt, die auf das aktuell ausgewählte Element angewendet werden. Anschließend können wir es ändern.
Und schließlich müssen wir manchmal nach bestimmten CSS-Stilen suchen, aber es ist schwierig, sie zu finden, da es viele Definitionen gibt. In dem Entwickler-Tools Panel haben wir ein schönes Filterfeld. Nehmen wir an, wir möchten auf die Regeln für unsere zugreifen Tag mit dem Konzept Klasse angewendet, so können wir das tun:
Google Chrome ist ein universelles Tool. Es verfügt über Instrumente zur Unterstützung von Designern wie im letzten Abschnitt dieses Tutorials. Aber das kann für die Entwickler genauso sein, wie wir jetzt sehen werden.
Es gibt einen schönen JavaScript-Debugger, der in Chrome integriert ist. Es gibt auch einen wunderbaren Konsolen- und Quellen-Viewer. Um zu veranschaulichen, wie alles funktioniert, fügen wir unserem Beispiel eine kleine Logik hinzu. Wir möchten das Label ändern Beispiele im Hauptmenü zu Tolle Beispiele wenn wir klicken auf dem Link. Wir werden jQuery als Helfer verwenden, damit wir uns besser auf das Beispiel konzentrieren können:
Accentsconagua
$ ('. nav'). on ('click', Funktion (e) var clicked = e.currentTarget; if (clicked.innerHTML === 'Examples') clicked.innerHTML = 'Tolle Beispiele'; else console.log ('nichts tun');); Sie kennen das Problem wahrscheinlich bereits, aber sehen Sie, wie der obige Code funktioniert.
Egal was wir tun klicken wir bekommen nichts tun… in der Konsole So sieht es aus wie unser ob Klausel ist immer falsch. Setzen wir einen Haltepunkt, um zu sehen, was los ist.
Der Debugger stoppt an unserem Haltepunkt und zeigt uns die lokal definierten Variablen. Die Variable angeklickt, zeigt auf das Navigationselement und nicht auf das Element. So ist es innerHTML Eigenschaft ist definitiv nicht Beispiele. Deshalb haben wir bekommen nichts tun… jedes Mal. Um den Fehler zu beheben, könnten wir einfach verwenden .nav a statt nur .nav.
Oben ist der traditionelle Ansatz, der funktioniert, wenn wir wissen, wo der Haltepunkt genau festgelegt werden soll. Wenn wir jedoch mit einer großen Codebasis arbeiten und vor allem, wenn wir die verkettete Datei debuggen müssen, wird dies ein wenig problematisch. Wir fangen an zu platzieren console.log hier und dort und überprüfen Sie die Konsole. Es wird funktionieren, aber bald werden wir viele Daten haben, es wird schwierig sein, die Daten zu filtern und die benötigten Informationen zu finden. Chrome hat auch für dieses Problem eine Lösung. Wir können die Ausgabe in der Konsole gestalten, indem Sie hinzufügen % c vor dem Text an die übergeben .Log Methode. Fügen Sie danach einen zweiten Parameter hinzu, der unsere Stile enthält. Zum Beispiel:
Es gibt noch etwas, was wir hinzufügen könnten. Das Konsole Objekt hat zwei nicht so populäre Methoden - Gruppe und groupEnd. Sie geben uns die Möglichkeit, unsere Protokolle zu gruppieren.
Es gibt auch eine Bibliothek, die sowohl die Gestaltung als auch die Gruppierung der Ausgabe Deb.js kombiniert. Das einzige, was wir tun müssen, ist, es vor den anderen Skripten in unsere Seite aufzunehmen und anzufügen .deb () am Ende der Funktion, die wir untersuchen möchten. Es gibt auch .debc () Version, die reduzierte Gruppen an die Konsole sendet.
Mit dieser Bibliothek können wir die an die Funktion übergebenen Argumente, ihren Stack-Trace-Rückgabewert und die Ausführungszeit abrufen. Wie bereits erwähnt, sind die Nachrichten schön gruppiert und ineinander verschachtelt, sodass der Ablauf der Anwendung viel einfacher verfolgt werden kann.
Eine der Hauptfunktionen des Google-Browsers ist das Ökosystem der Erweiterung. Es gibt eine Möglichkeit für uns, installierbare Programme zu schreiben, die im Browser ausgeführt werden, und es gibt Dutzende hilfreicher APIs, die wir verwenden können. Das Wichtigste ist jedoch, dass wir keine neue Sprache lernen müssen. Die Technologien, die wir verwenden werden, sind die üblichen HTML-, CSS- und JavaScript-Funktionen. Überprüfen Sie die folgende Einführung in die Erweiterungsentwicklung von Chrome.
Es gibt sogar einen separaten Abschnitt im Chrome-Webshop namens Web Entwicklung. Es enthält nützliche Instrumente, die speziell für uns - Entwickler - erstellt wurden. Es gibt einen namens Yez! Es bringt Terminal-ähnliche Funktionen in das Developer Tools-Bedienfeld. Wir sind in der Lage, Shell-Befehle auszuführen und ihre Ausgabe in Echtzeit abzurufen.
Die Erweiterung selbst reicht nicht aus, um Shellbefehle auszuführen. Das liegt daran, dass wir keinen Zugriff auf das Betriebssystem haben. Deshalb gibt es ein Node.js-Modul, das als Proxy fungiert. Yez! stellt über Web-Sockets eine Verbindung zur laufenden Node.js-App her. Wir könnten das Modul über den Paketmanager Node.js mit installieren npm install -g yez.
Yez! hat auch eine nette Git-Integration und zeigt uns den Zweig im aktuellen Verzeichnis. Wir sind in der Lage, Terminalbefehle auszuführen und sie sofort auszugeben.
Die Erweiterung wurde ursprünglich als Task Runner entwickelt. Es hat also eine Schnittstelle für Aufgabendefinitionen. Tatsächlich ist das nur eine Reihe von Shellbefehlen, die nacheinander ausgeführt werden. Die gleichen Ergebnisse erzielen wir durch das Erstellen von Shell-Skripten.
Wir können auch die Ausgabe des Terminals in Echtzeit sehen. Die Erweiterung eignet sich also für die Entwicklung von Node.js-Anwendungen. Normalerweise müssen wir den Node.js-Prozess neu starten, aber jetzt ist alles in Chrome sichtbar.
Als Webentwickler kommt es häufig vor, dass wir HTTP-Anfragen an unsere Anwendungen stellen müssen. Vielleicht haben wir eine REST-API entwickelt oder wir haben ein PHP-Skript, das POST-Parameter akzeptiert. Es gibt ein Befehlszeilentool namens cURL. Es ist wahrscheinlich das am weitesten verbreitete Instrument zur Abfrage des Webs.
Mit cURL müssen wir nicht zum Terminal springen. Es ist DHC (REST HTTP API Client) verfügbar. Diese Erweiterung gibt uns die vollständige Kontrolle über die HTTP-Anfrage. Wir könnten die Anforderungsmethode, die Header oder die GET- und POST-Parameter ändern. Außerdem wird das Ergebnis der Anforderung mit ihren Kopfzeilen angezeigt. Ein sehr nützliches Instrument.
Wir wissen alle, wie wichtig das Testen ist. Es ist äußerst wichtig zu wissen, dass sich unsere Programme richtig verhalten. Manchmal kann das Schreiben von Tests eine Herausforderung sein. Vor allem, wenn wir die Benutzeroberfläche testen müssen. Glücklicherweise gibt es ein Node.js-Modul, das unseren Browser (Chrome) steuert und Aktionen auslöst, z. B. das Besuchen einer Seite, das Klicken auf einen Link oder das Ausfüllen eines Formulars. Es heißt DalekJS. Es kann leicht installiert werden, indem Sie Folgendes ausführen:
npm install -g dalek-cli
Lassen Sie uns ein kurzes Experiment machen und sehen, wie alles funktioniert. In einem neu erstellten Verzeichnis benötigen wir eine package.json Datei mit folgendem Inhalt:
"name": "project", "description": "description", "version": "0.0.1", "devDependencies": "dalekjs": "0.0.8", "dalek-browser-chrome": "0.0.10"
Nach dem Rennen npm installieren im selben Verzeichnis werden wir bekommen dalekjs und dalek-browser-chrome in einem installiert Knotenmodule Mappe. Wir werden unseren Test in eine Datei mit dem Namen test.js. Speichern wir es im selben Ordner. Hier ist ein kurzes Skript, das die Suchfunktionen von GitHub testet:
var url = 'https://github.com/'; module.exports = 'sollte die Suche in GitHub durchführen': function (test) test .open (url) .type ('# js-command-bar-field', 'dalek') .submit ('# top_search_form') .assert.text ('. repolist h3 a', 'dalekjs / dalek', 'Es gibt eine Verknüpfung mit dem Label dalekjs') .click ('[href = "/ dalekjs / dalek"]') .assert.text (' .repository-description p ',' DalekJS Base-Framework ',' Es ist das richtige Repository ') .done (); Um den Test durchzuführen, müssen wir schießen dalek ./test.js -b chrom in unserer Konsole. Das Ergebnis ist, dass DalekJS eine Instanz des Google Chrome-Browsers startet. Daraufhin wird die Website von GitHub geöffnet, an der Sie die Eingabe vornehmen können Dalek im Suchfeld und es geht zum richtigen Repository. Am Ende schließt Node.js einfach das geöffnete Fenster. Die Ausgabe in der Konsole sieht folgendermaßen aus:
DalekJS unterstützt PhantomJS, Firefox, InternetExplorer und Safari. Es ist ein nützliches Werkzeug und funktioniert unter Windows, Linux und Mac. Die Dokumentation ist auf der offiziellen Seite dalekjs.com verfügbar
Wenn wir uns vor unserem Computer befinden, verbringen wir die meiste Zeit im Browser. Es ist gut zu wissen, dass Google Chrome nicht nur ein Programm zum Surfen im Web ist, sondern auch ein leistungsfähiges Instrument für die Webentwicklung.
Nun gibt es eine Menge nützlicher Erweiterungen und eine ständig wachsende Community. Ich empfehle Ihnen daher, Google Chrome auszuprobieren, falls Sie es nicht bereits für Ihre nächste Web-App verwenden.
