فتح "أدوات مطوري البرامج في Chrome"

هناك العديد من الطرق لفتح "أدوات مطوّري البرامج في Chrome". اختَر الطريقة المفضّلة لديك من هذا المرجع الشامل.

يمكنك الوصول إلى "أدوات المطوّرين في Chrome" باستخدام واجهة مستخدم Chrome أو لوحة المفاتيح:

بالإضافة إلى ذلك، تعرَّف على كيفية فتح أدوات مطوّري البرامج تلقائيًا في كل علامة تبويب جديدة.

فتح "أدوات مطوّري البرامج" من قوائم Chrome

إذا كنت تفضّل واجهة المستخدم، يمكنك الوصول إلى أدوات المطوّرين من القوائم المنسدلة في Chrome.

فتح لوحة "العناصر" لفحص ملفّ DOM أو CSS

لإجراء الفحص، انقر بزر الماوس الأيمن على عنصر في إحدى الصفحات واختَر فحص.

الخيار "Inspect" (الفحص) في قائمة منسدلة في Chrome.

تفتح أداة DevTools لوحة العناصر وتختار العنصر في شجرة DOM. في علامة التبويب الأنماط، يمكنك الاطّلاع على قواعد CSS المطبّقة على العنصر المحدّد.

هو عنصر تم اختياره في لوحة "العناصر".

فتح آخر لوحة استخدمتها من قائمة Chrome الرئيسية

لفتح لوحة "أدوات المطوّرين" الأخيرة، انقر على الزر قائمة الخيارات الإضافية على يسار شريط العناوين واختَر المزيد من الأدوات > أدوات المطوّرين.

خيار "أدوات المطوّرين" المحدَّد من قائمة الخيارات الإضافية

بدلاً من ذلك، يمكنك فتح اللوحة الأخيرة باستخدام اختصار. راجِع القسم التالي لمعرفة المزيد من المعلومات.

فتح اللوحات باستخدام الاختصارات: "العناصر" أو "وحدة التحكّم" أو "اللوحة الأخيرة"

إذا كنت تفضّل استخدام لوحة المفاتيح، اضغط على اختصار في Chrome استنادًا إلى نظام التشغيل:

نظام التشغيل العناصر وحدة التحكّم لوحتك الأخيرة
نظاما التشغيل Windows أو Linux Ctrl + Shift + C Ctrl + Shift + J F12
Ctrl + Shift + I
نظام التشغيل Mac Cmd + Option + C Cmd + Option + J Fn + F12
Cmd + Option + I

إليك طريقة سهلة لحفظ الاختصارات:

  • يشير الاختصار C إلى CSS.
  • J للغة JavaScript.
  • أنا أشير إلى اختيارك.

يؤدي اختصار C إلى فتح لوحة العناصر في وضع فحص. الفحص. يعرض لك هذا الوضع نصائح مفيدة عند تمرير مؤشر الماوس فوق العناصر في الصفحة. يمكنك أيضًا النقر على أي عنصر لعرض CSS الخاص به في العناصر > علامة التبويب الأنماط.

لوحة "العناصر" في وضع "المعاينة" مع نصائح

للحصول على القائمة الكاملة لاختصارات "أدوات مطوري البرامج"، يُرجى الاطّلاع على اختصارات لوحة المفاتيح.

فتح أدوات المطوّرين تلقائيًا في كل علامة تبويب جديدة

شغِّل متصفِّح Chrome من سطر الأوامر ومرِّر علامة --auto-open-devtools-for-tabs:

  1. عليك إنهاء أي نسخة افتراضية من Chrome قيد التشغيل.

  2. شغِّل تطبيق Terminal أو سطر الأوامر المفضّل لديك.

  3. بناءً على نظام التشغيل، شغِّل الأمر التالي:

  • نظام التشغيل macOS:

    open -a "Google Chrome" --args --auto-open-devtools-for-tabs
    
  • نظام التشغيل Windows:

    start chrome --auto-open-devtools-for-tabs
    
  • أجهزة Linux:

    google-chrome --auto-open-devtools-for-tabs
    

سيتم فتح "أدوات مطوري البرامج" تلقائيًا لكل علامة تبويب جديدة إلى أن يتم إغلاق Chrome.

ما هي الخطوات التالية؟

بعد ذلك، شاهِد الفيديو التالي للتعرّف على بعض الاختصارات والإعدادات المفيدة للتنقّل بشكل أسرع في DevTools.

للحصول على تجربة تعلُّم عملية أكثر، اطّلِع على كيفية تخصيص "أدوات المطوّرين".