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

کیسی باسکی

سلام! در اینجا موارد جدید در Chrome DevTools در Chrome 75 آمده است.

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

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

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

رفتار تکمیل خودکار قدیمی.

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

رفتار تکمیل خودکار جدید.

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

مشکل مربوط به Chromium: #931145

اطلاعات سایت را از منوی فرمان پاک کنید

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

دستور Clear Site Data.

شکل 3 . دستور Clear Site Data .

پاک کردن اطلاعات سایت مدتی است که از Application > Clear Storage در دسترس است. ویژگی جدید در کروم 75 این است که می‌تواند فرمان را از منوی فرمان اجرا کند.

اگر نمی‌خواهید همه داده‌های سایت را حذف کنید، می‌توانید از Application > Clear Storage کنترل کنید که چه داده‌هایی حذف می‌شوند.

برگه «برنامه» با «پاک کردن فضای ذخیره‌سازی» انتخاب شده است.

شکل 4 . Application > Clear Storage .

مشکل مربوط به Chromium: #942503

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

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

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

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

رفتار جدید پایگاه داده های نسخه ی نمایشی قابل مشاهده است.

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

مشکل مربوط به Chromium: #943770

اندازه غیر فشرده یک منبع را در حالت شناور مشاهده کنید

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

برای مشاهده اندازه فشرده نشده یک منبع، روی ستون Size حرکت کنید.

شکل 7 . برای مشاهده اندازه فشرده نشده یک منبع، روی ستون Size حرکت کنید.

مشکل مربوط به Chromium: #805429

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

فرض کنید یک نقطه شکست خط کد را به خط کد زیر اضافه کنید:

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

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

رفتار قدیمی تنها یک ورودی در قسمت Breakpoints وجود دارد.

شکل 8 . رفتار قدیمی فقط 1 ورودی در قسمت Breakpoints وجود دارد.

رفتار جدید 3 ورودی در قسمت Breakpoints وجود دارد.

شکل 9 . رفتار جدید 3 ورودی در قسمت Breakpoints وجود دارد.

مشکل مربوط به Chromium: #927961

تعداد منابع IndexedDB و Cache

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

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

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

مشکلات مربوط به Chromium: #941197 , #930773 , #930865

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

Chrome 73 نکات ابزار دقیقی را در حالت بازرسی معرفی کرد.

یک نکته ابزار دقیق

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

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

یک ابزار حداقلی

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

مشکل مربوط به Chromium: #948417

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

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

اخیراً کارهای زیادی در مورد اینکه خود DevTools UI صفحه کلید قابل پیمایش باشد، انجام شده است. برای اطلاعات بیشتر، Rob's Navigate Chrome DevTools With Assistive Technology را بررسی کنید.

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

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

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

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

چیزهای جدید در DevTools

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