Bagaimana untuk Memeriksa Elemen dalam Chrome dan Firefox?

Haben Sie sich jemals gefragt, welche Elemente hinter einer wunderschön gestalteten Website stecken? Erfahren Sie, wie Sie Elemente in Chrome und Firefox überprüfen. 

Jede optisch ansprechende Webseite verfügt über komplexe HTML-, CSS- und JavaScript-Codes, die im Backend arbeiten. Mit dem praktischen Entwicklertool namens Inspect Element können Sie die Elemente von HTML-Webseiten in gängigen Webbrowsern überprüfen.

Mit diesem Tool können Sie nicht nur die Elemente überprüfen, sondern auch das Website-Layout ändern und textfreie Screenshots erstellen. Lesen Sie weiter, um zu erfahren, wie Sie Elemente in gängigen Webbrowsern unter Windows überprüfen.

Was ist Inspect Elements?

Inspect Elements ist ein Entwicklertool, das in allen gängigen Webbrowsern wie Google Chrome, Mozilla Firefox, Microsoft Edge, Safari und Brave zu finden ist. Mit diesem Tool können Sie den HTML-, CSS- und JSS-Quellcode einer Webseite anzeigen.

Darüber hinaus können Sie damit den HTML- und CSS-Code bearbeiten und die Änderungen in Echtzeit in Ihrem Browser anzeigen lassen. Webentwickler, Designer und Vermarkter nutzen es, um Stiländerungen in der Vorschau anzuzeigen, Fehler zu beheben oder sich mit der Website-Architektur vertraut zu machen.

Obwohl es ein Entwicklertool ist, ist keine zusätzliche Softwareinstallation erforderlich. Sie können dies über Ihren Webbrowser tun, indem Sie die in diesem Artikel beschriebenen Methoden befolgen. 

Bevor Sie die Funktion „Elemente prüfen“ verwenden, denken Sie daran, dass alle Änderungen, die Sie zur Bearbeitung des Webinhalts vornehmen, vorübergehend sind. Die Änderungen sind nur für Sie sichtbar, während die tatsächliche Webseitenansicht für andere Benutzer dieselbe ist.

Wann verwenden Sie Inspect Elements?

Hier sind einige häufige Situationen, in denen Sie diese Funktion möglicherweise verwenden müssen: 

Webdesign

Wenn Sie die Struktur einer Webseite verstehen oder CSS-Stile testen möchten, können Sie dieses Tool verwenden. Es hilft auch beim Experimentieren mit verschiedenen Elementen und beim Modifizieren des Codes, um die visuellen Ergebnisse sofort zu überprüfen.

Screenshots machen

Wenn Sie einen Screenshot einer Webseite ohne bestimmte Elemente wie Text oder Bilder erstellen möchten, ist dieses Tool hilfreich. Suchen Sie den HTML-Code für das Element, das Sie entfernen möchten, und löschen Sie diesen Code. Dieses Element wird sofort aus Ihrer Webseitenansicht entfernt und Sie können einen Screenshot machen.

Website-Debugging

Eine weitere häufige Situation, in der dieses Tool verwendet wird, ist die Identifizierung eines Website-Problems oder -Fehlers. Es ermöglicht Ihnen, den HTML-, CSS- und JSS-Code zu untersuchen. So können Sie herausfinden, welche Elemente nicht richtig funktionieren oder falsch angezeigt werden.

Lernen Sie etwas über Webentwicklung

Wenn Sie etwas über Webentwicklung lernen, ist Inspect Elements ein unverzichtbares Tool für Sie. Es bietet Ihnen wertvolle Einblicke in die Elemente hinter einer bestimmten Website, um implementierte Funktionen und die gesamte Webseitenarchitektur zu verstehen und kennenzulernen.

Barrierefreiheit testen

Sie können auch das Inspect Element-Tool in Ihrem Webbrowser verwenden, um die Barrierefreiheit der Website zu bewerten. Damit können Sie ein genaues semantisches Markup sicherstellen und die Barrierefreiheitsattribute überprüfen. Darüber hinaus können Sie die Website auch mit Screenreadern oder anderen Technologien testen.

