de.hideout-lastation.com
Paradies Für Designer Und Entwickler


7 neue Google Chrome-Funktionen, die Sie kennen sollten

Neben seiner Funktion als großartiger täglicher Internet-Browser ist Google Chrome auch ein großartiges Werkzeug für die Web-Entwicklung durch die DevTools.

Die DevTools wird ständig mit neuen Versionen aktualisiert. Es könnte also ein paar Features und DevTools geben, die Sie auf dem Weg vielleicht verpasst haben. Daher sind hier 7 der neuesten Google Chrome-Funktionen, die Sie kennen sollten .

Erste Schritte - Chrome DevTools-Experiment

Chrome verfügt über einige experimentelle coole Funktionen, die standardmäßig ausgeblendet oder deaktiviert sind. Um diese experimentellen Funktionen zu aktivieren, gehe zu chrome://flags/#enable-devtools-experiments über die Chrome-Adressleiste und aktiviere die DevTool Experiment-Option und starte Chrome neu .

Starten Sie nach dem Neustart die DevTools und klicken Sie auf das Zahnrad-Symbol oben rechts im DevTools-Panel, und Sie sollten in der linken Seitenleiste die Registerkarte "Experiment" sehen. Überprüfen Sie, welche Funktionen Sie aktivieren möchten.

1. Verbesserter Emulator für mobile Geräte

Heute ist eine Website, die für mobile Geräte optimiert ist, ein Muss. Mit Chrome können Sie Websites im mobilen Modus mithilfe der Funktion Mobile Emulator debuggen, die komplett überarbeitet wurde und mit einer Reihe neuer Funktionen ausgestattet wurde.

Um den Mobile Emulator zu aktivieren, starten Sie die DevTools und klicken Sie auf das Mobile-Symbol neben dem Loop / Search-Symbol, wie im folgenden Screenshot gezeigt. Wie Sie sehen können, ist der Emulator jetzt mit Linealen ausgestattet, so dass Sie genau sehen können, in welcher Ansichtsgröße sich die Website befindet.

2. Auswahl mehrerer Cursor

Möchten Sie mehrere Zeilen zusammen in einer Quelldatei bearbeiten, so wie Sie es mit Sublime Text können? Chrome unterstützt jetzt mehrere Cursor und die Auswahl in DevTools. Verwenden Sie Strg + Klick oder Cmd + Klicken Sie, um mehrere Zeilen gleichzeitig auszuwählen.

3. Drosselung der Netzwerkverbindung

Sie können nun auch die Antwort und Leistung Ihrer Website auf verschiedenen Verbindungen mit den DevTools testen. Drücken Sie in den DevTools Esc, um Console Drawer zu starten, und wählen Sie Emulation. Wählen Sie auf der Registerkarte "Netzwerk" den Geschwindigkeitstyp aus, um Ihre Netzwerkverbindung zu drosseln, und sehen Sie, wie Ihre Website in der ausgewählten Geschwindigkeit ausgeführt wird.

4. Offline-Modus

Google Chrome ist jetzt mit dem Offline-Modus ausgestattet, mit dem Sie Websites öffnen können, während Sie offline sind. Wenn Sie eine Webanwendung entwickeln, die auch offline arbeiten soll, wäre diese Funktion sehr hilfreich. Um den Offline-Modus zu aktivieren, gehen Sie zu chrome://flags/#enable-offline-mode über die Adressleiste und aktivieren Sie die Option "Offline-Cache-Modus aktivieren".

Vergiss nicht, Chrome neu zu starten, damit der Effekt stattfindet.

5. Ziehen Sie HTML in den Editor und legen Sie ihn dort ab

Manchmal müssen Sie ein HTML-Element in Ihren Editor kopieren. Anstatt es manuell in Ihren Texteditor zu kopieren und einzufügen, können Sie einfach das DOM ziehen und in den Editor einfügen .

Derzeit können Sie nur ein Element ziehen, und die untergeordneten Elemente werden nicht folgen. Hoffentlich wird dies im nächsten Update verbessert.

6. Auditing CSS

Sie können nun auch Ihr CSS prüfen, z. B. unbrauchbare Stilregeln prüfen, die auf der Webseite nicht verwendet werden. Gehen Sie dazu auf den Tab "Audits" und klicken Sie auf "Ausführen", um mit der Überprüfung des CSS zu beginnen. Sie sehen eine Liste von Klassen / Selektoren, die auf der aktuellen Seite nicht wie folgt verwendet werden.

7. Hinzufügen von SourceMap

Mit Source Map können Sie die nicht erstellte oder die nicht kompilierte Version von CSS oder JavaScript (JS) anzeigen. Diese Funktion ist besonders nützlich für Entwickler, die Stile oder JS mit Pre-Prozessoren wie SASS, LESS oder CoffeeScript erstellen. Wenn die Quellkarte aktiviert ist, können Sie den Speicherort des Codes für generiertes JS oder CSS in einer bestimmten Zeilen- und Spaltennummer finden. Mit der neuesten Version von Chrome können Sie die Quellkarte manuell hinzufügen.

Stellen Sie dazu sicher, dass Sie sich im Quellfenster befinden und öffnen Sie eine Datei. Klicken Sie anschließend mit der rechten Maustaste und wählen Sie Quellkarte hinzufügen. um die .map Datei hinzuzufügen.

Generieren Sie Social Meta Tags einfach mit dieser App

Generieren Sie Social Meta Tags einfach mit dieser App

Die größten Social-Media-Sites haben die Welt praktisch erobert, Facebook treibt derzeit 2 Milliarden Nutzer weltweit an.Einer ihrer vielen Fortschritte in der Technologie ist das Open Graph- oder OG-Protokoll . Diese OG-Tags sind in anderen sozialen Netzwerken wie Pinterest und LinkedIn zur Norm geworden, daher kann es sehr vorteilhaft sein, sie auf Ihrer Website zu haben.U

(Tech- und Design-Tipps)

So messen Sie die Leistung der Front-End-Website

So messen Sie die Leistung der Front-End-Website

Apropos Optimierungsprozess ist bei New-Age-Webdesignern fast nicht vorhanden. Sogar viele Webdesigner, die ein Jahrzehnt oder länger im Geschäft waren, verstehen die Bedeutung der Standortoptimierung nicht vollständig.Nach einer längeren Zeit wird eine Website anfangen zu bombardieren. Die Frontend-Dateien können übertriebene Code-Blöcke oder gesperrte versteckte Bits enthalten. Dies

(Tech- und Design-Tipps)