Web Development Tools, Elemente und Techniken
am 11. August, 2011 Posted in App | Erweiterungen | Tips | Werkzeuge | Web Design | Web-Entwicklung 0ZUls ich begann als ein Web-Entwickler, Ich musste einige Kämpfe Gesicht, wenn Lösungen für einige meiner Probleme. Ich musste lernen und neue Dinge ausprobieren, aber es gab nicht so viele Tutorials, wie es heute sind. Die beste Alternative war, zu lernen und von der Arbeit anderer Studie, Analyse ihrer Verfahren und Arbeitsmethoden.
Heutzutage, wie es scheint, ein neues Tutorial wird jede Minute, aber ich persönlich glaube, dass der Blick auf tatsächliche implementierten Lösungen ist immer noch ein guter Weg, um zu lernen, und Sie haben auch viele Werkzeuge und Methoden zur Verfügung, die Ihnen helfen, zu sehen und herauszufinden, wie Ihre Lieblings-Websites gebaut wurden. kann Alles, was Sie wissen müssen und zu lernen, ist direkt vor Ihnen und zu Ihrer Verfügung.
Web Development Tools und Erweiterungen
Die traditionelle view source code Option war nicht genug für eine gute Code-Inspektion. Es wurde sehr wichtig für ein Web-Entwickler, ein Instrumentarium, das ihn mit einer Reihe von Möglichkeiten, die speziell für Code-Analyse und Inspektion gemacht könnten in einem Web-Browser haben. Diese Tools werden als Developer Tools und sind in der Regel standardmäßig installiert oder als Erweiterung / plugin, Arbeiten direkt aus dem Browser selbst. Mit dem Entwickler-Tools können Sie den gesamten Quellcode einer Webseite wie zuvor mit dem traditionellenView Source-Code Option, aber mit viel mehr Optionen und Funktionen als je zuvor. Sie können prüfen, bearbeiten, live Ergebnisse und vieles mehr.
Google Chrome (Developer Tools) / Safari (Developer Tools)
Sie wundern sich vielleicht, warum bin ich auch Chrome Developer Tools und Safari Developer Tools zusammen, gut das ist, weil sie zusammen gehören. Die Developer Tools ist Teil der Webkit Open-Source-Projekt, das Safari und Google Chrome heißt teilen die gleiche Code-Basis, sie teilen sogar das gleiche Layout.
Lassen Sie uns also mit Chrome starten, mein neuer Favorit. Google Chrome Developer Tools ist sehr neu im Vergleich mit anderen wie Firebug (Firefox), aber es ist schnell wachsenden und immer besser und besser mit jeder neuen Version.
Das gleiche gilt natürlich auch für Safari.
"Die Google Chrome Developer Tools bieten eine integrierte Umgebung für die Fehlersuche, Optimierung, und das Verständnis einer Web-Anwendung, oder Website, Laufen in Google Chrome. Die Entwickler-Tools sind zum Teil durch die WebKit Open-Source-Projekt entwickelt, wo sind die Werkzeuge, sogenannte Web Inspector. "
"Alle von leistungsstarken Entwickler Safari-Tools sind leicht zugänglich von der Develop-Menü. Die Develop-Menü enthält eine Fülle von Tools, die Sie für die Web-Seite Manipulation und Debugging verwenden können. "
Für ein besseres Verständnis, Sie können die Links unten,.
Firefox (Firebug)
Mit Firefox die smarte Lösung für Web-Entwickler ist auf jeden FallFirebug, eine der beliebtesten Firefox-Erweiterungen gibt. Obwohl die WebkitDeveloper Tools ist zu einem wirklich schnellen Tempo wächst, Firebug ist wohl die vollständigste und reifen Tool für Web-Entwicklung und Code-Analyse haben kann.
"Firebug integriert mit Firefox auf eine Vielzahl von Web-Entwicklungs-Tools zur Hand legen, während Sie navigieren. Sie können bearbeiten, debuggen, und überwachen CSS, HTML, und JavaScript in jeder Webseite zu leben. "
Firebug'S-Interface und Arbeitsablauf ist extrem ähnlich ChromeDeveloper Tools (oder umgekehrt).
Oper (Opera Dragonfly)
Dies ist Opera Juwel für Code-Analyse und Inspektion. Es ist erstaunlich leistungsfähig und ich persönlich würde es an dritter Stelle setzen direkt hinter Google Chrome Developer Tools. Der Nachteil ist definitiv der Ästhetik, sondern seine Funktionen und Cross-Device-Kompatibilität Stellen Dragonfly gehört zu den besten.
"Eine umfangreiche Sammlung von Tools zur Verfügung bereit. Debug JavaScript, Anzeigen der DOM, Überwachung des Netzwerkverkehrs, Vorschau Ressourcen, edit Farben und eine ganze Menge mehr. Wenn Sie ein Entwickler sind, oder ein Designer, Opera Dragonfly verfügt über die Tools, um Sie abgedeckt. "
Weitere Informationen, überprüfen Sie den untenstehenden Link.
Internet Explorer (Developer Tools)
Ja, Internet Explorer hat ein zu. Obwohl die Benutzeroberfläche sieht ein bisschen alt und nicht so gut wie andere Lösungen, da es einige Funktionen fehlen, es kannfast so gut wie die Konkurrenz.
"Der Microsoft Internet Explorer Developer Toolbar bietet eine Vielzahl von Tools zum schnellen Erstellen von, Verständnis, und Fehlerbehebung Web-Seiten. "
Sie können mehr darüber auf den folgenden Link erfahren.
Internet Explorer Developer Toolbar
How To
Überprüfen einer Website font
Mit einem realen Text (nicht ein Bild von Text), der erste und einfachste Weg ist die Verwendung Developer Tools / Firebug, Also, wenn Sie es nur den Text auswählen, Inspect Element, und Sie sollten sofort auf der rechten Seite die sehen sind oder font-family Eigentum, das sagt Ihnen, die Schriftart, die verwendet ist. Ein anderer Weg, es zu tun ist, indem Sie eine Erweiterung / Plugin für diesen Zweck. Wahrscheinlich gibt es ähnliche Plugins für andere Browser wie Chrome, aber wenn Sie Firefox verwenden, Sie haben eine große Add-on genanntContext Font. Mit Context Font alles, was Sie tun müssen, ist wählen Sie den Text (wieder, muss echte Text und kein Bild sein), Sie mit der rechten Maustaste klicken und Sie erhalten sofort die Schriftart und-größe verwendet.
Wenn die Schriftart, die Sie suchen, ist als ein Bild verwendet, Sie haben nur einen Weg, es zu tun. Einer der vielen Orte, die Sie tun können, ist myfonts.com. Laden Sie Ihre Schriftart und folgen Sie den Schritten.
Viel Glück!
Aktivieren Sie das Kontrollkästchen Modell eines Elements
Das Box-Modell repräsentiert die visuelle Struktur der Elemente einer Webseite mit den entsprechenden Eigenschaften wie Breite, Höhe, Marge, Auffüllung und den Rahmen,nach demvisuellen Formatierung Modell. Es ist möglich, das Box-Modell auf jeder Seite und das Element mit Developer Tools oder Firebug überprüfen. Um das zu tun, Sie brauchen nur das gewünschte Element zu inspizieren, und wählen SieMetrik auf der rechten Seite der Developer Tools-Panel. Mit Firebug, Sie müssen wählen Layout (nicht Metrik).
Kopieren Sie alle Textinhalt eines Elements mit Entwickler-Tools
Dieser ist ein beliebter Trick, mit dem Developer Tools Konsole erreicht wird,. So sagen wir, Sie möchten zu diesem Artikel den Text ohne die Notwendigkeit, die um den gesamten Inhalt mit dem Cursor wählen Kopie (besonders nützlich bei sehr langen Seiten mit zu viel Text). Um dies zu erreichen, inspizieren jedes Element zu diesem Artikel Seite und suchen Sie den Text-Container den Namen, aus der Sie den Text kopieren möchte (die in diesem Fall heißt articlesContainer), nun die Option console gehen und schreiben Sie den folgenden Befehl: Kopie (articlesContainer.innerText ). Jetzt fügen Sie den Text wo immer Sie wollen und Sie sind fertig! Sie haben gerade den Text innerhalb unserer kopiert articlesContainer Dies entspricht unserem Hauptartikel Text.
Bookmarklets
Meine
MIN ist ein Bookmarklet, dass jede Dekoration von einer Website Streifen. Alle Farben, Rahmen und Hintergründen werden sofort entfernt, hilft Ihnen identifizieren die erfolgreichen und nicht erfolgreichen Verwendung von Typographie und Layout.
Design
Design ist eine Suite von Web-Design und Entwicklung unterstützende Werkzeuge, die auf einem beliebigen Web-Seite genutzt werden können. Umfassende Tools für Grid-Layout, Messung und Ausrichtung, Design ist ein einmalig leistungsfähiges JavaScript Bookmarklet.
Favelet Suite
Nach dem Aufruf, ein div-Element wird in der linken oberen Ecke des Browser-Fensters mit einer Liste aller Favelets erscheinen enthalten. Klicken Sie einfach auf den Link, den Sie wollen die favelet aufrufen. Ein "Info"-Symbol steht Ihnen zur Verfügung um die Favelets Informationsseite übernehmen slayeroffice. Inbegriffen in der Suite: Color List, Document Baum Chart *, HTML-Attribut-Viewer, HTTP-Header-Viewer, Verstecktes Feld, Änderung, JavaScript Object Tree *, MODIv2, Mouseover DOM, Inspektor, Object Abmessungen, Page Info, Entfernen Kinder, Resize Schriften, Ruler **, Quelltext anzeigen, Style Sheet Tweak *, Style Sheet Viewer *.
W3C Markup Validator
Schnell Markup Validierungen von jedem Web-Dokument.
