هدف این راهنما کمک به کاربرانی است که عمدتاً به فناوری کمکی مانند صفحه‌خوان‌ها متکی هستند، به ابزارهای برنامه‌نویس Chrome دسترسی داشته باشند و از آن استفاده کنند. Chrome DevTools مجموعه ای از ابزارهای توسعه دهنده وب است که در مرورگر Google Chrome تعبیه شده است. اگر به دنبال ویژگی های DevTools مرتبط با بهبود دسترسی به یک صفحه وب هستید، به مرجع دسترسی مراجعه کنید.
دسترسی به DevTools یک کار در حال انجام است. برخی از پانل ها و زبانه ها با فناوری کمکی بهتر از بقیه کار می کنند. این راهنما شما را از طریق پانل هایی راهنمایی می کند که در دسترس ترین هستند و مشکلات خاصی را که ممکن است در طول مسیر با آنها روبرو شوید برجسته می کند.
بررسی اجمالی
قبل از شروع، داشتن یک مدل ذهنی از نحوه ساختار DevTools UI کمک می کند. DevTools به مجموعه ای از پانل ها تقسیم می شود که در یک tablist ARIA سازماندهی شده اند. مثلا:
- پانل Elements به شما امکان می دهد گره های DOM یا CSS را مشاهده و تغییر دهید.
- پنل Console به شما امکان می دهد گزارش های جاوا اسکریپت را بخوانید و اشیاء ویرایش زنده را بخوانید.
در قسمت محتوای هر پانل، تعدادی ابزار مختلف وجود دارد که اغلب به عنوان برگه ها یا پنجره ها در اسناد نامیده می شوند. به عنوان مثال، پانل عناصر حاوی برگه های اضافی برای بازرسی شنوندگان رویداد، درخت دسترسی و بسیاری موارد دیگر است. تمایز بین زبانه ها و پنجره ها تا حدودی دلخواه است. تنها دلیلی که شما این یا آن عبارت را می بینید، حفظ سازگاری با بقیه اسناد رسمی DevTools است.
میانبرهای صفحه کلید
مرجع میانبرهای صفحه کلید DevTools یک برگه تقلب مفید است. هنگام کاوش در پانل های مختلف، حتماً آن را نشانه گذاری کنید و به آن مراجعه کنید.
DevTools را باز کنید
برای شروع، Open Chrome DevTools را بخوانید. چند راه برای باز کردن DevTools وجود دارد، از طریق میانبرهای صفحه کلید یا آیتم های منو.
بین پانل ها حرکت کنید
پیمایش با صفحه کلید
- با باز بودن DevTools، Control + ] یا Command + ] (Mac) را فشار دهید تا پانل بعدی را فوکوس کنید.
- برای فوکوس کردن پانل قبلی ، Control + [ یا Command + [ (Mac) را فشار دهید.
- همچنین می توان از Shift + Tab برای انتقال فوکوس به
tablistپانل و استفاده از کلیدهای جهت دار برای تغییر پانل ها استفاده کرد، اگرچه ممکن است استفاده از میانبرهای ذکر شده قبلی سریعتر باشد.
مشکلات شناخته شده
- برخی از پانل ها، مانند پانل های کنسول و عملکرد ، ممکن است به محض فعال شدن، تمرکز را به قسمت محتوای خود منتقل کنند. این می تواند ناوبری با کلیدهای جهت دار را دشوار کند.
- نام پنل انتخابی اعلام می شود، اما تنها پس از خواندن محتوای متمرکز در پانل. این می تواند از دست دادن آن را بسیار آسان کند.
با منوی فرمان حرکت کنید
برای فوکوس کردن یک پانل خاص، از منوی فرمان استفاده کنید:
- با باز بودن DevTools، Control + Shift + P یا Command + Shift + P (Mac) را فشار دهید تا Command Menu باز شود. منوی فرمان یک جعبه ترکیبی تکمیل خودکار جستجوی فازی است.
- نام پانلی را که می خواهید باز کنید تایپ کنید، سپس از صفحه کلید فلش رو به پایین برای رفتن به گزینه صحیح استفاده کنید.
- برای اجرای یک دستور Enter را فشار دهید.
به عنوان مثال، برای باز کردن پنل Elements :
- منوی فرمان را باز کنید.
- E سپس L را تایپ کنید. گزینه Panel > Show Elements انتخاب شده است.
- برای اجرای دستوری که پانل را باز می کند ، Enter را فشار دهید.
باز کردن پانل از این طریق، تمرکز را به محتویات خود پانل هدایت می کند. در مورد پانل عناصر ، فوکوس به درخت DOM منتقل می شود.
پنل عناصر
یک عنصر در صفحه را بررسی کنید
- با استفاده از مکان‌نمای صفحه‌خوان به عنصری که می‌خواهید بازرسی کنید بروید.
- یک کلیک راست ماوس روی عنصر را شبیه سازی کنید تا منوی زمینه باز شود.
- گزینه Inspect را انتخاب کنید. این پانل Elements را باز می کند و عنصر را در درخت DOM متمرکز می کند.
درخت DOM به عنوان یک tree ARIA گذاشته شده است. برای مثال به پیمایش درخت DOM با صفحه کلید مراجعه کنید.
کد یک عنصر را در درخت DOM کپی کنید
- با تمرکز بر روی یک گره در درخت DOM ، منوی زمینه را کلیک راست کنید.
- گزینه Copy را باز کنید.
- Copy outerHTML را انتخاب کنید.
مشکلات شناخته شده
- کپی outerHTML اغلب گره فعلی را انتخاب نمی کند، اما در عوض گره والد آن را انتخاب می کند. با این حال، محتویات عنصر همچنان باید در outerHTML کپی شده باشد.
ویژگی های یک عنصر در درخت DOM را تغییر دهید
- با تمرکز روی یک گره در درخت DOM ، Enter را فشار دهید تا آن را قابل ویرایش کنید.
- برای جابجایی بین مقادیر ویژگی ، Tab را فشار دهید. وقتی "فضا" را می شنوید، در داخل یک ورودی متن خالی هستید و می توانید مقدار مشخصه جدیدی را تایپ کنید.
- برای پذیرش تغییر و شنیدن کل محتوای عنصر، Control + Enter یا Command + Enter (Mac) را فشار دهید.
مشکلات شناخته شده
- وقتی در ورودی متن تایپ می کنید، بازخوردی دریافت نمی کنید. اگر اشتباه تایپی داشته باشید و از کلیدهای جهت نما برای بررسی ورودی خود استفاده کنید، بازخوردی نیز دریافت نمی کنید. ساده ترین راه برای بررسی کار خود این است که تغییر را بپذیرید، سپس به تمام عنصر که اعلام می شود گوش دهید.
HTML یک عنصر را در درخت DOM ویرایش کنید
- با تمرکز روی یک گره در درخت DOM ، Enter را فشار دهید تا آن را قابل ویرایش کنید.
- برای جابجایی بین مقادیر ویژگی ، Tab را فشار دهید. هنگامی که نام عنصر را می شنوید، به عنوان مثال، "h2"، شما در داخل یک ورودی متن هستید و ممکن است نوع عنصر را تغییر دهید.
- برای پذیرش تغییر، Control + Enter یا Command + Enter (Mac) را فشار دهید.
برای مثال، تایپ h3 و فشار دادن Control + Enter یا Command + Enter (Mac) تگ شروع و پایان عنصر را به h3 تغییر می‌دهد.
برگه های پنل عناصر
پانل عناصر حاوی برگه های اضافی برای بررسی مواردی مانند CSS اعمال شده بر روی یک عنصر یا مکان آن در درخت دسترسی است.
- با تمرکز روی یک گره در درخت DOM ، Tab را فشار دهید تا زمانی که بشنوید که صفحه سبک ها انتخاب شده است.
- از پیکان راست برای کاوش سایر برگه های موجود استفاده کنید.
درخت DOM عناصر دارای ویژگی های href را به پیوندهای قابل فوکوس تبدیل می کند، بنابراین ممکن است لازم باشد Tab را بیش از یک بار فشار دهید تا به صفحه سبک ها برسید.
مشکلات شناخته شده
برگه‌های DOM Breakpoints و Properties با صفحه‌کلید قابل دسترسی نیستند.
پنجره سبک ها
در بخش Styles ، کنترل‌هایی برای فیلتر کردن سبک‌ها، تغییر حالت‌های عنصر (مانند :active و :focus )، تغییر دادن کلاس‌ها و افزودن کلاس‌های جدید پیدا خواهید کرد. همچنین یک ابزار بازرسی سبک قدرتمند برای کاوش و اصلاح سبک‌های اعمال شده در حال حاضر روی عنصری که در درخت DOM تمرکز دارد، وجود دارد.
مفهوم کلیدی برای درک در مورد پنجره Styles این است که فقط سبک ها را برای گره انتخاب شده در DOM Tree نشان می دهد. به عنوان مثال، فرض کنید بررسی سبک های یک گره <header> را تمام کرده اید، و اکنون می خواهید سبک های یک گره <footer> را بررسی کنید. برای انجام این کار، ابتدا باید گره <footer> را در درخت DOM انتخاب کنید. ممکن است استفاده از گردش کار Inspect برای بازرسی گره‌ای که در مجاورت عمومی گره footer قرار دارد (مانند پیوندی در پاورقی)، که درخت DOM را متمرکز می‌کند و سپس از صفحه‌کلید خود برای پیمایش به گره دقیق استفاده کنید، سریعتر پیدا کنید. که به آن علاقه دارید
در قسمت Styles حرکت کنید
از آنجایی که همه ابزارهای سبک به یک روش به صفحه Styles متصل می شوند، منطقی است که ابتدا در این ابزار متخصص شوید.
- با فوکوس بر روی صفحه سبک‌ها ، Tab را فشار دهید تا فوکوس را به داخل منتقل کنید و محتویات آن را کاوش کنید.
- Tab را فشار دهید تا اولین سبک فعال شود. اگر از صفحه‌خوان استفاده می‌کنید، اولین سبک به عنوان "element.style {}" اعلام می‌شود.
- فلش رو به پایین را فشار دهید تا لیست سبک ها را به ترتیب مشخصه پیمایش کنید. یک صفحه‌خوان هر سبک را با نام فایل CSS، شماره خطی که سبک روی آن ظاهر می‌شود و نام خود استایل را اعلام می‌کند. به عنوان مثال: "main.css:233 .card__img {}"
- Enter را فشار دهید تا یک سبک را با جزئیات بیشتر بررسی کنید. تمرکز روی یک نسخه قابل ویرایش نام سبک شروع می شود.
- Tab را فشار دهید تا بین نسخه های قابل ویرایش هر ویژگی CSS و مقادیر مربوط به آنها حرکت کنید. در انتهای هر بلوک سبک یک فیلد متنی قابل ویرایش خالی وجود دارد که می‌توانید از آن برای افزودن ویژگی‌های CSS اضافی استفاده کنید.
- برای حرکت در لیست سبک‌ها می‌توانید Tab را فشار دهید، یا Escape را فشار دهید تا از این حالت خارج شوید و به پیمایش با کلیدهای جهت‌دار بازگردید.
برای میانبرهای اضافی، حتماً مرجع صفحه‌کلید Styles را بخوانید.
مشکلات شناخته شده
- اگر از قسمت متن قابل ویرایش فیلتر استفاده می کنید، دیگر نمی توانید در لیست سبک ها پیمایش کنید.
وضعیت عنصر را تغییر دهید
برای تغییر وضعیت یک عنصر، مانند :active یا :focus :
- به صفحه Styles بروید و Tab را فشار دهید تا دکمه Toggle Element State فوکوس شود.
- Enter را فشار دهید تا مجموعه حالت های عنصر را گسترش دهید. حالت های عنصر به صورت گروهی از چک باکس ها ارائه می شوند.
- Tab را فشار دهید تا حالت اول،
:active، فوکوس شود. - برای فعال کردن آن ، Space را فشار دهید. اگر عنصر انتخاب شده در حال حاضر در درخت DOM دارای سبک
:activeباشد، اکنون اعمال می شود. - برای کاوش در تمام حالت های موجود، دکمه Tab را فشار دهید.
یک کلاس خروجی اضافه کنید
در مجاورت دکمه Toggle Element State دکمه Element Classes قرار دارد. با فشار دادن Tab و سپس Enter، فوکوس را به آن منتقل کنید. فوکوس به یک فیلد متن ویرایش با عنوان افزودن کلاس جدید منتقل می‌شود.
دکمه Element Classes در درجه اول برای افزودن کلاس های موجود به یک عنصر استفاده می شود. برای مثال، اگر شیوه نامه شما حاوی یک کلاس کمکی به نام .clearfix باشد، می توانید فشار دهید . در قسمت ویرایش متن برای مشاهده لیست پیشنهادی کلاس ها و استفاده از فلش رو به پایین برای یافتن پیشنهاد .clearfix . یا نام کلاس را خودتان تایپ کنید و Enter را فشار دهید تا اعمال شود.
یک قانون سبک جدید اضافه کنید
در مجاورت دکمه Element Classes دکمه New Style Rule قرار دارد. با فشردن Tab و Enter ، فوکوس را به آن منتقل کنید. فوکوس به یک قسمت متنی قابل ویرایش در داخل بازرس سبک حرکت می کند. محتوای متن اولیه فیلد، نام تگ عنصری است که در درخت DOM انتخاب شده است. می توانید نام کلاسی را که می خواهید در این قسمت تایپ کنید و سپس Tab را فشار دهید تا ویژگی های CSS را به آن اختصاص دهید.
برگه محاسبه شده
با فوکوس بر روی برگه Computed ، Tab را فشار دهید تا فوکوس را به داخل منتقل کنید و محتویات آن را کاوش کنید. در برگه Computed کنترل‌هایی برای بررسی اینکه کدام ویژگی‌های CSS واقعاً به یک عنصر به ترتیب ویژگی اعمال می‌شوند، وجود دارد.
تمام سبک های محاسبه شده را کاوش کنید
Tab را فشار دهید تا به مجموعه سبک های محاسبه شده برسید. اینها به عنوان tree ARIA ارائه می شوند. گسترش یک لیست باکس نشان می دهد که کدام انتخابگرهای CSS از سبک محاسبه شده استفاده می کنند. این انتخابگرها بر اساس ویژگی سازماندهی می شوند. یک صفحه خوان مقدار محاسبه شده را که انتخابگر CSS در حال حاضر مطابقت دارد، نام فایل شیوه نامه حاوی انتخابگر و شماره خط انتخابگر را اعلام می کند.
مشکلات شناخته شده
- اگر از قسمت متن فیلتر استفاده می کنید، دیگر نمی توانید سبک ها را بررسی کنید.
برگه شنوندگان رویداد
از درون پانل عناصر می‌توانید شنوندگان رویداد اعمال شده روی یک عنصر را با استفاده از برگه شنوندگان رویداد بررسی کنید. با فوکوس بر روی صفحه Styles ، فلش راست را فشار دهید تا به تب Event Listeners بروید.
شنوندگان رویداد را کاوش کنید
شنوندگان رویداد به عنوان tree ARIA ارائه می شوند. می توانید از کلیدهای جهت دار برای پیمایش آنها استفاده کنید. یک صفحه خوان نام شی DOM را که شنونده رویداد به آن متصل شده است و همچنین نام فایلی که شنونده رویداد تعریف شده و شماره خط آن را اعلام می کند.
صفحه دسترسی
با فوکوس بر روی صفحه دسترسی ، Tab را فشار دهید تا فوکوس را به داخل منتقل کنید و محتویات آن را کاوش کنید. در پنجره Accessibility ، کنترل‌هایی برای کاوش درخت دسترسی، ویژگی‌های ARIA اعمال شده بر روی یک عنصر و ویژگی‌های دسترسی محاسبه‌شده آن وجود دارد.
درخت دسترسی
درخت دسترس‌پذیری به‌عنوان یک tree ARIA ارائه می‌شود که در آن هر treeitem مربوط به یک عنصر در DOM است. درخت نقش محاسبه شده را برای گره انتخاب شده اعلام می کند. عناصر عمومی مانند div و span به عنوان "GenericContainer" در درخت اعلام می شوند. از کلیدهای جهت دار برای عبور از درخت و کشف روابط والدین و فرزند استفاده کنید.
مشکلات شناخته شده
- ممکن است نوع درخت ARIA مورد استفاده در صفحه دسترس‌پذیری به‌درستی در Chrome برای صفحه‌خوان‌های macOS مانند VoiceOver نمایش داده نشود. در Chromium شماره 868480 مشترک شوید تا از پیشرفت این مشکل مطلع شوید.
- بخش‌های ARIA Attributes و Computed Properties به‌عنوان درخت ARIA علامت‌گذاری شده‌اند، اما در حال حاضر مدیریت تمرکز ندارند، بنابراین با صفحه‌کلید قابل اجرا نیستند.
پنل حسابرسی
پنل حسابرسی به شما اجازه می دهد تا یک سری آزمایش بر روی یک سایت انجام دهید تا مشکلات رایج مربوط به عملکرد، دسترسی، سئو و تعدادی از دسته های دیگر را بررسی کنید.
ممیزی را پیکربندی و اجرا کنید
- هنگامی که پنل حسابرسی برای اولین بار باز می شود، روی دکمه Run Audit در انتهای فرم تمرکز می شود. به‌طور پیش‌فرض، فرم برای اجرای ممیزی برای هر دسته با استفاده از شبیه‌سازی تلفن همراه در یک اتصال 3G شبیه‌سازی شده پیکربندی شده است.
- برای تغییر تنظیمات ممیزی از Shift + Tab استفاده کنید یا در حالت مرور به عقب برگردید.
- وقتی برای اجرای ممیزی آماده شدید، به دکمه Run Audit برگردید و Enter را فشار دهید.
- فوکوس به یک پنجره مودال با دکمه لغو حرکت می کند که به شما امکان می دهد از ممیزی خارج شوید. ممکن است در حین اجرای ممیزی و بازخوانی صفحه چندین بار، یک سری گوشواره بشنوید.
مشکلات شناخته شده
- بخش‌های مختلف فرم پیکربندی در حال حاضر با عنصر
fieldsetعلامت‌گذاری نشده‌اند. ممکن است پیمایش آنها در حالت مرور آسان تر باشد تا بفهمید کدام کنترل ها با هر بخش مرتبط هستند. - پس از پایان اجرای ممیزی، هیچ earcon یا منطقه زنده اعلان نمی شود. به طور کلی حدود 30 ثانیه طول می کشد، پس از آن باید بتوانید به نتایج پیمایش کنید. استفاده از حالت مرور ممکن است ساده ترین راه برای رسیدن به نتایج باشد.
در گزارش حسابرسی پیمایش کنید
گزارش حسابرسی در بخش هایی سازماندهی شده است که با هر یک از دسته های حسابرسی مطابقت دارد. گزارش با لیستی از امتیازات برای هر دسته باز می شود. این امتیازها همچنین پیوندهایی هستند که می توان از آنها برای پرش به بخش های مربوطه استفاده کرد. در هر بخش، عناصر details قابل گسترش وجود دارد که حاوی اطلاعات مربوط به ممیزی های گذرانده شده یا شکست خورده است. به طور پیش فرض، فقط ممیزی های ناموفق نشان داده می شوند. هر بخش با یک عنصر details نهایی که شامل تمام ممیزی های تصویب شده است به پایان می رسد.
برای اجرای ممیزی جدید، از Shift + Tab برای خروج از گزارش استفاده کنید و دکمه Perform An Audit را جستجو کنید.