Extrahieren von Vermögenswerten

Wenn Sie bestimmte Inhalte oder Assets schnell von einer Webseite extrahieren möchten, verwenden Sie dieses Tool. Es ermöglicht Ihnen, Original-URLs verschiedener Medienelemente wie Bilder und Videos zu finden. Darüber hinaus können Sie damit nachvollziehen, wie bestimmte Daten geladen werden.

Vorteile der Prüfung von Elementen in verschiedenen Webbrowsern

Website-Struktur verstehen

Dieses Tool bietet eine visuelle Darstellung der Struktur einer Website durch HTML-Markup. So können Sie verschachtelte Elemente identifizieren und herausfinden, wie die Elemente interagieren. Es hilft Ihnen nicht nur, die Gesamtarchitektur zu verstehen, sondern ermöglicht Ihnen auch den Aufbau ähnlicher Strukturen.

Fehlerbehebung

Wenn Entwickler Probleme im Zusammenhang mit Layout, responsivem Design, JavaScript-Fehlern und Leistung identifizieren müssen, verwenden sie das Inspect Elements-Tool. Es ermöglicht ihnen auch, die browserübergreifende Kompatibilität einer Website sicherzustellen.

CSS-Styling analysieren

Vous pouvez utiliser cet outil pour analyser le style CSS et comprendre des aspects tels que les choix de polices, les couleurs et les propriétés de mise en page. Cette connaissance de l'apparence visuelle aide les développeurs à résoudre les incohérences de mise en page et à garantir une image de marque persistante.

Tests

L'inspection des éléments est également bénéfique pour l'évaluation de l'accessibilité et de la compatibilité des sites Web. Il vous permet d'inspecter les attributs HTML, les rôles ARIA et d'autres styles pour garantir que tout le monde peut accéder au contenu Web sans difficulté.

Réaliser des expériences en direct

L'expérimentation et le prototypage en temps réel sont des avantages supplémentaires de l'utilisation de l'outil Inspect Elements. Vous pouvez modifier directement les éléments pour vérifier les modifications sur la page Web. Ceux qui ont besoin de tests rapides et d'ajustements de la conception de sites Web l'utilisent pour un développement efficace.

Apprentissage 

Avant tout, Inspect Elements est l'outil parfait pour apprendre des sites Web existants et s'inspirer pour votre propre projet. Il vous aide à analyser la structure et la mise en page du site Web. Utilisez ces connaissances pour collaborer et apporter des améliorations continues.

Choses qui peuvent être faites en inspectant les éléments

• Il vous aide à effectuer des modifications en direct dans le panneau CSS et à visualiser les modifications en temps réel.
• Il vous permet de tester différentes mises en page de sites Web sans retélécharger le fichier HTML modifié.
• L'outil Inspect Elements vous permet également de vérifier tout code défectueux pour la maintenance du site Web.
• Cet outil peut être utilisé pour peaufiner les éléments de la page sans apporter de modifications au fichier HTML d'origine.

Méthodes étape par étape pour inspecter les éléments sur Google Chrome

Méthode 1 : Utilisation de la commande Inspecter du menu contextuel

Il s'agit de la méthode la plus courante pour inspecter les éléments d'une page Web sur Chrome.

1. Ouvrez la page Web que vous souhaitez inspecter sur Google Chrome.
2. Passez votre curseur sur le texte, l'image, la vidéo ou tout autre élément.
3. Maintenant, cliquez avec le bouton droit pour obtenir le menu contextuel.
4. Cliquez sur l'option Inspecter située en bas du menu. 
5. Le code HTML s'ouvrira, mettant en évidence le code de cet élément particulier.

Méthode 2 : Utilisation du raccourci clavier

En utilisant cette méthode, vous pouvez ouvrir le code HTML de la page Web entière. Cependant, l'ouverture directe du code d'un élément défini n'est pas disponible avec celui-ci.

