Měření vzdáleností vám umožní kliknout na libovolné dva elementy na webové stránce a okamžitě vidět přesnou pixelovou vzdálenost mezi nimi — horizontálně (X), vertikálně (Y) a diagonálně. Mezi elementy se zobrazí vizuální spojovací čáry s označenými měřeními a informační lišta ukazuje rozměry obou elementů a vzdálenosti ve všech třech směrech.
Kontrola mezer mezi dvěma elementy v DevTools prohlížeče vyžaduje najetí myší na každý element zvlášť, čtení hodnot margin/padding a mentální matematiku pro výpočet skutečné vizuální vzdálenosti. Měření vzdáleností toto zcela eliminuje. Klikněte na Element A, klikněte na Element B a přesné pixelové vzdálenosti se okamžitě zobrazí — X (horizontální), Y (vertikální) a diagonální — jako označené čáry spojující oba elementy přímo na stránce. Nástroj měří od okrajů elementů (ohraničující obdélníky), takže hodnoty představují skutečnou vizuální mezeru mezi elementy, jak ji vidí uživatel. To se liší od čtení hodnot margin/padding, které nezohledňují kumulativní efekt více vlastností mezer. Každý vybraný element je zvýrazněn barevným rámečkem a zobrazuje vlastní rozměry (šířka × výška), takže vidíte jak velikosti elementů, tak mezery mezi nimi v jednom pohledu.
Klikněte na první element (zvýrazněný modrým rámečkem), poté klikněte na druhý element (zvýrazněný zeleným rámečkem). Vzdálenosti mezi jejich ohraničujícími obdélníky se okamžitě vypočítají a zobrazí. Žádné přetahování, žádný ruční vstup — jen dvě kliknutí.
Podívejte se na horizontální vzdálenost (X), vertikální vzdálenost (Y) a diagonální vzdálenost současně — každá zobrazena vlastní barevně označenou měřicí čárou a popiskem. X jantarově, Y červeně, diagonální fialově.
Přerušované měřicí čáry spojují oba vybrané elementy přímo na stránce, s popisky vzdáleností umístěnými v středu každé čáry. Vizuální reprezentace okamžitě objasňuje, co se měří.
Každý vybraný element zobrazuje vlastní rozměry šířka × výška v malém popisku. To vám umožní vidět jak velikosti elementů, tak mezery mezi nimi ve stejném pohledu — bez přepínání nástrojů.
Kliknutím na nový pár elementů okamžitě aktualizujete měření. Není třeba nástroj deaktivovat a znovu aktivovat. Předchozí měřicí čáry jsou nahrazeny novými pro nový pár elementů.
Trvalá informační lišta ve spodní části výřezu zobrazuje kompaktní souhrn: názvy a rozměry obou elementů a všechny tři hodnoty vzdáleností (X, Y, diagonální). Připraveno ke kopírování pro vkládání do hlášení chyb nebo designové zpětné vazby.
Návrh říká, že tlačítko by mělo být 24 px pod nadpisem. Klikněte na nadpis, klikněte na tlačítko a potvrďte, že vzdálenost Y je přesně 24 px. Zachytí jemné nesrovnalosti mezer, které jsou pro oko neviditelné, ale jsou specifikovány v designových tokenech.
Změřte vzdálenost mezi Kartou 1 a Kartou 2, poté mezi Kartou 2 a Kartou 3. Pokud mezery nejsou identické, našli jste nekonzistenci — pravděpodobně způsobenou odlišnými okraji nebo problémem s mezerou flexboxu.
Změřte vzdálenosti elementů při šířce desktopu, poté změňte velikost prohlížeče a měřte znovu při šířce mobilu. Ověřte, že mezery se správně škálují napříč breakpointy a že responzivní úpravy margin/padding fungují podle návrhu.
Zahrňte přesná měření do hlášení chyb: Mezera mezi navigací a hero oblastí je 47 px, měla by být 32 px podle specifikace návrhu. Hodnoty z informační lišty lze zkopírovat přímo do tiketů Jira nebo problémů GitHub.
Klikněte na dva elementy, které by měly být horizontálně zarovnány. Pokud je vzdálenost Y 0 px, jsou dokonale zarovnány. Jakákoli nenulová hodnota Y indikuje vertikální nesrovnalost — přesné číslo vám říká, o kolik pixelů se jedná.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Měření vzdáleností. Kurzor se změní na nitkový kříž, což signalizuje, že můžete vybrat první element.
Klikněte na libovolný element na stránce. Je zvýrazněn modrým rámečkem a označen jako Element A s rozměry (šířka × výška v pixelech).
Klikněte na druhý element. Je zvýrazněn zeleným rámečkem a označen jako Element B. Měřicí čáry se okamžitě zobrazí a spojí oba elementy.
Zobrazí se tři měřicí čáry: horizontální (X) jantarově, vertikální (Y) červeně a diagonální fialově. Každá čára má popisek zobrazující pixelovou vzdálenost. Informační lišta ve spodní části shrnuje všechny hodnoty.
Klikněte na jiný pár elementů pro okamžité měření nové vzdálenosti. Klikněte na ikonu Měření vzdáleností v doku pro deaktivaci nástroje po skončení.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
