Lesezeichen sind JavaScript-basierte Lesezeichen, die einem Webbrowser hinzugefügt werden können. Dieser Artikel zeigt Ihnen einige leistungsstarke Browser-Tipps, mit denen Sie Ihren Webentwicklungs-Workflow und die Umwandlung dieser Tipps in zeitsparende Lesezeichen-Widgets verbessern können.
Designmuster (Stil mit DesignMode Da es sich um eine JavaScript-Eigenschaft handelt) eignet sich für Personen, die gerne mit unterschiedlichen Kopienänderungen auf Echtzeit-Websites experimentieren. Zum Beispiel ein Texter, der gerne den Effekt des Lesens von Inhalten in einem Website -Designprozess beobachtet, oder ein Designer, der sicherstellen möchte, dass der Text bequem in einen bestimmten Bereich an einer bestimmten Schriftgröße passt.
JavaScript hat eine sehr einfache Funktion, die das gesamte HTML -Dokument bearbeitbar macht. Es funktioniert genauso wie das inhaltliche = "True" -Name -Wert -Attribut des HTML (oder inhaltlich in JavaScript), funktioniert jedoch im gesamten Dokument. Wenn Sie verstehen möchten, wie es funktioniert, verwenden Sie zunächst die entsprechenden Tastaturverknüpfungen, um die Konsole des Browsers zu öffnen:
Geben Sie als Nächstes document.designMode="on" in der Konsole, drücken Sie die Rückgabe und klicken Sie dann auf ein beliebiges Textelement. Sie werden sehen, dass Sie diese Textelemente (und alle anderen Textelemente) bearbeiten können, indem Sie einfach darauf klicken. Diese Art der Bearbeitung von Text auf einer Live-Website ist viel schneller und weniger Anstrengung als das Öffnen von Devtools, mit der rechten Maustaste und der Auswahl der Option "Text" bearbeiten.
Ich bin mir zwar nicht sicher, ob "Designmuster" die genaueste Beschreibung der Funktion ist, aber es ist immer noch sehr nützlich und überraschenderweise gibt es es schon lange.
Wie können Sie dies schneller ermöglichen? Natürlich ist es ein Lesezeichen -Gadget! Erstellen Sie ein Lesezeichen mit javascript: document.designMode="on";void 0;
Wenn HTML -Elemente keinen Hintergrund haben, ist es schwierig, ihre Grenzen zu visualisieren und/oder ihren Abstand von anderen Elementen genau zu messen. Entwickler müssen möglicherweise Grenzen besser visualisieren, wenn sie sich mit visuellen Ungleichgewichten befassen (d. H. Auch wenn etwas "falsch aussieht", aber eigentlich nicht der Fall ist), Randfalten (ignorieren bestimmte Ränder), verschiedene Displays:/float:/Position: Probleme usw.
Das Anwenden von Hintergrund bedeutet, einen durchscheinenden Hintergrund für alle HTML -Elemente anzuwenden, um ihre Grenzen und ihren Abstand besser zu visualisieren. Viele von uns tun dies normalerweise, indem sie Devtools öffnen und eine CSS -Anweisung wie selector { background: rgb(0 0 0 / 10%); } in der Style -Box eingeben. Dies ist jedoch immer noch sehr mühsam und wiederholt - wir können das Lesezeichen -Widget verwenden, um es zu vereinfachen.
Um ein Lesezeichen zu erstellen, werden wir eine URL erstellen. Hier ist, was wir dafür verwenden können:
JavaScript: document.querySelectorAll ("*"). foreach (element => element.style.background = "RGB (0 0 0/10%)");Wir verwenden einen durchscheinenden Hintergrund, da Transparenz überläuft, was sicherstellt, dass jedes verschachtelte Element unterscheidbar ist und der Abstand zwischen ihnen gemessen werden kann.
Müssen Sie jemals ein Web -Ereignis testen, das zunächst eine Reihe von Interaktionen erfordert oder bestimmte Bedingungen erfüllt? Das Testen oder Debuggen dieser Art von Funktionen ist zeitaufwändig. Mit diesem Ereignissimulations -Lesezeichen kann Widget verwendet werden, um bestimmte Ereignisse sofort auszulösen, wodurch das Testen zum Kinderspiel wird.
Das Simulieren von Ereignissen bedeutet, eine "temporäre" Taste zu schreiben, um JavaScript -Ereignisse auszulösen, sodass es einfacher ist, Ereignisse schnell und wiederholt zu testen, ohne dass die Bedingungen der gängigen Benutzeroberflächen wie Anmeldung erforderlich sind.
Angenommen, Sie haben einen JavaScript -Ereignis -Listener eingerichtet, erstellen Sie ein Lesezeichen für jedes Ereignis, das Sie auslösen oder verspotten möchten und die folgende URL einreichen:
JavaScript: document.querySelector ("Selector"). Click ();Ersetzen Sie "Selektor" durch Ihren einzigen Selektor, ersetzen Sie "Klicken" durch "Fokus" oder "Blur" (falls erforderlich) oder erweitern Sie das Code -Snippet, um komplexere Ereignisse wie Scrollen auszulösen.
Ein Cookie ist ein Token, das von einem Website -Besucher auf dem Computer des Website -Besuchers gespeichert ist. Cookies enthalten Daten, die von der Website gelesen werden können, auf der sie erstellt werden, bis sie ihr Ablaufdatum überschreiten oder gelöscht wurden. Die Existenz eines Cookie selbst bestimmt, ob der Besucher angemeldet ist, während die Daten selbst Benutzerinformationen speichern können.
Ein Beispielszenario, in dem Sie Cookies mithilfe des Lesezeichen -Widgets einstellen möchten, ist, wenn Sie sich während eines Website -Testzeitraums Anmeldung erzwingen möchten. Websites sehen normalerweise ganz anders aus, wenn sie angemeldet sind und nicht angemeldet sind, aber das Anmeldung und Anmeldung kann sehr umständlich sein, sodass dieses Lesezeichen -Widget viel Zeit sparen kann.
Das Schreiben von Ablauf = Daten für Cookies manuell ist sehr problematisch, aber zum Glück erstellt dies Ihre eigenen Einstellungen Cookie -Lesezeichen Widget -Anwendung kann Lesezeichen für bestimmte Cookies generieren, wenn Sie den genauen Namen kennen.
Möglicherweise möchten Sie HTML -Elementen Klassen hinzufügen oder löschen, um einen neuen Status- oder Erscheinungsänderungswechsel auszulösen, der auch als Toggle -Klasse bezeichnet wird. Klassenschalter treten hinter den Kulissen der meisten Live -Websites auf, können aber auch verwendet werden, um die Bedingungen der Benutzeroberfläche während des Testens zu überspringen.
Klassenschaltungen können verwendet werden, um Änderungen des Erscheinungsbilds (z. B. alternative Themen oder Zustände) oder sogar Animationen auszulösen. Die Verwendung von Entwickler -Tools kann jedoch etwas schwierig sein, wenn dies nur zu Testzwecken der Fall ist (d. H. Die Website läuft nicht auf diese Weise für Benutzer). Ähnlich wie bei anderen Lesezeichen -Widgets kann dieses Lesezeichen -Widget die Klassen schnell wechseln und Zeit sparen.
Erstellen Sie das folgende Lesezeichen -Widget, um alle Elemente zu lokalisieren, die dem Selektor Ihrer Wahl entsprechen, was wiederum "Klasse" umschaltet.
JavaScript: document.querySelectorAll ("Selector"). foreach (element => element.classlist.toggle ("Klasse"));Obwohl es technisch gesehen kein "Lesezeichen -Gerät" ist, eröffnet dieses Lesezeichen von Scott Jehl einen neuen Tab:
Also, hier ist meine neue Farbpicker -App! Es ist nur eine HTML -Farbeingabe, die im Data URI enthalten ist, sodass ich sie mit einem Lesezeichen versehen kann. (Sie können es selbst hinzufügen):
data:text/html;charset=utf-8, <title>Color Picker</title> <input type="color">
Warum ist das cool? Wie oft benötigen Sie, um den Farbwert von der Seite zu erhalten, nur um sich zu finden, um Devtools zu öffnen, auf eine Reihe von Elementen zu klicken und die CSS-Eigenschaften zu überprüfen, um diesen Wert zu finden? Es ist besser, dieses Gerät auszuführen, auf das Element zu klicken und die Farbe sofort zu erhalten!
Gibt es übermäßig doppelte Webentwicklungsworkflows, die manchmal umständliche Entwickler -Tools erfordern, die Sie mit Ihrem Webbrowser verwenden? Wenn ja, ist es sehr einfach, Ihr eigenes zeitsparendes Lesezeichen-Widget zu erstellen. Denken Sie daran, mit javascript:
Wenn Sie ein Lesezeichen -Widget erstellt haben, um Ihren Workflow zu vereinfachen, würde ich es gerne sehen! Bitte teilen Sie sie in den Kommentaren und lassen Sie uns eine schöne Sammlung erstellen.
Das obige ist der detaillierte Inhalt von6 nützliche Lesezeichen zur Steigerung der Webentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Lösung für fehlgeschlagenes WIN10-Update
Was sind die vier wichtigsten IO-Modelle in Java?
So lösen Sie internalerror0x06
So formatieren Sie die Festplatte unter Linux
Verwendung der Isalpha-Funktion
Was ist der Unterschied zwischen PHP5 und PHP7?
Wo ist der Prtscrn-Button?
Java-Syntax für reguläre Ausdrücke
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
