11 نصيحة لمن يستخدمون Chrome كبيئة تطوير.
لذلك ، لسبب أو لآخر ، قررت التركيز على Chrome عند التطوير. تفتح أدوات المطور وتبدأ في تصحيح التعليمات البرمجية الخاصة بك.
في بعض الأحيان تفتح وحدة التحكم لرؤية مخرجات البرنامج ، أو علامة تبويب العناصر للتحقق من أنماط CSS لعناصر DOM.
هل أنت جيد حقًا في Chrome DevTools؟ في الواقع ، تحتوي أدوات المطور على العديد من الميزات القوية التي تجعل الحياة أسهل ، لكن قلة من الناس يعرفون عنها.
سوف أخبرك عن أكثرها فائدة.
لنبدأ بالنظر في قائمة الأوامر. قائمة الأوامر في Chrome تشبه الأمر shell في Linux. في ذلك ، يمكنك كتابة أوامر للتحكم في Chrome.
افتح أدوات مطوري Chrome. للوصول إلى قائمة الأوامر ، استخدم مفاتيح الاختصار:
- الويندوز ： Ctrl + Shift + P.
- macOS ： Cmd + Shift + P.
يمكنك أيضًا فتحه من خلال واجهة رسومية ، مثل هذا:
في هذه المنطقة يمكنك رؤية قائمة طويلة من الأوامر التي تتيح لك الوصول إلى العديد من الوظائف المفيدة.
ميزات لقطة الشاشة المتقدمة
عليك أن تأخذ لقطات شاشة لجزء من الشاشة في كثير من الأحيان ، وليس لدي أدنى شك في أن البرامج المناسبة مثبتة على جهاز الكمبيوتر الخاص بك لهذا الغرض. هل يمكنهم:
- التقاط لقطة شاشة للصفحة بأكملها ، بما في ذلك المحتوى خارج إطار العرض؟
- الاستيلاء على محتوى عنصر DOM واحد؟
تنشأ مثل هذه الحاجة في كثير من الأحيان ، ولكن معظم أدوات النظام لالتقاط لقطات الشاشة لا تتعامل مع هذه المهام. لحسن الحظ ، خصصنا أوامر Chrome لالتقاط لقطات شاشة مثل هذه.
ها هم:
- لقطة شاشة لقطة شاشة بالحجم الكامل
- لقطة شاشة لقطة لقطة لقطة للشاشة
مثال
افتح أي صفحة ويب ، مثل مقالات JavaScript الأكثر شيوعًا على Medium: medium.com/tag/javascript .
افتح قائمة الأوامر وقم بتشغيل الأمر
Screenshot Capture full size screenshot.
أخذنا لقطة للصفحة الحالية بأكملها ككل.
تتميز لقطة الشاشة الأصلية بجودة جيدة ، ولكن هنا قمت بتحميل صورة مضغوطة لحفظ عرض النطاق الترددي الخاص بك.
إذا كنت تريد التقاط لقطة شاشة لعنصر DOM ، فيمكنك استخدام أدوات النظام ، لكنها لن تتمكن من التقاط العنصر بدقة كاملة. Chrome لديه أمر مخصص لهذا الغرض
Capture node screenshot.
افتح أولاً علامة تبويب العناصر وحدد العنصر المطلوب. ثم قم بتشغيل الأمر.
ها هي النتيجة:
باستخدام نتيجة العملية الأخيرة في وحدة التحكم
غالبًا ما نقوم بتصحيح التعليمات البرمجية في وحدة التحكم. لنفترض أنك تريد معرفة كيفية عكس سلسلة في JavaScript. أنت تبحث عن المعلومات التي تحتاجها على الإنترنت ، وقد صادفت هذا الجزء من الكود. نعم ، هذا الرمز يعكس الخط. ولكنك ليس من الواضح حتى الآن كيف يعمل الطريقة ، ، وماذا كانت النتيجة يعطي كل واحد منهم. يمكنك المرور عبر هذا الرمز خطوة بخطوة عن طريق كتابته شيئًا كالتالي: الآن نحن نعرف القيمة التي ترجعها كل طريقة. لكن لماذا تكتب كثيرا؟ من السهل ارتكاب خطأ في مثل هذا السجل الطويل ومن الصعب فهمه. دعني أخبرك بسر: يوجد متغير سحري في وحدة التحكم يخزن نتيجة العملية الأخيرة.
'abcde'.split('').reverse().join('')
split()reverse()join()
$_
$_هو متغير خاص قيمته تساوي دائمًا نتيجة آخر عملية تم إجراؤها في وحدة التحكم. هذه الحيلة تجعل تصحيح الأخطاء أسهل كثيرًا.
إعادة إرسال طلب XHR
في مشاريع الواجهة الأمامية ، غالبًا ما تحتاج إلى استخدام XHR لإرسال طلبات لتلقي البيانات من الخادم. ماذا لو احتجت إلى إعادة إرسال طلبي؟
يقوم المطورون عديمي الخبرة بتحديث الصفحة ، لكن هذا غير مريح للغاية. في Chrome ، يمكننا تصحيح التعليمات البرمجية مباشرة من علامة تبويب الشبكة.
- افتح علامة التبويب الشبكة.
- اضغط على زر XHR.
- حدد طلب XHR الذي تريد إعادة إرساله.
- حدد إعادة تشغيل XHR من قائمة السياق لإعادة الطلب.
هذا مثال متحرك:
تتبع حالة تحميل الصفحة
قد يستغرق تحميل الصفحة بالكامل أكثر من عشر ثوانٍ. في مثل هذه الحالات ، تحتاج إلى التحكم في عملية تحميل الصفحة في كل مرة على حدة.
في Chrome DevTools ، يمكنك التقاط لقطات شاشة لصفحة أثناء تحميلها عن طريق تحديد المربع الموجود بجوار
Capture Screenshotsعلامة التبويب "الشبكة".
حدد لقطة الشاشة لعرض معلومات حول طلبات الشبكة المقابلة. يمنحك هذا التصور فهمًا أفضل لطلبات الشبكة التي يتم إرسالها إلى الخادم في نقاط زمنية محددة.
نسخ المتغيرات
هل تعرف كيفية نسخ قيمة متغير JavaScript إلى الحافظة؟
تبدو مهمة مستحيلة ، لكن Chrome يوفر وظيفة خاصة لحلها
copy.
لا يحتوي ECMAScript على تعريف لوظيفة النسخ ، فهي إحدى وظائف Chrome. يمكن استخدامه لنسخ قيمة متغير JavaScript إلى الحافظة.
نسخ صورة كمعرف URI مع بادئة "data:"
هناك طريقتان لإدراج صورة في الصفحة: يمكنك الارتباط بملف خارجي ، أو يمكنك تضمين صورة باستخدام البيانات: URL .
البيانات: URL ( عنوان URL المسبق
data:) هو نظام يسمح بتضمين الملفات الصغيرة في مستند كعناصر مضمنة. كان يطلق عليه "data: URI" ، لكن WHATWG أسقط هذا الاسم.
تضمين الصور الصغيرة مباشرة في البيانات: يقلل نظام URL من عدد طلبات HTTP إلى الخادم ، مما يجعل تحميل الصفحة أسرع.
كيف أفعل ذلك في Chrome؟
شاهد الرسوم المتحركة:
إخراج مجموعة من الكائنات إلى جدول
لنفترض أن لدينا مجموعة من العناصر:
let users = [{name: 'Jon', age: 22},
{name: 'bitfish', age: 30},
{name: 'Alice', age: 33}]
من الصعب إدراك مثل هذه المعلومات في وحدة التحكم. وإذا كانت المصفوفة أطول وتحتوي على عناصر أكثر تعقيدًا ، فإن الضياع فيها يكون أسهل.
لحسن الحظ ، يحتوي Chrome على وظيفة تقوم بإخراج مجموعة من الكائنات إلى جدول.
سيكون مفيدا لك ، وأكثر من مرة.
السحب على علامة تبويب العناصر
تحتاج أحيانًا إلى نقل بعض عناصر DOM على الصفحة لاختبار واجهة المستخدم. في علامة التبويب "العناصر" ، يمكنك سحب أي عنصر HTML إلى أي مكان في الكود:
في هذا المثال ، قمت بسحب عنصر في علامة التبويب "العناصر" ، وتغير موضعه على صفحة الويب أيضًا على الفور.
الرجوع إلى العنصر المحدد حاليًا في وحدة التحكم
$0 هو متغير سحري آخر يحتوي على العنصر المحدد في علامة تبويب العناصر.
تنشيط فئات CSS الزائفة
تسمح لك الفئات الزائفة بتصميم عنصر ليس فقط بناءً على موقعه في شجرة المستند ، ولكن أيضًا اعتمادًا على عوامل خارجية مثل محفوظات الاستعراض (على سبيل المثال : تمت زيارته ) ، وحالة المحتوى (على سبيل المثال : محدد في بعض النماذج) ، وموضع المؤشر الماوس (على سبيل المثال ، تغير فئة: hover pseudo- نمط العنصر عندما تحوم فوقه).
يمكن كتابة عدة فئات زائفة لعنصر واحد. لتسهيل اختبار الأنماط ، يمكن تنشيط الفئات الزائفة مباشرةً من علامة التبويب العناصر.
مثال
انظر إلى كود الصفحة:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size: 150px;
}
div:hover{
color: red;
}
div:active{
color: blue;
}
div:focus{
color: brown;
}
</style>
</head>
<body>
<div>hello world</div>
</body>
</html>نفتح الصفحة في متصفح ، ونتحقق من كيفية عمل الفئات الزائفة في علامة تبويب العناصر ، ونجري التغييرات إذا لزم الأمر.
مفتاح التشغيل السريع لإخفاء العناصر
عند تصحيح أخطاء أنماط CSS ، غالبًا ما يكون من الضروري إخفاء عنصر. يقوم Chrome بذلك بسرعة: ما عليك سوى تحديد عنصر والضغط على مفتاح
H.
اضغط H على لوحة المفاتيح
تطبق هذه العملية نمطًا على عنصر
visibility: hidden !important;.
تخزين عنصر DOM كمتغير مؤقت شامل
إذا أردنا الإشارة بسرعة إلى عنصر DOM في وحدة التحكم ، فيمكننا القيام بذلك على النحو التالي:
- حدد عنصر.
- افتح قائمة السياق بزر الفأرة الأيمن.
- حدد المتجر كمتغير عام.