1. Assurez-vous que le site Web ou la page Web préféré est ouvert dans Chrome.
2. Appuyez simultanément sur les touches Ctrl Maj I de votre clavier.
3. Le tiroir de la console s'ouvrira avec le code HTML.

Méthode 3 : Utilisation de la touche de fonction

Cette méthode est une autre méthode simple car elle ne nécessite qu'une seule frappe. Ouvrez simplement la page Web et appuyez sur la touche F12 pour ouvrir le code HTML correspondant. Basculez-le pour ouvrir et fermer l'outil Inspecter les éléments.

Méthode 4 : Utiliser le menu Chrome

Vous pouvez également accéder à l'outil Developer depuis le menu Chrome et vérifier les éléments d'un site Web.

1. Ouvrez n'importe quelle page Web sur Google Chrome.
2. Cliquez sur l'icône trois points dans le coin supérieur droit.
3. Lorsque le menu Chrome s'ouvre, passez la souris sur l'option Plus d'outils.
4. Déplacez lentement votre curseur vers l'option Developer Tool dans le sous-menu.
5. La page Inspecter les éléments s'ouvrira.

Remarque : Si vous utilisez Microsoft Edge, vous pouvez suivre les mêmes méthodes pour vérifier les éléments de la page Web.

Méthodes étape par étape pour inspecter les éléments sur Mozilla Firefox

Méthode 1 : Utilisation de la commande Inspect sur Firefox

Les utilisateurs de Firefox peuvent vérifier le code derrière n'importe quel élément de page Web HTML en utilisant cette approche.

1. Tout d'abord, vous ouvrez le site Web sur votre Firefox.
2. Cliquez avec le bouton droit tout en plaçant le curseur sur l'élément que vous souhaitez inspecter.
3. Un menu apparaîtra sur lequel vous devrez cliquer sur l'option Inspecter ou appuyer sur la touche Q.
4. Les deux feront apparaître l'outil Inspecter les éléments à l'écran.

Méthode 2 : Utilisation de la touche de fonction

Semblable à Chrome, Firefox affiche également l'outil Inspecter les éléments lorsque vous appuyez sur la touche F12. Pour fermer l'outil, vous devez appuyer à nouveau sur cette touche.

Kaedah 3: Menggunakan Menu Firefox

Firefox juga mempunyai alat Pembangun yang boleh digunakan untuk memeriksa elemen mana-mana halaman web.

1. Semasa berada di halaman web, klik pada ikon hamburger di penjuru kanan bar menu.
2. Apabila menu dibuka, klik pada pilihan Lagi alatan.
3. Klik pada Alat Pembangun Web di bawah bahagian Alat Penyemak Imbas.
4. Ini akan membuka kod HTML pada skrin anda.

Kaedah 4: Menggunakan Pintasan Papan Kekunci

Sama seperti Chrome, Firefox juga mempunyai pintasan papan kekunci untuk alat Inspect Elements.

1. Buka mana-mana halaman web pada Firefox.
2. Tekan Ctrl Shift C pada papan kekunci Windows anda.
3. Anda akan dapat melihat kod HTML lengkap halaman web tersebut.

Kesimpulan

Inspect Elements ialah alat yang bermanfaat bukan sahaja untuk pembangun tetapi juga untuk sesiapa sahaja yang ingin mengubah suai reka bentuk tapak web atau bereksperimen dengan rupa halaman web. Di sini, kami telah meneroka faedah dan kes penggunaan alat Inspect Element.

Kaedah teratas untuk memeriksa elemen dalam penyemak imbas web popular juga disebut di sini. Jadi, jika anda ingin memeriksa elemen HTML halaman web untuk kegunaan profesional atau menyeronokkan, anda boleh mencuba mana-mana pendekatan.

Atas ialah kandungan terperinci Bagaimana untuk Memeriksa Elemen dalam Chrome dan Firefox?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!