چیزهای جدید در DevTools (Chrome 75)

Kayce Basques

سلام! در اینجا به ویژگی‌های جدید Chrome DevTools در کروم ۷۵ می‌پردازیم.

نسخه ویدیویی این صفحه

مقادیر از پیش تعیین‌شده‌ی معنادار هنگام تکمیل خودکار توابع CSS

برخی از ویژگی‌های CSS، مانند filter ، توابعی را برای مقادیر می‌پذیرند. برای مثال، filter: blur(1px) یک blur به اندازه ۱ پیکسل به یک گره اضافه می‌کند. هنگام تکمیل خودکار ویژگی‌هایی مانند filter ، DevTools اکنون ویژگی را با یک مقدار معنادار پر می‌کند تا بتوانید پیش‌نمایشی از نوع تغییری که مقدار روی گره خواهد داشت، مشاهده کنید.

شکل ۱. رفتار قدیمی تکمیل خودکار. DevTools در حال تکمیل خودکار برای filter: blur است و هیچ تغییری در نمای دید قابل مشاهده نیست.

شکل ۲. رفتار جدید تکمیل خودکار. DevTools به صورت خودکار تابع filter: blur(1px) را تکمیل می‌کند و این تغییر در نمای دید قابل مشاهده است.

مشکل مرتبط با کرومیوم: #931145

پاک کردن داده‌های سایت از منوی فرمان

برای باز کردن منوی فرمان ، کلیدهای Control + Shift + P یا Command + Shift + P (مک) را فشار دهید و سپس دستور Clear Site Data را اجرا کنید تا تمام داده‌های مربوط به صفحه، از جمله: Service workerها ، localStorage ، sessionStorage ، IndexedDB ، Web SQL ، Cookies ، Cache و Application Cache پاک شوند.

شکل ۳. دستور پاک کردن داده‌های سایت .

پاک کردن داده‌های سایت مدتی است که از طریق مسیر Application > Clear Storage امکان‌پذیر است. ویژگی جدید در کروم ۷۵ این است که می‌توان این دستور را از طریق منوی Command اجرا کرد.

اگر نمی‌خواهید تمام داده‌های سایت حذف شود، می‌توانید از طریق برنامه > پاک کردن فضای ذخیره‌سازی ، کنترل کنید که چه داده‌هایی حذف شوند.

شکل ۴. برنامه > پاک کردن فضای ذخیره‌سازی .

مشکل مرتبط با کرومیوم: #942503

مشاهده همه پایگاه‌های داده IndexedDB

قبلاً Application > IndexedDB فقط به شما اجازه می‌داد پایگاه‌های داده IndexedDB را از مبدا اصلی بررسی کنید. برای مثال، اگر یک <iframe> در صفحه خود داشتید و آن <iframe> از IndexedDB استفاده می‌کرد، نمی‌توانستید پایگاه داده(های) آن را ببینید. از کروم ۷۵ به بعد، DevTools پایگاه‌های داده IndexedDB را برای همه مبداها نشان می‌دهد.

شکل ۵. رفتار قدیمی. صفحه در حال جاسازی یک نسخه آزمایشی است که از IndexedDB استفاده می‌کند، اما هیچ پایگاه داده‌ای قابل مشاهده نیست.

شکل ۶. رفتار جدید. پایگاه‌های داده‌ی نسخه آزمایشی قابل مشاهده هستند.

مشکل مرتبط با کرومیوم: #943770

مشاهده حجم فشرده نشده یک منبع با نگه داشتن ماوس روی آن

فرض کنید در حال بررسی فعالیت شبکه هستید. سایت شما از فشرده‌سازی متن برای کاهش حجم انتقال منابع استفاده می‌کند. شما می‌خواهید ببینید که حجم منابع صفحه پس از خارج کردن آنها از حالت فشرده توسط مرورگر چقدر است. قبلاً این اطلاعات فقط هنگام استفاده از ردیف‌های درخواست بزرگ در دسترس بود. اکنون می‌توانید با نگه داشتن ماوس روی ستون Size به این اطلاعات دسترسی پیدا کنید.

شکل ۷. نشانگر ماوس را روی ستون اندازه نگه دارید تا اندازه فشرده‌نشده‌ی منبع را مشاهده کنید.

مشکل مرتبط با کرومیوم: #805429

نقاط شکست درون‌خطی در پنجره نقاط شکست

فرض کنید یک نقطه توقف خط کد به خط کد زیر اضافه می‌کنید:

document.querySelector('#dante').addEventListener('click', logWarning);

