Es gibt mehrere Artikel auf Habré über nützliche Funktionen von Chrome Dev Tools, aber lassen Sie uns diese Liste in Bezug auf die Vorteile für Designer beenden, die das fertige Layout ihrer Layouts testen möchten.
Adaptiv anzeigen
Dies ist die nützlichste und bekannteste Funktion, aber ich kann es nicht übersehen. Sie können überprüfen, wie das Front-End Ihre Layouts für ein Mobiltelefon gerendert hat, indem Sie den Browser einfach in den Mobilmodus schalten. Es gibt vordefinierte Größen beliebter Mobilgeräte, und Sie können Ihre eigenen festlegen.
, . Edit .
, , - . , . . . , . Dev tools . , , . Animations , , , ( 25%). , — (opacity) (filter). ( Principle). .
, . , Sources, . , , .
— . - , , 3G. Dev Tools Network , , .
. , Contrast. , , . Dev tools , (WCAG). : — ; — ; — . Dev tools , . — .
. . . , (H, p, span, a .). . - ( ).
, . , Dev tools. Lighthouse Generate report . — -, SEO, .
, . .
- , . , VPN-, , - ; - , ; - , . Dev tools . , " " . , . , : 59.898092; 30.307113.
Damit diese Funktion funktioniert, müssen Sie der Site erlauben, Ihren Standort zu verfolgen. Seltsamerweise hat diese Funktion Google Maps ein wenig kaputt gemacht. Deshalb zeige ich im Beispiel Yandex Maps. Wenn diese Funktion in Google aktiviert war, verschwand die Schaltfläche "Mein Standort" auf der Karte einfach.
Wenn Sie standardmäßig kein Bedienfeld mit einer Auswahl an Positionen haben, öffnen Sie die Entwicklungswerkzeuge, drücken Sie Befehlstaste + Umschalttaste + P, ein Suchfeld wird geöffnet, und geben Sie Sensoren ein .