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