مدتی است که DevTools به شما این امکان را می‌دهد که مشخص کنید دقیقاً چه زمانی باید روی یک نقطه توقف مکث کند، مانند این: در ابتدای خط، قبل از اینکه document.querySelector('#dante') فراخوانی شود، یا قبل از اینکه addEventListener('click', logWarning) فراخوانی شود. اگر هر سه مورد را فعال کنید، اساساً 3 نقطه توقف ایجاد می‌کنید. پیش از این، پنل Breakpoints به شما امکان مدیریت جداگانه این 3 نقطه توقف را نمی‌داد. از کروم 75 به بعد، هر نقطه توقف درون‌خطی ورودی مخصوص به خود را در پنل Breakpoints دارد.

شکل ۸. رفتار قدیمی. فقط ۱ ورودی در پنل Breakpoints وجود دارد.

شکل ۹. رفتار جدید. ۳ ورودی در پنل Breakpoints وجود دارد.

مشکل مرتبط با کرومیوم: #927961

شمارش منابع IndexedDB و Cache

بخش‌های IndexedDB و Cache اکنون تعداد کل منابع موجود در یک پایگاه داده یا حافظه پنهان را نشان می‌دهند.

شکل 10. کل ورودی‌ها در یک پایگاه داده IndexedDB.

مشکلات مرتبط با کرومیوم: #۹۴۱۱۹۷ ، #۹۳۰۷۷۳ ، #۹۳۰۸۶۵

تنظیم غیرفعال کردن راهنمای ابزار بازرسی دقیق

کروم ۷۳ در حالت بازرسی (Inspect mode) ابزارک‌های دقیقی را معرفی کرد.

شکل ۱۱. یک راهنمای ابزار دقیق که رنگ، فونت، حاشیه و کنتراست را نشان می‌دهد.

اکنون می‌توانید این راهنماهای ابزار دقیق را از تنظیمات > تنظیمات برگزیده > عناصر > نمایش راهنمای ابزار دقیق غیرفعال کنید.

شکل ۱۲. یک راهنمای ابزار مینیمال که فقط عرض و ارتفاع را نشان می‌دهد.

مشکل مرتبط با کرومیوم: #948417

تنظیم تغییر تورفتگی تب در ویرایشگر پنل منابع

آزمایش دسترسی‌پذیری نشان داد که یک تله تب در ویرایشگر وجود دارد. هنگامی که کاربر صفحه‌کلید با کلید Tab وارد ویرایشگر می‌شد، هیچ راهی برای خروج از آن نداشت زیرا از کلید Tab برای ایجاد تورفتگی استفاده می‌شد. برای لغو رفتار پیش‌فرض و استفاده از Tab برای جابجایی فوکوس، تنظیمات > تنظیمات برگزیده > منابع > فعال کردن جابجایی‌های تب فوکوس را فعال کنید.

اخیراً کارهای زیادی در مورد قابل پیمایش‌تر کردن رابط کاربری DevTools با کیبورد انجام شده است. برای کسب اطلاعات بیشتر، به مقاله‌ی «ابزارهای توسعه‌ی کروم را با فناوری کمکی هدایت کنید» از راب مراجعه کنید.

دانلود کانال‌های پیش‌نمایش

استفاده از Chrome Canary ، Dev یا Beta را به عنوان مرورگر پیش‌فرض توسعه خود در نظر بگیرید. این کانال‌های پیش‌نمایش به شما امکان دسترسی به جدیدترین ویژگی‌های DevTools را می‌دهند، به شما امکان می‌دهند APIهای پلتفرم وب پیشرفته را آزمایش کنید و به شما کمک می‌کنند قبل از کاربران، مشکلات سایت خود را پیدا کنید!

با تیم Chrome DevTools تماس بگیرید

از گزینه‌های زیر برای بحث در مورد ویژگی‌های جدید، به‌روزرسانی‌ها یا هر چیز دیگری که مربوط به DevTools است، استفاده کنید.

• بازخوردها و درخواست‌های مربوط به ویژگی‌های جدید را برای ما در crbug.com ارسال کنید.
• با استفاده از more_vert مشکل DevTools را گزارش دهید. گزینه‌های بیشتر > راهنما > گزارش مشکل DevTools در DevTools.
• توییت در @ChromeDevTools .
• نظرات خود را در مورد ویدیوهای یوتیوب «چه چیزهایی در DevTools جدید است» یا ویدیوهای یوتیوب «نکات DevTools» بنویسید.

قابلیت‌های جدید در DevTools

فهرستی از تمام مواردی که در مجموعه «چه چیزهای جدیدی در DevTools» پوشش داده شده است.