Webentwicklungstools - Web development tools
Webentwicklungstools (oft als devtools bezeichnet ) ermöglichen Webentwicklern das Testen und Debuggen ihres Codes. Sie unterscheiden sich von Website-Buildern und integrierten Entwicklungsumgebungen (IDEs) darin, dass sie nicht bei der direkten Erstellung einer Webseite helfen , sondern Werkzeuge zum Testen der Benutzeroberfläche einer Website oder Webanwendung sind .
Webentwicklungstools sind als Browser-Add-Ons oder integrierte Funktionen in Webbrowsern erhältlich . Die meisten gängigen Webbrowser wie Google Chrome , Firefox , Internet Explorer , Safari , Microsoft Edge und Opera verfügen über integrierte Tools, die Webentwicklern helfen, und viele zusätzliche Add-Ons finden Sie in den jeweiligen Plugin-Download-Centern.
Webentwicklungstools ermöglichen es Entwicklern, mit einer Vielzahl von Webtechnologien zu arbeiten, einschließlich HTML , CSS , DOM , JavaScript und anderen Komponenten, die vom Webbrowser verarbeitet werden. Aufgrund der steigenden Nachfrage von Webbrowsern, mehr zu tun, haben beliebte Webbrowser mehr Funktionen für Entwickler enthalten.
Unterstützung von Webentwickler-Tools
Mehrere bemerkenswerte Webbrowser unterstützen Webentwickler-Tools, die es Webdesignern und Entwicklern ermöglichen, sich die Gestaltung ihrer Seiten anzusehen. Dies sind alles Tools, die in den Browser integriert sind und keine zusätzlichen Module oder Konfigurationen erfordern.
- Firefox – F12öffnet die Webkonsole / Browserkonsole (seit Firefox 4). Die Webkonsole gilt für eine einzelne Inhaltsregisterkarte; die Browserkonsole gilt für den gesamten Browser. Es gibt auch viele Addons, darunter Firebug .
- Google Chrome – Chrome-Entwicklertools (DevTools)
- Internet Explorer und Microsoft Edge – F12öffnet Web Developer Tools (ab Version 8)
- Oper – Opernlibelle
- Safari – Safari Webentwicklungstools (ab Version 3)
Meistgenutzte Funktionen
Auf die integrierten Webentwickler-Tools im Browser wird normalerweise zugegriffen, indem Sie mit der Maus über ein Element auf einer Webseite fahren und die Option "Element prüfen" oder eine ähnliche Option aus dem Kontextmenü auswählen . Alternativ ist die F12Taste in der Regel eine andere gängige Tastenkombination.
HTML und das DOM
HTML- und DOM- Viewer und -Editor sind häufig in den integrierten Webentwicklungstools enthalten. Der Unterschied zwischen dem HTML- und DOM-Viewer und der View-Source-Funktion in Webbrowsern besteht darin, dass Sie mit dem HTML- und DOM-Viewer das DOM so sehen können, wie es gerendert wurde Änderung auf der Seite widergespiegelt, nachdem die Änderung vorgenommen wurde.
Neben der Auswahl und Bearbeitung zeigen die HTML-Elemente-Bedienfelder normalerweise auch Eigenschaften des DOM-Objekts an, z. B. Anzeigedimension und Cascading-Stylesheet-Eigenschaften.
Die Firefox-Versionen 11 bis 46 waren mit einem 3D-Seiteninspektor mit WebGL ausgestattet , bei dem die Verschachtelung von Elementen mit aus der Seitenoberfläche hervorstehenden Ebenen visualisiert wurde.
Webseiten-Assets, Ressourcen und Netzwerkinformationen
Webseiten werden normalerweise geladen und erfordern zusätzlichen Inhalt in Form von Bildern, Skripten, Schriftarten und anderen externen Dateien. Webentwicklungstools ermöglichen es Entwicklern auch, geladene und auf der Webseite verfügbare Ressourcen in einer Baumstrukturliste zu überprüfen, und das Erscheinungsbild von Stylesheets kann in Echtzeit getestet werden.
Mit Webentwicklungstools können Entwickler auch Informationen zur Netzwerknutzung anzeigen, z. B. die Ladezeit und die Bandbreitennutzung sowie die gesendeten und empfangenen HTTP-Header .
Profilerstellung und Auditierung
Mit Profiling können Entwickler Informationen über die Leistung einer Webseite oder Webanwendung erfassen. Mit diesen Informationen können Entwickler die Leistung ihrer Skripte verbessern. Überwachungsfunktionen können Entwicklern nach der Analyse einer Seite Vorschläge für Optimierungen liefern, um die Ladezeit der Seite zu verkürzen und die Reaktionsfähigkeit zu erhöhen. Webentwicklungstools bieten normalerweise auch eine Aufzeichnung der Zeit, die zum Rendern der Seite benötigt wird, der Speichernutzung und der Arten von Ereignissen, die stattfinden.
Diese Funktionen ermöglichen es Entwicklern, ihre Webseite oder Webanwendung zu optimieren.
JavaScript-Debugging
JavaScript wird häufig in Webbrowsern verwendet. Webentwicklungstools enthalten in der Regel ein Panel zum Debuggen von Skripten, indem es Entwicklern ermöglicht, Überwachungsausdrücke und Haltepunkte hinzuzufügen, den Aufrufstapel anzuzeigen und Funktionen anzuhalten, zu übergehen, zu betreten und zu verlassen, während sie JavaScript debuggen.
Eine JavaScript-Konsole ist normalerweise enthalten. Über die Konsolen können Entwickler JavaScript-Befehle eingeben und Funktionen aufrufen oder Fehler anzeigen, die während der Ausführung eines Skripts aufgetreten sind.
Erweiterungen und Plugins
Moderne Webbrowser unterstützen die Verwendung von Plugins oder Erweiterungen, um Funktionen hinzuzufügen oder zu erweitern. Es gibt viele gängige Plugins, die eine Vielzahl zusätzlicher Funktionen bereitstellen können.