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