Essentielles Inspect für Webentwickler | WordPress

1. Einführung in die Inspect Elemente:: Ich grüße alle. Ich bin Susan für sie. Und heute werden wir einige nützliche Tipps und Tricks mit dem Google Chrome Inspect Element lernen . Diese Bänder, Ich werde für jeden nützlich sein, aber vor allem diejenigen, die an der Website-Entwicklung arbeiten. Also hier ist, was enthalten ist. Wir werden schnell über die eingebaute Farbauswahl mit Inspect-Element lernen, keine Notwendigkeit für irgendwelche Chrome-Erweiterungen. Auch für viele funktioniert dieser Becher nicht, also werden wir lernen, sie zu reparieren. Also Webentwickler, hatten Sie Probleme, ID mit tiding-Elementen zu finden? Wir werden einen schnellen Trick lernen, wie Sie Inspect-Element auf sie verwenden können. Wir werden dann nun getäuschten Pass mit dem Inspect-Element finden. Und schließlich werden wir herausfinden, wie wir Text und Bilder von einer Live-Website ändern können. Verstehen Sie auch, wie die Daten mit diesen Werkzeugen manipuliert werden können. Daher ist das einzige Ziel dieses Kurses, Ihnen einige wichtige Informationen über Inspect Element zu geben und wie Sie sie verwenden können. Was werden Sie in diesem Kurs lernen? Dieser Kurs gibt Ihnen handverlesene nützliche Informationen über Google Inspect Element und wie Sie sie verwenden können während der Entwicklung Ihrer Website gibt Ihnen auch eine Cassius-Seite, dass nicht alles, was Sie im Internet vireo sehen. Also seien Sie vorsichtig. Welche Fähigkeiten oder Codierungskenntnisse sind für diese Lektion erforderlich. Alles in diesem Kurs ist klar erklärt. Alles, was Sie wissen müssen, ist, wie Sie Google Chrome verwenden. Wenn Sie ein Webentwickler sind, erhalten Sie außerdem eine Idee, CSS zu verwenden, einen zusätzlichen Vorteil. Fazit, nach diesem Kurs, sollten Sie eine Vorstellung über die Verwendung von inspect Element bekommen und wie es zu Ihrem mündlichen Design und Web-Entwicklung beitragen kann. Also lasst uns anfangen. 2. Nützliche Inspect und Tricks für Web-Entwickler: Grüße alle. In der heutigen Tutorial, werden wir schnell lernen, einige der nützlichen Tipps und Tricks zu verwenden Inspect Element. Dies kann für jeden sehr nützlich sein. Und wenn Sie in Website-Design sind, dann kann dies sehr praktisch sein. Also lasst uns anfangen. Zu Beginn. Lassen Sie uns unseren Browser öffnen. Also, wenn Sie etwas entwerfen oder die Farbe finden möchten, die Sie auf dem Bildschirm sehen, dann können Sie es mit inspect Element tun. Natürlich können Sie eine Chrome-Erweiterung dafür verwenden. Aber warum sich die Mühe machen, wenn wir einen eingebauten Farbwähler haben? Lassen Sie mich schnell nach einigen Farbsets suchen. Also hier sind die Optionen. Lassen Sie mich das abholen. Angenommen, ich möchte die Farben finden, die es verwendet, damit ich sie an mein InDesign anpassen kann. Um dies zu tun, einfach mit der rechten Maustaste und gehen Sie zu Inspect Element auf diesen Stilen. Wenn Sie irgendwelche Farben sehen, ist es in Ordnung. Wenn nicht, fügen Sie einfach Farbe und Weiß oder eine beliebige Farbe, wirklich spielt keine Rolle. Jetzt wird dies diesen Farbwähler bringen, klicken Sie darauf, und jetzt können Sie die Farbe finden. Klicken Sie hier und über die Farbe, die Sie verwenden möchten. Manchmal funktioniert das nicht, wie Sie sehen können, um diese Arbeit zu machen, müssen Sie diesen dunklen Abschnitt entweder nach links oder nach rechts nehmen. Um dies zu tun, klicken Sie hier, ich werde es auf die linke Seite nehmen und wieder klicken Sie auf diesen Farbwähler. Klicken Sie hier. Und Sie können sehen, dass es funktioniert. Wählen Sie eine beliebige Farbe aus. Sie finden die Higgs- und RGBA-Details und verwenden sie dann entsprechend. Dann können Sie einfach die Dunkelheit an der Unterseite bewegen. Dies funktioniert auf den meisten Websites. Lassen Sie mich schnell eine andere Seite überprüfen. Wie Sie sehen können, funktioniert es alles gut. Nun, wenn Sie ein Web-Entwickler sind und Sie müssen Inspect-Element verwenden , um die CSS-Änderungen vorzunehmen und vieles mehr. Aber manchmal ist es schwierig, CSS zum Verbergen von Elementen zu verwenden. Zum Beispiel, auf dieser Seite, wenn ich auf Musik klicke und wenn ich Änderungen an diesem Menü vornehmen möchte, und sobald ich auf Inspect Element klicke, verschwindet dies. Aber keine Sorge, wir können es pausieren und dafür das Werkzeug „Element prüfen“ verwenden. Gehen Sie zu George's und klicken Sie dann auf Ausblenden Menü und halten Sie Ihre Maus dort und drücken Sie F8. Nun, was passiert, ist, dass es den Bildschirm verursacht, wie Sie sehen können, und Sie können leicht dieses Inspect-Element verwenden. Also hier ist die Menü-ID und ich kann die notwendigen Änderungen vornehmen. Und nachdem Sie fertig sind, schließt sich einfach und alles wird ganz normal sein. Nun könnte eine weitere einfache Verwendung von Inspect Element sein, dieses gespeicherte Passwort zu finden. Angenommen, Sie haben sich auf einige Schritte eingeloggt und das Passwort vergessen. Dann mit Inspect-Element, können Sie das Passwort finden, das Sie verwendet. Zum Beispiel habe ich ein gespeichertes Passwort in diesem Brave-Browser, aber es funktioniert genau das gleiche auf Chrome als auch. Nehmen wir an, wenn ich auf diese Website gehe, können Sie sehen, dass es ein sicheres Passwort gibt. Nicht alle Websites werden diese Option haben. In diesem Fall können Sie einfach mit der rechten Maustaste klicken, überprüfen, hier klicken und Hoover dieses Kennwort ausführen. Jetzt im Eingabetyp, doppelklicken Sie auf Passwort und ändern Sie es in Text und Enter. So können Sie sehen, dass das Passwort offenbart wird. Dieser Trick konvertiert alle schwarzen Punkte in den Text. Zum Beispiel, wenn ich zu Facebook gehe und wenn es so gespeichert wird. Und Sie möchten das verwendete Kennwort finden, klicken Sie einfach mit der rechten Maustaste auf Inspect, übertreiben Sie das Kennwort und ändern Sie dann den Eingabetyp in Text. Und es wird funktionieren. Alles großartig. Jetzt der letzte Teil dieses Tutorials, kann es sehr praktisch sein, vor allem, wenn Sie ein Web-Entwickler sind oder suchen, um eine Website zu entwickeln. Dies kann auch verwendet werden, um einige Änderungen an einer Live-Website vorzunehmen und zu sehen, wie sie aussehen wird. Viele Entwickler verwenden Designs für ihre Website und bevor Sie sie kaufen, möchten Sie sehen, wie die Demo mit Ihrem eigenen Logo, Bildern und Text aussehen würde. Dies kann sehr nützlich sein, um es auch Ihrem Kunden zu zeigen. Gehen wir zum Thema Waldordinate als Beispiel und suchen Sie nach einem Thema. Moment werde ich es mit enfold versuchen. Hier ist ein Thema. Klicken Sie darauf. Und schauen wir uns die Live-Vorschau an. Nehmen Sie nun an, Sie möchten eine Website mit einem seiner Demos erstellen, oder Sie möchten, dass Ihr Kunde die Website gesehen hat? Lassen Sie mich eine Demo-Website auswählen. Okay, das hier. Die Seite sieht gut aus, aber ich möchte sehen, wie es mit meinen eigenen Bildern, Logo und Text aussehen wird. Dazu klicken Sie einfach mit der rechten Maustaste und gehen Sie zu Inspect. Wechseln Sie zur Konsole. Kopieren Sie diesen Code. Dies wird bereitgestellt und am unteren Rand und Eingabetaste eingefügt. Jetzt können Sie alle Ticks Änderungen auf dieser Website vornehmen. Schließen Sie das. Jetzt werde ich einige Änderungen am Text vornehmen. Nehmen Sie also alle Änderungen an den Texten der Website vor. Allerdings bitte, weil ja, während Sie Änderungen am Menü vornehmen, da es den Link öffnen könnte und alles aktualisiert wird. Also lasse ich es so, wie es ist. Nach dem Austausch. Sie können den oberen Teil entfernen. Zu Recht, Inspect Element. Klicken Sie hier, markieren Sie diese, alle. Klicken Sie hier, klicken Sie mit der rechten Maustaste und löschen Sie das Element. Jetzt ist es weg. Jetzt ersetzen wir es durch unser eigenes Logo. Ich möchte dieses Logo verwenden. Wenn Sie Ihre Bilder online haben, können Sie einfach die E-Mail-Adresse verwenden. Zum Beispiel werde ich mit der rechten Maustaste klicken und die Bildadresse kopieren. Klicken Sie hier und auf das Logo. Jetzt ist hier der genaue Link. Ersetzen Sie es durch Ihren eigenen Link und geben Sie ein. Ähnlich, um das Banner zu ändern, tun Sie das gleiche, müssen Sie wissen, wie Bilder und andere zu ersetzen. Um dieses Tool effektiv zu nutzen, müssen Sie möglicherweise eine Suche nach JPEG, PNG oder Web-API durch Drücken von Control plus F nachschlagen . Wie auch immer, ich verwende diese E-Mail als Banner. Kann dies online überall posten und erhalten Sie einen Link. Ich werde zu Snip Board Dot io gehen, Picker Datei. Sobald Sie hochgeladen haben, klicken Sie auf den Link und klicken Sie mit der rechten Maustaste auf die E-Mail und erhalten die URL. Kopieren Sie die Bildadresse und ersetzen Sie sie nun auf der Website. Da dies drei Banner hat, werde ich das gleiche für alle verwenden. Sie können dann den Screenshot machen und ihn Ihren Kunden zeigen. Oder kann es auch speichern. Drücken Sie einfach Control S auf der Tastatur unter Angabe eines Namens und speichern Sie. Diese Speicheroption ist jedoch möglicherweise nicht so effektiv. Es wird also empfohlen, einen Screenshot zu machen. Wie auch immer, das läuft vom C-Laufwerk, wie Sie sehen können. Lassen Sie mich alle Browser schließen. Und hier ist die gespeicherte als ML-Datei. Und es funktioniert alles gut mit unserem eigenen Logo und Bildern und Text. Sie können den gleichen Code auf jeder Ihrer Website verwenden und die notwendigen Änderungen vornehmen, bevor Sie tatsächlich am Back-End arbeiten. Also hoffe ich wirklich, dass all diese Tipps und Tricks hilfreich sind. Vielen Dank. 3. Text von Bildern von Websites mit einer Google Chrome-Erweiterung kopieren: Seid gegrüßt alle. Im heutigen Tutorial werden wir schnell etwas über eine Chrome-Erweiterung erfahren , die Text aus einer E-Mail kopieren kann , etwa diese. Beginnen wir mit der Verwendung der Chrome-Erweiterung. Wir können Text von Bildern von Websites kopieren. Bitte beachten Sie jedoch, dass es möglicherweise nicht auf allen Seiten funktioniert und möglicherweise nicht zu 100% korrekt ist. Wie auch immer, lasst uns unsere Seite öffnen. Lasst uns sowas lernen. Sie können sehen, dass dies eine E-Mail ist auch dies ist eine E-Mail und wir können keinen Text von ihnen kopieren. Um Text zu kopieren, google-Projekt nafta. Das ist der Richtige. Klicke drauf. Zu Chrome Add Erweiterung. Die Erweiterung wurde hinzugefügt. Du kannst es anheften, wenn du es hier sehen willst. Lassen Sie mich jetzt Chrome erneut öffnen und gehen Sie hier auf die Seite, lasst uns etwas lernen. Sie können sehen, ob dies farbig ist, das bedeutet, dass Daten auf der Website kopiert werden können. Du siehst, dass ich diesen Text kopieren kann. Lassen Sie es mich in den Notepad einfügen. Wie bereits erwähnt, ist der Kopiertext möglicherweise nicht so perfekt. Sie können es jedoch entweder manuell korrigieren oder Grammatik-Erweiterungen verwenden, um die erforderlichen Änderungen vorzunehmen. Hoffe, dieses Video ist nützlich. Vielen Dank. 4. So bearbeitest du den Text für die Website mit website’s und speicherst sie auf deinem PC: Grüße alle. Im heutigen Tutorial werden wir schnell beleuchtet, wie Menschen Inspect Element dauerhaft verwenden können, speichern Sie es bei dieser bestimmten BC AD Verkleidung Bildung. So etwas wie diese, wird dies Parramatta es zu diesem bestimmten Browser bleiben, es sei denn, Empfang oder Öffnen Inkognito-Modus. Also lasst uns anfangen. Also, um zu beginnen, lassen Sie uns einen Browser öffnen und Chrome-Erweiterung installieren. Suchen Sie einfach nach einem permanenten Inspect-Element. Das ist die Einzige. Klicken Sie darauf, um Chrome. Erweiterung hinzufügen. So wurde die Erweiterung hinzugefügt. Klicken Sie hier und seien Sie die Erweiterung. So ist es hier sichtbar. Sehen Sie, ob Sie nicht wirklich brauchen, wird die Erweiterung sowieso nicht sichtbar sein. Nun gehen wir auf unsere Beispiel-Website Richtung Cutler do.com. Das ist also die Website. By the way, können Sie mit jeder Website versuchen, die Sie wollen. Lassen Sie uns einige Änderungen am Text dieser Website für, dass, Recht bekam die Website, klicken Sie auf Inspect Element oder Konsole. Kopieren Sie diesen Code, der zur Verfügung gestellt wird Wärme hinzugefügt. Wenn Sie CSS kennen, können Sie das zu großen Änderungen am Farbtext verwenden. Es besucht sowieso eine subtrahieren, die die Konsole schließen. Jetzt mit dem früheren Code, können Sie keine Änderungen am Text, den Sie möchten, vornehmen. Nachdem Sie alle Änderungen vorgenommen haben oder mit der rechten Maustaste Inspect Element erhalten haben, gehen Sie zu COX-1. Kopieren Sie diesen Code erneut, und fügen Sie ihn ein. Ändern Sie nun den Wert „true“ in „false“. Bearbeiten und schließen Sie diese Konsole. Jetzt können Sie den Text dieser Website nicht ändern. Danach klicken Sie einfach auf diese Erweiterung. Klicken Sie auf „Zahlungen speichern“. Bitte klicken Sie ein paar Mal, um sicherzustellen, dass es gespeichert ist. Also sollte die Basis haben. Mal sehen, ob es funktioniert oder nicht. Aktualisieren Sie den Bereich. Sie können sehen, alle Änderungen im Text sind noch hier. Lassen Sie mich versuchen, es in einem anderen Fenster zu öffnen. Sie können immer noch alle Änderungen sehen, die vorgenommen wurden. Lassen Sie uns schnell facebook.com ausprobieren. Wie Sie sehen können, funktioniert es auf Facebook D2. Selbst wenn ich einen neuen Browser öffne, funktioniert es. Lassen Sie mich den Chrome-Browser schließen und ihn erneut öffnen. Facebook.com und Erosion Tasse und die dunklere. So können Sie sehen, dass alle Änderungen noch hier sind. Bitte beachten Sie jedoch, wenn Sie den Browser löschen oder den Inkognito-Modus öffnen, wird alles wieder in den ursprünglichen Zustand zurückkehren. Bedeutet dies im Grunde, dass es nur im Browser und auf Ihrem PC gespeichert wird und nicht auf anderen Computern reflektiert wird. Und wenn Sie es zurücksetzen möchten, klicken Sie einfach auf die Erweiterung und klicken Sie auf alle zurücksetzen und aktualisieren. Also wurde alles auf dem Raum zurückgekehrt. Sie müssen das Gleiche auch für andere Geschäfte tun. Und ein sehr wichtiger Hinweis, wir haben gesehen, dass viele Leute diesen Trick zum Nähen von Feigen, YouTube-Formulierungen und anderen Affiliate-Einnahmen verwenden . Also bitte beachten Sie, bevor Sie einen ägyptischen machen, da es sehr einfach ist, ausgetrickst zu werden. Wie auch immer, wir hoffen, dass Sie etwas Neues gelernt haben. Vielen Dank. 5. So erstellst du chrome und änderst die dock: Seid gegrüßt alle. In diesem Video erfahren wir schnell, wie Sie die Chrome Developer Tools zurücksetzen oder auf die Standardeinstellungen zurücksetzen oder wiederherstellen können . Und da werden wir die dunkle Position bewegen. Im Grunde kannst du deine Dunkelheit nach rechts, unten, links bewegen und sogar das Abdocken sind getrennt. Also lasst uns anfangen. sich das Dave-Tool-Setup aus irgendeinem Grund Wenn sich das Dave-Tool-Setup aus irgendeinem Grund geändert hat, können Sie es einfach auf den Standardwert zurücksetzen. Dafür. Lassen Sie mich Chrome öffnen, klicken Sie mit der rechten Maustaste und gehen Sie zu Inspect, markieren Sie eine beliebige Stelle im Tool und drücken Sie F1 auf Ihrer Tastatur. Scrollen Sie nun nach unten und Sie sehen die Standardeinstellungen des Restaurants und laden Sie es neu, klicken Sie darauf. Und Ihre DevTools sind jetzt auf die Standardeinstellungen zurückgesetzt. Sie können auch die Position der Chrome Developer Tools ändern. Klicke auf diese drei Punkte und wähle aus, wo du im Dunkeln bleiben möchtest. Derzeit ist es in der richtigen Position. Dies gibt unten die Dunkelheit. Dies bleibt die Dunkelheit nach links oder klicken Sie hier, um die Dunkelheit zu trennen. Wie auch immer, ich würde es gerne am Ende dieser Läsion halten, war nützlich. Vielen Dank. 6. Beispiel der Verwendung von Inspect in YouTube: Ich grüße alle. Bevor ich irgendetwas beginne, lass mich schnell zu unserem YouTube-Kanal gehen. Hey, lasst uns etwas lernen. So hier können Sie die Einnahmen sehen, die Einnahmen für den Monat Mai, falls Sie Zweifel haben. Lassen Sie mich es schnell umformulieren. Also hier ist es. Was auch immer du hier gesehen hast, war eine Lüge. Also im Grunde, das einzige Ziel dieses Tutorials ist wo jeder und machen Sie verstehen, dass nicht alles, was Sie online sehen Israel, aber natürlich gibt es viele echte Menschen, die sehr wahr sind. Wie auch immer, ich werde zeigen, wie es mit Inspect-Element gemacht wird. Lasst uns loslegen. Wie Sie wissen müssen, bietet Google Chrome viele div-Tools, und einer von ihnen ist Inspect-Element. Ich kann mit der rechten Maustaste klicken und das Element inspizieren. Und das funktioniert auf den meisten Seiten. Wenn ich zur Konsole gehe und diesen Code kopieren und am unteren Rand eingefügt und dieses Element eingeben und schließen. Nun, alles auf dieser Website ist editierbar. Sie können alle notwendigen Änderungen vornehmen und dann können Sie es einfach als Screenshot oder als Video anzeigen. Nun, um zu zeigen, dass es authentisch ist , vor allem im Video, ich verweise es wieder und mache schnell alle Änderungen wie diese. Und später auf dem Video-Editor bearbeitet. Bitte beachten Sie, dass ich die Einnahmen für diesen Kanal ohnehin schon geändert hatte. Jetzt sieht das wirklich echt aus, nicht wahr? Dieser Inspect Element Trick funktioniert auf den meisten Websites. Lassen Sie uns unsere Website öffnen. Lasst uns mal was lernen. der rechten Maustaste und gehen Sie zum Inspect-Element, gehen Sie zur Konsole und kopieren Sie diesen Code und fügen Sie den Code ein. Jetzt können Sie Änderungen am Text der Website vornehmen. So könnten die Leute online Sie verwirren. Also seien Sie nur ein wenig Kosten Jahre von dem, was Sie online sehen. Aber seien Sie vorsichtig. Ich hoffe wirklich, dass der Bezirk interessant war. Vielen Dank.