قائمة بنصائح وحيل Chrome DevTools الرائعة

توفر Chrome DevTools مجموعة مذهلة من الأدوات لمساعدتك على التطوير على منصة الويب. فيما يلي بعض النصائح التي قد لا تعرفها بعد

تفحص النظرة عامة على Chrome DevToolsإذا كنت جديدًا عليهم

قم بالسحب والإفلات في لوحة Elements

في لوحة Elements ، يمكنك سحب أي عنصر HTML وإفلاته وتغيير موضعه عبر الصفحة

Drag and Drop in the Elements Panel

قم بالإشارة إلى العنصر المحدد حاليًا في وحدة التحكم

حدد عقدة في لوحة Elements ، واكتب$0في وحدة التحكم للرجوع إليها.

Reference elements in the Console

نصيحة: إذا كنت تستخدم jQuery ، فيمكنك إدخال$($0)للوصول إلى jQuery API على هذا العنصر.

استخدم قيمة العملية الأخيرة في وحدة التحكم

يستخدم$_للإشارة إلى قيمة الإرجاع للعملية السابقة المنفذة في وحدة التحكم

Use the last result

أضف CSS وعدّل حالة العنصر

في لوحة Elements ، يوجد زران مفيدان للغاية.

الأول يتيح لك إضافة خاصية CSS جديدة ، مع أي محدد تريده ولكن مع ملء العنصر المحدد حاليًا مسبقًا:

Add a CSS rule

يتيح لك الثاني تشغيل حالة للعنصر المحدد ، بحيث يمكنك رؤية الأنماط المطبقة عندما يكون نشطًا ، أو محومًا ، عند التركيز.

Element state

ابحث عن مكان تعريف خاصية CSS

cmd-click(ctrl-clickفي Windows) إحدى خصائص CSS في لوحة Elements ، ستوجهك DevTools إلى المكان الذي تم تحديده فيه ، في لوحة المصدر

Find where a CSS property is defined

احفظ ملف CSS المعدل

انقر فوق اسم ملف CSS الذي قمت بتحريره. يقوم المفتش بفتحه في جزء المصادر ومن هناك يمكنك حفظه بالتعديلات المباشرة التي قمت بتطبيقها.

لا تعمل هذه الخدعة مع المحددات الجديدة المضافة باستخدام + ، أو في خصائص element.style ، ولكن فقط مع المحددات الحالية المعدلة.

Save to File the modified CSS

لقطة من عنصر واحد

حدد عنصرًا واضغطcmd-shift-p(أوctrl-shift-pفي Windows) لفتح قائمة الأوامر ، وحددالتقاط لقطة للشاشة العقدة

Screenshot a single element

ابحث عن عنصر باستخدام محددات CSS

الضغطcmd-f(ctrl-fفي Windows) يفتح مربع البحث في لوحة Elements.

يمكنك كتابة أي سلسلة هناك لمطابقة شفرة المصدر ، أو يمكنك أيضًا استخدام محددات CSS لجعل Chrome ينشئ صورة لك:

Find an element using CSS selectors

Shift- إدخال في وحدة التحكم

لكتابة أوامر تمتد عبر عدة أسطر في لوحة التحكم ، اضغط علىshift-enter.

بمجرد أن تصبح جاهزًا ، اضغط على Enter في نهاية البرنامج النصي لتنفيذه:

Shift-enter in the Console

امسح لوحة التحكم

يمكنك مسح وحدة التحكم باستخدام ملفواضحالموجود في الجزء العلوي الأيسر من وحدة التحكم ، أو عن طريق الضغط علىctrl-lأوcmd-k.

اذهب إلى…

في لوحة Sources:

cmd-o(ctrl-oفي Windows) ، يعرض جميع الملفات التي تم تحميلها بواسطة صفحتك.
cmd-shift-o(ctrl-shift-oفي Windows) الرموز (الخصائص والوظائف والفئات) في الملف الحالي.
ctrl-gيذهب إلى سطر معين.

Files list

مشاهدة Expression

بدلاً من كتابة اسم متغير أو تعبير مرارًا وتكرارًا ، ستفحصه كثيرًا أثناء جلسة تصحيح الأخطاء ، أضفه إلىمشاهدة Expressionقائمة.

Watch Expressions

XHR / تصحيح أخطاء الجلب

من مصحح الأخطاء ، افتح ملفXHR / جلب نقاط التوقفلوجة.

يمكنك ضبطه لكسر في أي وقت وXHR/أحضرتم إرسال المكالمة ، أو على مكالمات محددة فقط:

XHR and Fetch debugging

تصحيح الأخطاء في تعديلات DOM

انقر بزر الماوس الأيمن فوق عنصر وقم بتمكينهكسر على تعديلات الشجرة الفرعية: عندما يجتاز البرنامج النصي هذا العنصر الأطفال ويعدلهم ، يتوقف مصحح الأخطاء تلقائيًا للسماح لك بفحص ما يحدث.

Debug on DOM modifications