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

جسلین ین

ویرایشگر شبکه CSS

یک ویژگی بسیار درخواستی اکنون می توانید CSS Grid را با ویرایشگر جدید CSS Grid پیش نمایش و نگارش کنید!

ویرایشگر CSS Grid

هنگامی که یک عنصر HTML در صفحه شما دارای display: grid یا display: inline-grid روی آن اعمال می شود، می توانید نمادی را در کنار آن در پانل Styles مشاهده کنید. روی نماد کلیک کنید تا ویرایشگر شبکه CSS را تغییر دهید. در اینجا می‌توانید تغییرات احتمالی را با نمادهای روی صفحه نمایش دهید (مثلاً justify-content: space-around ) و ظاهر شبکه را تنها با یک کلیک بنویسید.

شماره Chromium: 1203241

پشتیبانی از اعلان مجدد const در کنسول

کنسول اکنون از اعلان مجدد عبارت const ، علاوه بر اعلان مجدد let و class ، پشتیبانی می کند. عدم توانایی در اعلام مجدد یک مزاحمت رایج برای توسعه دهندگان وب بود که از کنسول برای آزمایش کدهای جاوا اسکریپت جدید استفاده می کنند.

این به توسعه دهندگان این امکان را می دهد تا کد را در کنسول DevTools کپی-پیست کنند تا ببینند چگونه کار می کند یا آزمایش کنند، تغییرات کوچکی در کد ایجاد کنند و این روند را بدون بازخوانی صفحه تکرار کنند. قبلاً، اگر کد یک const binding را مجدداً اعلام می کرد، DevTools یک خطای نحوی ایجاد می کرد.

به مثال زیر مراجعه کنید. اعلام مجدد const در اسکریپت های جداگانه REPL پشتیبانی می شود (به متغیر a مراجعه کنید). توجه داشته باشید که سناریوهای زیر توسط طراحی پشتیبانی نمی شوند:

  • اعلام مجدد const اسکریپت های صفحه در اسکریپت های REPL مجاز نیست
  • اعلام مجدد const در همان اسکریپت REPL مجاز نیست (به متغیر b مراجعه کنید)

مجددا اعلامیه ها

شماره Chromium: 1076427

نمایشگر سفارش منبع

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

نمایشگر سفارش منبع

ترتیب محتوا در یک سند HTML برای بهینه سازی و دسترسی به موتورهای جستجو مهم است. ویژگی‌های جدیدتر CSS به توسعه‌دهندگان اجازه می‌دهد محتوایی ایجاد کنند که از نظر ترتیب روی صفحه با آنچه در سند HTML است بسیار متفاوت به نظر برسد. این یک مشکل دسترسی بزرگ است زیرا کاربران صفحه‌خوان تجربه‌ای متفاوت و احتمالاً گیج‌کننده نسبت به کاربران بینا دارند.

شماره کرومیوم: 1094406

میانبر جدید برای مشاهده جزئیات قاب

جزئیات iframe را با کلیک راست روی عنصر iframe در پانل Elements مشاهده کنید و Show frame details را انتخاب کنید.

نمایش جزئیات قاب

این شما را به نمای جزئیات iframe در پانل برنامه می برد، جایی که می توانید جزئیات سند، وضعیت امنیت و جداسازی، خط مشی مجوزها و موارد دیگر را برای رفع اشکالات احتمالی بررسی کنید.

نمای جزئیات قاب

شماره Chromium: 1192084

پشتیبانی از اشکال زدایی CORS پیشرفته

خطاهای اشتراک‌گذاری منابع متقاطع (CORS) اکنون در برگه مشکلات ظاهر شده‌اند. دلایل مختلفی برای ایجاد خطاهای CORS وجود دارد. برای درک علل و راه حل های بالقوه، برای گسترش هر موضوع کلیک کنید.

مشکلات CORS در برگه Issues

شماره Chromium: 1141824

به روز رسانی پنل شبکه

نام برچسب XHR را به Fetch/XHR تغییر دهید

برچسب XHR اکنون به Fetch/XHR تغییر نام داده است. این تغییر واضح تر می کند که این فیلتر شامل درخواست های شبکه XMLHttpRequest و Fetch API است.

برچسب Fetch/XHR

شماره Chromium: 1201398

نوع منبع Wasm را در پنل Network فیلتر کنید

اکنون می توانید روی دکمه Wasm جدید کلیک کنید تا درخواست های شبکه Wasm فیلتر شود.

فیلتر توسط Wasm

شماره Chromium: 1103638

راهنمای کاربر-عامل مشتری برای دستگاه‌های موجود در برگه شرایط شبکه

