Hoe kan ik een html-element inspecteren dat uit DOM verdwijnt bij verloren focus?

Ik probeer CSS-eigenschappen te inspecteren vanuit een invoer in een tabelcel. De invoer verschijnt bij klikken en verdwijnt bij verloren focus, zoals wanneer ik het probeer te inspecteren.
Hoe kan ik dit doen om de focus niet te verliezen terwijl ik naar een ander venster (de inspecteur) ga?


Antwoord 1, autoriteit 100%

Open in de Chrome-browser Developer Tools en selecteer Tabblad Elementen, en
open het contextmenu van het bovenliggende knooppunt van het element dat u wilt inspecteren, klik in het contextmenu op Break on> Aanpassingen in de substructuur.

Daarna hoef je alleen maar op de pagina te klikken en je komt in de inspecteur zonder de focus te verliezen of het element te verliezen dat je wilt inspecteren.

voer hier de afbeeldingsbeschrijving in


Antwoord 2, autoriteit 56%

U kunt het verdwijnende element vastleggen als u de uitvoering van JavaScript onderbreekt met een sneltoets zonder de muis te bewegen. Zo doet u dit in Chrome:

  1. Open Developer Tools en ga naar Bronnen.

  2. Let op de snelkoppeling om de uitvoering van het script te pauzeren: F8.

    Pauzeer scriptuitvoering

  3. Interactie met de gebruikersinterface om het element te laten verschijnen.

  4. Druk op F8.

  5. Je kunt nu je muis bewegen, de DOM inspecteren, wat dan ook. Het element blijft daar.

Deze truc werkt ook in Firefox en andere moderne browsers.


Antwoord 3, autoriteit 50%

Als al het andere faalt, typt u dit in de console:

setTimeout(() => { debugger; }, 5000)

Dan heb je 5 seconden (of verander de waarde in iets anders) om te laten verschijnen wat je wilt debuggen.

Geen van de andere antwoorden werkte voor mij – de DOM-structuur werd steeds gewijzigd (d.w.z. dingen waar ik om geef verdwenen) rechtsvoordat het script pauzeerde.


Antwoord 4, autoriteit 33%

In de instellingen van Chrome devtools is er een optie met de naam Emulate a focused page. Wat standaard is uitgeschakeld. Nadat u deze optie hebt ingeschakeld en u ergens in het devtool-venster klikt, zou de focus op geen enkel element in het DOM verloren gaan.

(Voor Chrome-versie < 86)

Ga naar devtool settings -> preferencesen onder de optie Global, schakel Emulate a focused pagein. Klik daarna op het element om te focussen en klik vervolgens ergens in het devtool-venster. Je zou zien dat dat element de focus niet verliest. U kunt nu dus eenvoudig inspecteren of debuggen.

voer hier de afbeeldingsbeschrijving in

UPDATE (Chrome-versie >= 86):

Na Chrome 86-update is deze optie verplaatst naar het tabblad Rendering. Het is niet langer beschikbaar in settings. Druk op Command+Shift+P(Mac) of Control+Shift+P(Windows, Linux) om het Command-menu te openen. Begin met het typen van Renderingin het Command-menu en selecteer Show Rendering. Daar kun je Emulate a focused pageinschakelen.

voer hier de afbeeldingsbeschrijving in


Antwoord 5, autoriteit 9%

Ik weet niet zeker of dit in jouw situatie werkt, maar normaal gesproken (en in elk geval het vermelden waard in dit opzicht omdat het een geweldige tool is) in Chrome Developer Tools kun je elementstatussen simuleren en een daarvan is ook :focus.

Ga hiervoor naar het tabblad Elementsin de Developer Tools en zorg ervoor dat u zich in het gedeelte Stylesaan de rechterkant bevindt (dit zou de standaardlocatie moeten zijn wanneer u start de Developer Tools). Nu heb je onder de stijlen in de rechterbovenhoek een pictogram Toggle Element State. Als u erop klikt, kunt u :active, :hover, :focusen :visitedvoor het element dat je links in je codeweergave hebt geselecteerd.

voer hier de afbeeldingsbeschrijving in


Antwoord 6, autoriteit 6%

In Chrome op de pagina met ontwikkelaarstools voor de te testen pagina… klik op het optiemenu en open instellingen voor voorkeuren… schakel onder DevTools ‘Emuleren van een gerichte pagina’ in

Laat vervolgens op de testpagina de elementen verschijnen. Dit werkte om ervoor te zorgen dat mijn pop-upzoekresultaten gefocust waren om op het scherm te blijven, zodat ik ermee kon werken.


Antwoord 7, autoriteit 5%

Geen echte oplossing, maar het werkt meestal(:

  1. Focus op het element
  2. Klik met de rechtermuisknop voor contextmenu
  3. Naar beneden gaan naar hulpprogramma’s voor ontwikkelaars

Inspectie focusbare invoer


Antwoord 8, autoriteit 2%

Ik had een zeer moeilijke situatie en geen antwoord werkte vanaf hier (ik heb de antwoorden niet geverifieerd door de container te wijzigen, wat de hoofdtekst voor mij is, of de oorspronkelijke gebeurtenis, omdat ik dat niet weet). Ik heb eindelijk een oplossing gevonden door te breken via de Control Event Listener Breakpoints in Chrome Inspector. Misschien is dat ook een cross-browser manier om te breken voor gecompliceerde situaties waarin zelfs F8 of rechtermuisknop de pop-up weer verbergt:

voer hier de afbeeldingsbeschrijving in


Antwoord 9

Klik rechts van element in chrome devtools 😉

voer hier de afbeeldingsbeschrijving in


Antwoord 10

Plak het volgende Javascript in de browserontwikkelaarsconsole:

// Delayed console log of parent element with disappearing child element(s)
// Once code is trigger, you have 3 seconds to trigger the hidden element before it snapshots.
// The hidden elements should appear in the console ready to inspect.
var timer = 3000; //time before snapshot
var parent_of_element_to_inspect = 'div.elementcontainer'; //container of element to snapshot
setTimeout(function(){
 console.log(document.querySelector(parent_of_element_to_inspect).cloneNode(true));
},timer);

Antwoord 11

Ik heb een snellere oplossing omdat ik niet zo goed ben in het gebruik van tools. Dit is wat ik doe.

event.originalEvent.preventDefault();
event.originalEvent.stopImmediatePropagation();
event.originalEvent.stopPropagation();

Antwoord 12

Als u Chrome DevTools opent en vervolgens de elementcontrole activeert met behulp van sneltoetsen, zou dit het probleem moeten oplossen.

Mac:Cmd+Opt+Jen dan Cmd+Opt+C

Windows:Ctrl+Shift+Jen dan Ctrl+Shift+C

[1]

Other episodes