Heute bin ich auf ein interessantes Problem gestoßen, bei dem ich mehr über das Debuggen in Chrome erfahren habe. Ich möchte mit Ihnen teilen (plötzlich, wer wusste es nicht). Das auftretende Problem war nicht kompliziert, stellte sich jedoch als nicht besonders trivial heraus.
Im Allgemeinen sitze ich da und ziehe ein Layout eines Drittanbieters für die Site bereit (dieser Moment ist wichtig, da das Problem von dort aus aufgetreten ist und ich nicht dafür bereit war). Und auf der Seite wollte ich den Text in den bearbeitbaren Bereich eingeben, der mit dem Attribut contenteditable = true versehen ist. Und so habe ich es hundertmal gemacht und alles war in Ordnung, aber hier passiert eins, zwei und nichts ... Und visuell hat sich das Element im Zustand geändert: Fokus. Nun, ich denke etwas mit Stilen, jetzt werde ich schnell Entwickler-Tools finden, die helfen. Ich habe Entwickler-Tools entdeckt und ... und nichts gefunden ... Seltsam. Ich habe eine andere Site mit der gleichen Funktionalität in einer anderen Registerkarte geöffnet. Dort funktioniert alles. Vergleichen wir Verschachtelung und Stile. Eins zu eins.
Im Prinzip sagt der Titel, worauf ich gestoßen bin, aber wenn Sie Details und eine Lösung benötigen, bitte ich um einen Schnitt, es wird nicht viele Buchen geben, sondern in einem kurzen Video und ein wenig Text.
Im Allgemeinen nahm ich natürlich an, dass es eindeutig etwas mit dem Element im Zustand gab: Fokus, aber interessanterweise änderte sich nichts, obwohl ich das Element in Entwicklungswerkzeugen in diesen Zustand zwang. Als ich jedoch zum Bearbeiten des Elements wechselte (der Cursor befand sich innerhalb des Tags), sah ich, dass das Pseudoelement: before in der Stilleiste angezeigt wird. Aber ich konnte es nicht sehen, weil ich dafür mit der Maus darauf klicken musste, was bedeutet, dass ich den Fokus vom Tag entfernen würde, wodurch der Fokus verschwinden würde und dementsprechend das Pseudoelement: vorher auch. Genau wie ein Hund, der seinen Schwanz jagt.
Und dann entdeckte ich Debugging und Brickpoints. Das heißt, wir fügen dem HTML-Element einen Brickpoint hinzu, um den Teilbaum zu ändern und den Fokus zu erzwingen. Gewinn Erscheint: vor und das Dokument friert ein. Sie können sicher alles studieren. Hier ist ein kurzes Video, wie es war:
Das war's, ziemlich schnell wurde das Problem gefunden und behoben.
PS: Wenn jemand daran interessiert ist, um welche Art von Editor es sich im Video handelt, habe
ich kürzlich über ihn geschrieben .