چیزهای جدید در 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 استفاده کنید.

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.
چیزهای جدید در DevTools

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

کروم 126 کروم 125 کروم 124 کروم 123 کروم 122 کروم 121 کروم 120 کروم 119 کروم 118 کروم 117 کروم 116 کروم 115 کروم 114 کروم 113 کروم 112 کروم 111 کروم 110 کروم 109 کروم 108 کروم 107 کروم 106 کروم 105 کروم 104 کروم 103 کروم 102 کروم 101 کروم 100 کروم 99 کروم 98 کروم 97 کروم 96 کروم 95 کروم 94 کروم 93 کروم 92 کروم 91 کروم 90 کروم 89 کروم 88 کروم 87 کروم 86 کروم 85 کروم 84 کروم 83 کروم 82

Chrome 82 لغو شد .

کروم 81 کروم 80 کروم 79 کروم 78 کروم 77 کروم 76 کروم 75 کروم 74 کروم 73 کروم 72 کروم 71 کروم 70 کروم 68 کروم 67 کروم 66 کروم 65 کروم 64 کروم 63 کروم 62 کروم 61 کروم 60 کروم 59