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

Jecelyn Yeen

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

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

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

مشکل کرومیوم: ۱۲۰۳۲۴۱

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

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

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

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

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

مشکل کرومیوم: ۱۰۷۶۴۲۷

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

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

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

مشکل کرومیوم: ۱۰۹۴۴۰۶

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

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

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

مشکل کرومیوم: ۱۱۹۲۰۸۴

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

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

مشکل کرومیوم: ۱۱۴۱۸۲۴

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

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

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

مشکل کرومیوم: ۱۲۰۱۳۹۸

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

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

مشکل کرومیوم: ۱۱۰۳۶۳۸

نکات مربوط به کلاینت User-Agent برای دستگاه‌ها در تب Network conditions

نکات مربوط به کلاینت User-Agent اکنون برای دستگاه‌های موجود در فیلد User agent در تب Network conditions اعمال می‌شوند.

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

مشکل کرومیوم: ۱۱۷۴۲۹۹

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

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

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

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

مشکل کرومیوم: ۶۲۲۶۶۰

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

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

مشکل کرومیوم: ۱۱۹۹۱۳۷

فانوس دریایی ۷.۵ در پنل فانوس دریایی

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

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

مشکل کرومیوم: ۷۷۲۵۵۸

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

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

مشکل کرومیوم: ۱۲۰۳۶۰۶

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

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

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

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

مشکلات کرومیوم: ۱۲۰۴۰۰۴ ، ۱۲۰۴۴۶۶

[آزمایشی] دستگاه ضبط صدای عروسک‌گردان

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

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

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

مشکل کرومیوم: ۱۱۹۹۷۸۷

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

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

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

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

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

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

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