What's New In DevTools (Chrome 92)

ویرایشگر جدول شطرنجی CSS

ویژگی‌ای که بسیار درخواست شده است. اکنون می‌توانید با ویرایشگر جدید CSS Grid،‏ CSS Grid را پیش‌نمایش و تألیف کنید!

ویرایشگر CSS Grid

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

مشکل Chromium:‏ ۱۲۰۳۲۴۱

پشتیبانی از اظهار مجدد const در «کنسول»

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

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

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

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

اعلام مجدد const

مشکل Chromium:‏ ۱۰۷۶۴۲۷

نمایشگر ترتیب منبع

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

نمایشگر ترتیب منبع

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

مشکل Chromium:‏ ۱۰۹۴۴۰۶

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

با کلیک راست کردن روی عنصر iframe در پانل «عناصر»، جزئیات iframe را مشاهده کنید و نمایش جزئیات قاب را انتخاب کنید.

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

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

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

مشکل Chromium:‏ ۱۱۹۲۰۸۴

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

خطاهای هم‌رسانی منبع میان‌مبدئی (CORS) اکنون در زبانه «مشکلات» نشان داده می‌شوند. دلایل مختلفی برای خطاهای CORS وجود دارد. برای درک دلایل و راه‌حل‌های احتمالی، روی هر مشکل کلیک کنید تا ازهم باز شود.

مشکلات CORS در زبانه «مشکلات»

مشکل Chromium:‏ ۱۱۴۱۸۲۴

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

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

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

برچسب واکشی/XHR

مشکل Chromium:‏ ۱۲۰۱۳۹۸

فیلتر کردن نوع منبع Wasm در پانل «شبکه»

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

فیلتر کردن براساس Wasm

مشکل Chromium:‏ ۱۱۰۳۶۳۸

اشاره‌های کارخواه نماینده کاربر برای دستگاه‌ها در برگه «شرایط شبکه»

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

«اشاره‌های کارخواه نماینده کاربر» توسعه جدیدی برای Client Hints API است که به توسعه‌دهندگان امکان می‌دهد به اطلاعات مربوط به مرورگر کاربر به‌روشی ارگونومیک و حافظ حریم خصوصی دسترسی پیدا کنند.

اشاره‌های کارخواه نماینده کاربر برای دستگاه‌ها در برگه «شرایط شبکه»

مشکل Chromium:‏ ۱۱۷۴۲۹۹

گزارش کردن مشکلات حالت غیراستاندارد در برگه «مشکلات»

ازاین‌پس DevTools مشکلات حالت غیراستاندارد و حالت غیراستاندارد محدود را گزارش می‌کند.

«حالت غیراستاندارد» و «حالت غیراستاندارد محدود» حالت‌های قدیمی مرورگر هستند که قبل‌از ایجاد استانداردهای وب وجود داشتند. این حالت‌ها رفتارهای چیدمان دوره پیش‌از استاندارد را شبیه‌سازی می‌کنند که اغلب باعث جلوه‌های دیداری غیرمنتظره می‌شود.

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

گزارش کردن مشکلات حالت غیراستاندارد در برگه «مشکلات»

مشکل Chromium:‏ ۶۲۲۶۶۰

گنجاندن «محاسبه تقاطع‌ها» در پانل «عملکرد»

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

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

مشکل Chromium:‏ ۱۱۹۹۱۳۷

Lighthouse 7.5 در پانل Lighthouse

پانل Lighthouse اکنون Lighthouse 7.5 را اجرا می‌کند. هشدار «عرض و ارتفاع صریح وجود ندارد» اکنون برای تصاویر با aspect-ratio تعریف‌شده در CSS برداشته شده است. قبلاً Lighthouse برای تصاویری که پهنا و ارتفاع آن‌ها تعریف نشده بود هشدار نشان می‌داد.

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

مشکل Chromium:‏ ۷۷۲۵۵۸

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

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

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

مشکل Chromium:‏ ۱۲۰۳۶۰۶

[آزمایشی] پایشگر پروتکل

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

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

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

پایشگر پروتکل

مشکلات Chromium:‏ ۱۲۴۰۰۴،‏ ۱۲۴۴۶۶

[آزمایشی] Puppeteer Recorder

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

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

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

Puppeteer Recorder

مشکل Chromium:‏ ۱۱۹۹۷۸۷

بارگیری کانال‌های پیش‌نمایش

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

تماس با تیم Chrome DevTools

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

تازه‌های DevTools

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