Inspecteer het doosmodel van een element eenvoudig met XRAY

Heb je ooit de exacte grootte van een bepaald element in een webpagina willen weten, zoals de opvulling, de marge, de positie enzovoort? Meestal kun je de info krijgen met behulp van een webinspectie-tool; de meeste browsers hebben ingebouwde hulpmiddelen om u te helpen dit te doen. Als alternatief kunt u Firebug gebruiken, wat ook een vrij populaire webtool is. Wanneer de zaken echter ingewikkeld worden, moet je misschien terugvallen op een tool als XRAY.

XRAY is een gratis hulpmiddel voor meerdere browsers waarmee u het boxmodel voor elk element van een webpagina rechtstreeks in uw browser kunt bekijken. In tegenstelling tot andere gecompliceerde webcontroletools, richt XRAY zich op het geven van volledige informatie over het doosmodel van het element.

Ermee beginnen

XRAY is een boekenlegger. Om het te gebruiken, sleept u XRAY naar uw bladwijzerbalk van uw favoriete browser. XRAY is beschikbaar voor IE6 +, Webkit- en Mozilla-gebaseerde browsers zoals Safari en Firefox.

Net als andere bookmarklets, kan XRAY niet werken als SSL-protocol (HTTPS) wordt toegepast .

Inspecterende elementen

Als u met de inspectie wilt beginnen, opent u de webpagina die u wilt inspecteren, controleert u of deze volledig is geladen en klikt u op de XRAY-bladwijzer. U krijgt een nieuw pop-upvak in uw browser. In dit vak wordt alle informatie weergegeven over het element dat u hebt geselecteerd.

Laten we mijn inspectie van de XRAY-startpagina als voorbeeld gebruiken. Stel dat ik de doosmodelinformatie van het volgende element wil weten.

Ik klik op XRAY in de bladwijzerbalk en selecteer het element. Dit geeft mij de naam, id, klasse, hiërarchie, positie, opvulling, rand en marge van het element .

Als u het vak wilt sluiten, drukt u op de X-knop in de rechterbovenhoek van het vak of ververs u uw pagina om het hulpprogramma te sluiten.

Laatste gedachte

Afgezien van zijn geavanceerde functie voor het inspecteren van doosmodellen, biedt XRAY u niet de informatie die algemeen beschikbaar is in andere webinspectietools, zoals de stijl of DOM . Hoe dan ook, het is nog steeds een zeer nuttige en eenvoudig te gebruiken tool voor dagelijks gebruik.

20 WordPress-plug-ins om categorie en tags te optimaliseren

Met de "Categorie" en "Tag" in WordPress, kunt u de inhoud in relatie tot elkaar organiseren. Dit zijn duidelijke functies die gebruikers meteen kunnen begrijpen. Maar als u WordPress al een tijdje gebruikt, weet u dat er altijd ruimte is voor verbetering.Als je iets met de Category en de Tag wilt doen, wat niet het ingebouwde hulpprogramma is, zou je het misschien in de volgende lijst kunnen vinden

(Technische en ontwerptips)

5 Hulpmiddelen om uw CSS-codes te controleren en optimaliseren

Zodra uw website begint te groeien, zal uw code dat ook doen . Naarmate uw code groter wordt, kan CSS ineens moeilijk worden onderhouden en kan het voorkomen dat u de ene CSS-regel met de andere overschrijft. Dit compliceert dingen en je zult waarschijnlijk eindigen met veel bugs.Als dit met u gebeurt, wordt het tijd dat u de CSS van uw site controleert

(Technische en ontwerptips)