هناك العديد من المقالات على Habré حول الميزات المفيدة لأدوات Chrome Dev ، لكن لننهي هذه القائمة من حيث الفوائد للمصممين الذين يرغبون في اختبار التخطيط النهائي لتخطيطاتهم.
مشاهدة ملف Adaptive
هذه هي الوظيفة الأكثر فائدة ومعروفة ، لكن لا يسعني إلا أن أذكرها. يمكنك التحقق من كيفية عرض الواجهة الأمامية لتخطيطاتك لهاتف محمول ببساطة عن طريق تبديل المتصفح إلى وضع الهاتف المحمول. هناك أحجام محددة مسبقًا للأجهزة المحمولة الشائعة ويمكنك تعيينها بنفسك.
, . 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.
ولكن لكي تعمل هذه الميزة ، يجب أن تسمح للموقع بتتبع موقعك. الغريب أن هذه الميزة كسرت خرائط Google قليلاً. هذا هو السبب في أنني أعرض خرائط Yandex في المثال. في Google ، عند تشغيل هذه الوظيفة ، اختفى زر "موقعي" على الخريطة ببساطة.
إذا لم يكن لديك بشكل افتراضي لوحة مع اختيار الموقع ، فافتح أدوات Dev ، واضغط على Command + Shift + P ، وسيفتح مربع بحث ، وأدخل أجهزة الاستشعار فيه .