راهنمای کاربر-عامل مشتری اکنون برای دستگاه‌های موجود در قسمت عامل کاربر در برگه شرایط شبکه اعمال می‌شود.

User-Agent Client Hints گسترش جدیدی برای Client Hints API است که توسعه دهندگان را قادر می سازد به اطلاعات مربوط به مرورگر کاربر به روشی ارگونومیک و حفظ حریم خصوصی دسترسی داشته باشند.

راهنمای کاربر-عامل مشتری برای دستگاه‌های موجود در برگه شرایط شبکه

شماره Chromium: 1174299

مشکلات حالت Quirks را در برگه Issues گزارش کنید

DevTools اکنون مشکلات Quirks Mode و Limited-quirks Mode را گزارش می کند.

حالت Quirks و Limited-quirks Mode حالت‌های مرورگر قدیمی از قبل از ساخته شدن استانداردهای وب هستند. این حالت‌ها رفتارهای چیدمان قبل از دوران استاندارد را تقلید می‌کنند که اغلب باعث ایجاد جلوه‌های بصری غیرمنتظره می‌شوند.

هنگام اشکال‌زدایی مشکلات طرح‌بندی، توسعه‌دهندگان ممکن است فکر کنند که این اشکال ناشی از اشکالات CSS یا HTML توسط کاربر است، در حالی که مشکل واقعی حالت Compat است که صفحه در آن قرار دارد. DevTools پیشنهادهایی برای رفع آن ارائه می‌دهد.

مشکلات حالت Quirks را در برگه Issues گزارش کنید

شماره کرومیوم: 622660

Compute Intersections را در پنل Performance قرار دهید

DevTools اکنون تقاطع های محاسبه را در نمودار شعله نشان می دهد. این تغییرات به شما کمک می‌کند تا رویدادهای ناظر تقاطع را شناسایی کرده و سربار عملکرد بالقوه آن را رفع اشکال کنید.

تقاطع ها را در پانل عملکرد محاسبه کنید

شماره Chromium: 1199137

Lighthouse 7.5 در پنل Lighthouse

پنل Lighthouse اکنون Lighthouse 7.5 را اجرا می کند. اخطار «فقدان عرض و ارتفاع صریح» اکنون برای تصاویر با aspect-ratio تعریف شده در CSS حذف شده است. پیش از این، Lighthouse هشدارهایی را برای تصاویر بدون عرض و ارتفاع نشان می داد.

برای لیست کامل تغییرات، یادداشت های انتشار را بررسی کنید.

شماره Chromium: 772558

منوی زمینه «راه‌اندازی مجدد قاب» در پشته تماس منسوخ شده است

اکنون گزینه Restart frame منسوخ شده است. این ویژگی به توسعه بیشتر نیاز دارد تا به خوبی کار کند، در حال حاضر خراب است و اغلب خراب می شود.

منوی زمینه قاب راه‌اندازی مجدد منسوخ شده است

شماره کرومیوم: 1203606

[تجربی] مانیتور پروتکل

Chrome DevTools از پروتکل Chrome DevTools Protocol (CDP) برای ابزارسازی، بازرسی، اشکال زدایی و نمایه مرورگرهای Chrome استفاده می کند. مانیتور پروتکل راهی برای مشاهده تمام درخواست‌ها و پاسخ‌های CDP ارائه شده توسط DevTools در اختیار شما قرار می‌دهد.

دو عملکرد جدید برای تسهیل تست CDP اضافه شده است:

  • دکمه ذخیره جدید به شما امکان می دهد پیام های ضبط شده را به عنوان یک فایل JSON دانلود کنید
  • یک فیلد جدید که به شما امکان می دهد یک دستور خام CDP را مستقیماً ارسال کنید

مانیتور پروتکل

مسائل Chromium: 1204004 ، 1204466

[تجربی] ضبط عروسکی

ضبط کننده Puppeteer اکنون لیستی از مراحل را بر اساس تعامل شما با مرورگر ایجاد می کند، در حالی که قبلاً DevTools به جای آن مستقیماً یک اسکریپت Puppeteer تولید می کرد. یک دکمه Export جدید اضافه شده است تا به شما امکان می دهد مراحل را به عنوان یک اسکریپت Puppeteer صادر کنید.

پس از ضبط مراحل می توانید از دکمه Replay جدید برای پخش مجدد مراحل استفاده کنید. دستورالعمل های اینجا را دنبال کنید تا یاد بگیرید چگونه ضبط را شروع کنید.

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

ضبط عروسک گردان

شماره Chromium: 1199787

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

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

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

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

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

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