يهدف هذا الدليل إلى مساعدة المستخدمين الذين يعتمدون بشكل أساسي على التكنولوجيا المساعِدة، مثل برامج قراءة الشاشة، في الوصول إلى أدوات مطوّري البرامج في Chrome واستخدامها. "أدوات مطوّري البرامج في Chrome" هي مجموعة من أدوات مطوّري البرامج على الويب المضمّنة في متصفّح Google Chrome. اطّلِع على مرجع تسهيل الاستخدام إذا كنت تبحث عن ميزات أدوات مطوّري البرامج المرتبطة بتحسين سهولة استخدام صفحة ويب.
لا تزال أدوات المطوّرين قيد التطوير. تعمل بعض اللوحة وعلامات التبويب بشكل أفضل مع تكنولوجيا المساعدة مقارنةً بغيرها. يرشدك هذا الدليل إلى اللوحات الأكثر سهولة في الاستخدام ويسلط الضوء على مشاكل محدّدة قد تواجهها أثناء التصفّح.
نظرة عامة
قبل البدء، من المفيد أن يكون لديك نموذج ذهني لهيكل واجهة مستخدم "أدوات المطوّر". يتم хувين DevTools
إلى سلسلة من اللوحات التي يتم تنظيمها في ARIA tablist. على سبيل المثال:
- تتيح لك لوحة العناصر عرض عقد DOM أو CSS وتغييرها.
- تتيح لك لوحة وحدة التحكّم قراءة سجلّات JavaScript وتعديل الكائنات مباشرةً.
ضمن منطقة المحتوى في كل لوحة، هناك عدد من الأدوات المختلفة، وغالبًا ما يُشار إليها باسم علامات التبويب أو اللوحات في المستندات. على سبيل المثال، تحتوي لوحة العناصر على علامات تبويب إضافية لفحص أدوات معالجة الأحداث وشجرة تسهيل الاستخدام وغير ذلك الكثير. إنّ التمييز بين علامات التبويب والأقسام أمر عشوائي إلى حدٍ ما. والسبب الوحيد لظهور أحد المصطلحين هو الحفاظ على الاتساق مع بقية مستندات DevTools الرسمية.
اختصارات لوحة المفاتيح
يُعدّ مرجع اختصارات لوحة المفاتيح في أدوات المطوّرين مرجعًا مفيدًا. احرص على وضع إشارة مرجعية عليها و الرجوع إليها أثناء استكشاف اللوحات المختلفة.
فتح "أدوات مطوري البرامج"
للبدء، يُرجى الاطّلاع على فتح "أدوات مطوّري البرامج في Chrome". هناك عدد من الطرق لفتح أدوات المطوّرين، إما من خلال اختصارات لوحة المفاتيح أو عناصر القائمة.
التنقّل بين اللوحة
التنقّل باستخدام لوحة المفاتيح
- مع فتح DevTools، اضغط على Control+] أو Command+] (Mac) للتركيز على اللوحة التالية.
- اضغط على Control+[ أو Command+[ (في نظام التشغيل Mac) للتركيز على اللوحة السابقة.
- يمكنك أيضًا استخدام Shift+Tab لنقل التركيز إلى
tablistفي اللوحة واستخدام مفاتيح الأسهم لتغيير اللوحات، إلا أنّه قد يكون أسرع استخدام اختصارات التصفّح المذكورة سابقًا.
المشاكل المعروفة
- قد تنقل بعض اللوحات، مثل لوحتَي وحدة التحكّم والأداء، التركيز إلى منطقة المحتوى الخاصة بها فور تفعيلها. وقد يؤدي ذلك إلى صعوبة التنقّل باستخدام مفاتيح الأسهم.
- يتم الإعلان عن اسم اللوحة المحدّدة، ولكن بعد قراءة المحتوى الذي يتم التركيز عليه في اللوحة فقط. وقد يكون من السهل جدًا تفويت هذه الرسائل.
التنقّل باستخدام قائمة الأوامر
للتركيز على لوحة معيّنة، استخدِم قائمة الأوامر:
- مع فتح DevTools، اضغط على Control+Shift+P أو Command+Shift+P (Mac) لفتح قائمة الأوامر. قائمة الأوامر هي مربّع اختيار للإكمال التلقائي للبحث التقريبي.
- اكتب اسم اللوحة التي تريد فتحها، ثم استخدِم السهم المتّجه للأسفل في لوحة المفاتيح للتنقل إلى الخيار الصحيح.
- اضغط على Enter لتنفيذ أمر.
على سبيل المثال، لفتح لوحة العناصر:
- افتح قائمة الأوامر.
- اكتب E ثم L. يتم اختيار اللوحة > إظهار العناصر.
- اضغط على مفتاح Enter لتشغيل الأمر الذي يفتح اللوحة.
يؤدي فتح لوحة بهذه الطريقة إلى توجيه التركيز إلى محتوى اللوحة نفسها. في حال استخدام لوحة العناصر، ينتقل التركيز إلى شجرة نموذج DOM.
لوحة "العناصر"
فحص عنصر على الصفحة
- انتقِل إلى العنصر الذي تريد فحصه باستخدام مؤشر قارئ الشاشة.
- لمحاكاة النقر بزر الماوس الأيمن على العنصر لفتح قائمة السياقات، اتّبِع الخطوات التالية:
- اختَر فحص. يؤدي ذلك إلى فتح لوحة العناصر وتركيز العنصر في شجرة نموذج DOM.
يتم عرض شجرة نموذج العناصر في المستند على شكل ARIA tree. اطّلِع على التنقّل في شجرة نموذج DOM باستخدام
ال keyboard للحصول على مثال.
نسخ رمز عنصر في شجرة نموذج DOM
- مع التركيز على عقدة في شجرة نموذج DOM، افتح قائمة السياقات من خلال النقر بزر الماوس الأيمن.
- وسِّع خيار نسخ.
- اختَر نسخ outerHTML.
المشاكل المعروفة
- لا يختار Copy outerHTML غالبًا العقدة الحالية، بل يختار العقدة الرئيسية بدلاً من ذلك. ومع ذلك، يجب أن تظلّ محتويات العنصر في outerHTML المنسوخ.
تعديل سمات عنصر في شجرة نموذج العناصر في المستند
- مع التركيز على عقدة في شجرة DOM، اضغط على Enter لجعلها قابلة للتعديل.
- اضغط على Tab للتنقّل بين قيم السمات. عندما تسمع كلمة "مسافة"، يعني ذلك أنّك في حقل إدخال ملف نصي خالٍ ويمكنك كتابة قيمة سمة جديدة.
- اضغط على Control+Enter أو Command+Enter (في نظام التشغيل Mac) لقبول التغيير والاستماع إلى محتوى العنصر بالكامل.
المشاكل المعروفة
- عند الكتابة في حقل إدخال النص، لا تظهر لك أي ملاحظات. إذا أخطأت في الكتابة وكنت تستخدم مفاتيح الأسهم لاستكشاف الإدخال، لن تظهر لك أي ملاحظات أيضًا. أسهل طريقة للتحقّق من عملك هي قبول التغيير، ثم الاستماع إلى الإعلان عن العنصر بأكمله.
تعديل رمز HTML لعنصر في شجرة نموذج العناصر في المستند
- مع التركيز على عقدة في شجرة DOM، اضغط على Enter لجعلها قابلة للتعديل.
- اضغط على Tab للتنقّل بين قيم السمات. عندما تسمع اسم العنصر، مثلاً "h2"، يعني ذلك أنّك في حقل إدخال نص ويمكنك تغيير نوع العنصر.
- اضغط على Control+Enter أو Command+Enter (في نظام التشغيل Mac) لقبول التغيير.
على سبيل المثال، يؤدي كتابة h3 والضغط على Control+Enter أو
Command+Enter (في نظام التشغيل Mac) إلى تغيير علامتَي البداية والنهاية للعنصر إلى h3.
علامات تبويب لوحة "العناصر"
تحتوي لوحة العناصر على علامات تبويب إضافية لفحص عناصر مثل ملف CSS الذي تم تطبيقه على أحد العناصر أو مكانه في شجرة تسهيل الاستخدام.
- مع التركيز على عقدة في شجرة DOM، اضغط على Tab إلى أن تسمع أنّه تم اختيار pane (لوحة) Styles (الأنماط).
- استخدِم السهم المتّجه لليمين لاستكشاف علامات التبويب الأخرى المتاحة.
تحوّل شجرة نموذج DOM العناصر التي تحتوي على سمات href إلى روابط يمكن التركيز عليها، لذا قد تحتاج إلى
الضغط على Tab أكثر من مرة للوصول إلى لوحة "الأنماط".
المشاكل المعروفة
لا يمكن الوصول إلى علامتَي التبويب نقاط إيقاف DOM والسمات باستخدام لوحة المفاتيح.
لوحة الأنماط
في لوحة الأنماط، ستجد عناصر تحكّم لفلترة الأنماط وتبديل حالات العناصر (مثل
:active و:focus) وتبديل الفئات وإضافة فئات جديدة. تتوفّر أيضًا
أداة فحص أنماط فعّالة لاستكشاف الأنماط المطبّقة حاليًا على العنصر الذي يتمّ
التركيز عليه في شجرة نموذج كائن المستند (DOM) وتعديلها.
إنّ المفهوم الرئيسي الذي يجب فهمه بشأن لوحة الأنماط هو أنّها لا تعرض سوى الأنماط الخاصة
بالعقدة المحدّدة حاليًا في شجرة DOM. على سبيل المثال، لنفترض أنّك انتهيت من فحص الأنماط
لعقدة <header>، وتريد الآن الاطّلاع على الأنماط لعقدة <footer>. لإجراء ذلك،
عليك أولاً اختيار عقدة <footer> في شجرة DOM. قد يكون من الأسرع استخدام سير العمل
فحص لفحص عقدة في المنطقة المجاورة لعقدة footer (مثل
رابط في التذييل)، ما يركز شجرة نموذج DOM، ثم استخدام لوحة المفاتيح للانتقال
إلى العقدة المحدّدة التي تهمّك.
التنقّل في لوحة "الأنماط"
بما أنّ جميع أدوات الأنماط ترتبط بطريقة أو بأخرى بـ أداة الأنماط، من المنطقي أن تصبح خبيرًا في هذه الأداة أولاً.
- مع التركيز على لوحة الأنماط، اضغط على Tab لنقل التركيز إلى داخلها واستكشاف محتوياتها.
- اضغط على مفتاح التبويب (Tab) إلى أن يصبح النمط الأول نشطًا. إذا كنت تستخدم قارئ شاشة، سيتم الإعلان عن هذا النمط الأول على النحو التالي: "element.style {}".
- اضغط على السهم المتّجه للأسفل للتنقّل في قائمة الأنماط بترتيب التحديد. يُعلن قارئ الشاشة عن كل أسلوب بدءًا من اسم ملف CSS ورقم السطر الذي يظهر فيه الأسلوب واسم الأسلوب نفسه. على سبيل المثال: "main.css:233 .card__img {}"
- اضغط على Enter لفحص نمط بمزيد من التفاصيل. يبدأ التركيز على إصدار قابل للتعديل من اسم النمط.
- اضغط على Tab للتنقّل بين النُسخ القابلة للتعديل من كلّ خاصيّة CSS والقيم المقابلة لها. في نهاية كلّ مربّع نمط، يتوفّر حقل نصّ فارغ قابل للتعديل يمكنك استخدامه لإضافة سمات CSS إضافية.
- يمكنك مواصلة الضغط على Tab للتنقّل في قائمة الأنماط، أو الضغط على Escape للخروج من هذا الوضع والعودة إلى التنقّل باستخدام مفاتيح الأسهم.
احرص على قراءة مرجع لوحة المفاتيح في لوحة "الأنماط" للاطّلاع على اختصارات إضافية.
المشاكل المعروفة
- إذا كنت تستخدم حقل النص القابل للتعديل فلتر، لن يعود بإمكانك التنقّل في قائمة الأنماط.
تبديل حالة العنصر
لتبديل حالة عنصر، مثل :active أو :focus:
- انتقِل إلى لوحة الأنماط واضغط على Tab إلى أن يصبح الزر تبديل حالة العنصر محدّدًا.
- اضغط على مفتاح Enter لتوسيع مجموعة حالات العناصر. يتم عرض حالات العناصر كمجموعة من مربّعات الاختيار.
- اضغط على مفتاح Tab إلى أن يتم التركيز على الحالة الأولى،
:active. - اضغط على مفتاح المسافة لتفعيل هذه الميزة. إذا كان العنصر المحدّد حاليًا في شجرة DOM يتضمّن نمطًا
:active، سيتم تطبيقه الآن. - واصِل الضغط على مفتاح Tab لاستكشاف جميع الحالات المتاحة.
إضافة صف حالي
بجانب الزر تبديل حالة العنصر، يظهر الزر فئات العناصر. انقل التركيز إليه من خلال الضغط على Tab ثم Enter. يتم نقل التركيز إلى حقل نص للتعديل يحمل التصنيف إضافة صف جديد.
يُستخدَم الزر فئات العناصر في المقام الأول لإضافة فئات حالية إلى عنصر. على سبيل المثال، إذا كانت ملفّات الأنماط تحتوي على فئة مساعدة باسم .clearfix، يمكنك الضغط على . داخل
حقل التعديل النصي للاطّلاع على قائمة المقترَحات للفئات واستخدام السهم المتّجه للأسفل للعثور على
اقتراح .clearfix. أو اكتب اسم الصف بنفسك واضغط على Enter لتطبيقه.
إضافة قاعدة نمط جديدة
بجانب الزر فئات العناصر، يظهر الزر قاعدة نمط جديدة. انقل التركيز إليه من خلال الضغط على مفتاح Tab ثم الضغط على مفتاح Enter. يتم نقل التركيز إلى حقل نص قابل للتعديل داخل أداة فحص الأنماط. المحتوى النصي الأوّلي للحقل هو اسم علامة العنصر الذي يتم اختياره في شجرة نموذج كائن المستند (DOM). يمكنك كتابة أي اسم فئة تريده في هذا الحقل ثم الضغط على Tab لتحديد سمات CSS له.
علامة التبويب "المُحسَّنة"
مع التركيز على علامة التبويب المحسوبة، اضغط على Tab لنقل التركيز إلى الداخل واستكشاف محتوياتها. ضمن علامة التبويب المُحسَّنة، تتوفّر عناصر تحكّم لاستكشاف سمات CSS التي يتم تطبيقها فعليًا على عنصر معيّن بترتيب التحديد.
استكشاف جميع الأنماط المحسوبة
اضغط على مفتاح التبويب Tab إلى أن تصل إلى مجموعة الأنماط المحسوبة. ويتم عرضها على شكل
ARIA tree. يؤدي توسيع مربّع قائمة إلى إظهار أدوات اختيار CSS التي تطبّق النمط المحسوب. يتم تنظيم هذه
العناصر المحدّدة حسب مدى دقتها. يُعلن قارئ الشاشة عن القيمة المحسوبة، وعنصر CSS الذي تتم مطابقته حاليًا، واسم ملف جدول الأنماط الذي يحتوي على العنصر، ورقم السطر الخاص بالعنصر.
المشاكل المعروفة
- في حال استخدام حقل النص فلتر، لن تتمكّن بعد ذلك من فحص الأنماط.
علامة التبويب "أدوات معالجة الأحداث"
من داخل لوحة العناصر، يمكنك فحص أدوات معالجة الأحداث المطبَّقة على عنصر باستخدام علامة التبويب أدوات معالجة الأحداث. مع التركيز على لوحة الأنماط، اضغط على السهم المتّجه لليسار للتنقل إلى علامة التبويب مستمعو الأحداث.
استكشِف أدوات معالجة الأحداث.
يتم عرض أدوات معالجة الأحداث على أنّها عنصر ARIA tree. يمكنك استخدام مفاتيح الأسهم للتنقّل بينها. يُعلن
قارئ الشاشة عن اسم عنصر DOM المرتبط بمراقب الأحداث، بالإضافة
إلى اسم الملف الذي تم تحديد مراقب الأحداث فيه ورقم السطر.
لوحة تسهيل الاستخدام
مع التركيز على لوحة تسهيل الاستخدام، اضغط على Tab لنقل التركيز إلى داخل اللوحة واستكشاف محتواها. في لوحة تسهيل الاستخدام، تتوفّر عناصر تحكّم لاستكشاف شجرة تسهيل الاستخدام، وسمات ARIA المطبّقة على عنصر معيّن، وخصائص تسهيل الاستخدام المحسوبة.
شجرة تسهيل الاستخدام
يتم عرض عرض إمكانية الوصول على شكل tree ARIA حيث يتوافق كل treeitem مع عنصر
في DOM. تُعلن الشجرة عن الدور المحسوب للعقدة المحدّدة. يتم الإعلان عن العناصر العامة
مثل div وspan على أنّها "GenericContainer" في الشجرة. استخدِم مفاتيح الأسهم للتنقل في العرض التدرّجي واستكشاف العلاقات بين الوحدات الرئيسية والفرعية.
المشاكل المعروفة
- قد لا يتم عرض نوع شجرة ARIA المستخدَمة في لوحة تسهيل الاستخدام بشكلٍ صحيح في Chrome لبرامج قراءة الشاشة في macOS، مثل VoiceOver. يمكنك الاشتراك في المشكلة رقم 868480 في Chromium للاطّلاع على آخر المعلومات المتعلّقة بالتقدّم المحرز في حلّ هذه المشكلة.
- تم وضع علامة على قسمَي سمات ARIA والسمات المحسوبة كشجرات ARIA، ولكنهما لا يتضمّنان حاليًا إدارة التركيز، لذا لا يمكن تشغيلهما باستخدام لوحة المفاتيح.
لوحة عمليات التدقيق
تتيح لك لوحة عمليات التدقيق إجراء سلسلة من الاختبارات على موقع إلكتروني للتحقّق من المشاكل الشائعة المرتبطة بالأداء وسهولة الاستخدام وتحسين محركات البحث وعدد من الفئات الأخرى.
ضبط عملية تدقيق وتنفيذها
- عند فتح لوحة عمليات التدقيق لأول مرة، يتم التركيز على الزر تشغيل عملية تدقيق في نهاية النموذج. يتم ضبط النموذج تلقائيًا لتشغيل عمليات التدقيق لكل فئة باستخدام emulati on للأجهزة الجوّالة على اتصال 3G محاكي.
- استخدِم Shift+Tab أو انتقِل إلى الوراء في وضع التصفّح لتغيير إعدادات التدقيق.
- عندما تكون مستعدًا لإجراء التدقيق، انتقِل مرة أخرى إلى الزر تنفيذ التدقيق واضغط على مفتاح Enter.
- يتم نقل التركيز إلى نافذة مشروطة تتضمّن زر إلغاء الذي يتيح لك الخروج من عملية التدقيق. قد تسمع سلسلة من الإشارات الصوتية أثناء تنفيذ عملية التدقيق وإعادة تحميل الصفحة عدة مرات.
المشاكل المعروفة
- لا يتم حاليًا وضع علامة على الأقسام المختلفة لنموذج الإعداد باستخدام عنصر
fieldset. قد يكون من الأسهل التنقّل فيها في وضع "التصفّح" لمعرفة عناصر التحكّم التي تكون مرتبطة بكل قسم. - لا يتوفّر إعلان صوتي أو إعلان عن المنطقة التي يتم فيها البث المباشر عند انتهاء عملية التدقيق. يستغرق ذلك عادةً 30 ثانية تقريبًا، وبعد ذلك من المفترض أن تتمكّن من الانتقال إلى النتائج. قد يكون استخدام "وضع التصفّح" هو أسهل طريقة للوصول إلى النتائج.
التنقّل في تقرير التدقيق
يتم تنظيم تقرير التدقيق في أقسام تتوافق مع كل فئة من فئات التدقيق. يتم فتح
التقرير مع قائمة بالنتائج لكل فئة. هذه النتائج هي أيضًا روابط يمكن استخدامها
للانتقال إلى الأقسام ذات الصلة. يتضمّن كل قسم عناصر details قابلة للتوسيع، والتي
تحتوي على معلومات متعلّقة بعمليات التدقيق التي تم اجتيازها أو تعذّر اجتيازها. يتم تلقائيًا عرض عمليات التدقيق التي تتضمن أخطاء فقط.
وينتهي كل قسم بعنصر details نهائي يحتوي على جميع عمليات التدقيق التي تم اجتيازها.
لإجراء تدقيق جديد، استخدِم Shift+Tab للخروج من التقرير والبحث عن الزر إجراء تدقيق.