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

Jecelyn Yeen

ویژگی پیش‌نمایش: پنل جدید مرور کلی CSS

از پنل جدید CSS Overview برای شناسایی بهبودهای احتمالی CSS در صفحه خود استفاده کنید. پنل CSS Overview را باز کنید ، سپس روی Capture overview کلیک کنید تا گزارشی از CSS صفحه شما ایجاد شود.

می‌توانید اطلاعات بیشتری را بررسی کنید. برای مثال، روی یک رنگ در بخش رنگ‌ها کلیک کنید تا لیست عناصری که همان رنگ را اعمال می‌کنند را مشاهده کنید. روی یک عنصر کلیک کنید تا عنصر در پنل عناصر باز شود.

پنل CSS Overview یک ویژگی پیش‌نمایش است. تیم ما هنوز به‌طور فعال روی آن کار می‌کند و منتظر بازخورد شما برای بهبودهای بیشتر هستیم.

برای کسب اطلاعات بیشتر در مورد پنل CSS Overview این مقاله را مطالعه کنید.

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

تجربه ویرایش و کپی طول CSS بازیابی و بهبود یافته است

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

علاوه بر این، می‌توانید برای تنظیم مقدار واحد، آن را بکشید و نوع واحد را از طریق منوی کشویی به‌روزرسانی کنید. این ویژگی اضافه شده برای ویرایش طول متن، نباید بر تجربه ویرایش اولیه به عنوان متن تأثیر بگذارد.

اگر مشکلی پیدا کردید، لطفاً از طریق goo.gle/length-feedback گزارش دهید.

می‌توانید آن را از طریق تنظیمات > آزمایش‌ها > فعال کردن ابزارهای نوشتن طول CSS در کادر انتخاب پنل سبک‌ها غیرفعال کنید.

مشکلات کرومیوم: ۱۲۵۹۰۸۸ ، ۱۱۷۲۹۹۳

به‌روزرسانی‌های تب رندرینگ

ویژگی رسانه ترجیحی-کنتراست CSS را شبیه‌سازی کنید

ویژگی رسانه prefers-contrast برای تشخیص اینکه آیا کاربر کنتراست بیشتر یا کمتری را در صفحه درخواست کرده است، استفاده می‌شود.

منوی Command را باز کنید، دستور Show Rendering را اجرا کنید، و سپس منوی کشویی prefers-contrast مربوط به Emulate CSS media feature را تنظیم کنید.

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

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

از DevTools برای شبیه‌سازی تم تاریک خودکار استفاده کنید تا به راحتی ببینید صفحه شما هنگام فعال بودن تم تاریک خودکار کروم چگونه به نظر می‌رسد.

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

منوی Command را باز کنید، دستور Show Rendering را اجرا کنید و سپس منوی کشویی Emulate auto dark mode را تنظیم کنید.

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

کپی کردن اعلان‌ها به عنوان جاوا اسکریپت در پنل استایل‌ها

دو گزینه جدید در منوی زمینه اضافه شده است تا بتوانید به راحتی قوانین CSS را به عنوان ویژگی‌های جاوا اسکریپت کپی کنید. این گزینه‌های میانبر به خصوص برای توسعه‌دهندگانی که با کتابخانه‌های CSS-in-JS کار می‌کنند، مفید هستند.

در پنل Styles ، روی یک قانون CSS کلیک راست کنید. می‌توانید برای کپی کردن یک قانون، گزینه Copy declaration as JS یا برای کپی کردن همه قوانین، گزینه Copy all declarations as JS را انتخاب کنید.

برای مثال، مثال زیر paddingLeft: '1.5rem' را در کلیپ‌بورد کپی می‌کند.

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

تب جدید Payload در پنل Network

هنگام بررسی درخواست شبکه با payload، از تب جدید Payload در پنل Network استفاده کنید. پیش از این، اطلاعات payload در زیر تب Headers موجود بود.

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

نمایش ویژگی‌ها در پنل ویژگی‌ها بهبود یافته است

پنجره Properties اکنون فقط ویژگی‌های مرتبط را به جای نمایش تمام ویژگی‌های نمونه نشان می‌دهد. نمونه‌های اولیه و متدهای DOM اکنون حذف شده‌اند.

با پیشرفت‌های صورت گرفته در بخش Properties در کروم ۹۵، اکنون می‌توانید Propertyهای مرتبط را راحت‌تر پیدا کنید.

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

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

گزینه‌ای برای پنهان کردن خطاهای CORS در کنسول

می‌توانید خطاهای CORS را در کنسول پنهان کنید. از آنجایی که خطاهای CORS اکنون در تب Issues گزارش می‌شوند، پنهان کردن خطاهای CORS در کنسول می‌تواند به کاهش بی‌نظمی‌ها کمک کند.

در کنسول ، روی آیکون تنظیمات کلیک کنید و تیک گزینه‌ی «نمایش خطاهای CORS در کنسول» را بردارید.

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

پیش‌نمایش و ارزیابی صحیح اشیاء Intl در کنسول

اشیاء Intl اکنون پیش‌نمایش مناسبی دارند و به صورت مشتاقانه در کنسول ارزیابی می‌شوند. قبلاً، اشیاء Intl به صورت مشتاقانه ارزیابی نمی‌شدند.

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

ردیابی‌های پشته ناهمگام و سازگار

کنسول اکنون ردپاهای پشته async را برای توابع async گزارش می‌دهد تا با سایر وظایف ناهمگام سازگار باشد و با آنچه در پشته فراخوانی نشان داده شده است، سازگار باشد.

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

نوار کناری کنسول را حفظ کنید

نوار کناری کنسول اینجا خواهد ماند. در کروم ۹۴، ما منسوخ شدن قریب‌الوقوع نوار کناری کنسول را اعلام کردیم و از توسعه‌دهندگان درخواست بازخورد و نگرانی کردیم.

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

مشکلات کرومیوم: ۱۲۳۲۹۳۷ ، ۱۲۵۵۵۸۶

صفحه کش برنامه منسوخ شده در پنل برنامه

اکنون با حذف پشتیبانی از AppCache در کروم و سایر مرورگرهای مبتنی بر کرومیوم، پنل Application cache در پنل برنامه‌ها حذف شده است.

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

[آزمایشی] صفحه جدید گزارش‌دهی API در پنل برنامه‌ها

API گزارش‌دهی به گونه‌ای طراحی شده است که به شما در نظارت بر نقض امنیت صفحه، فراخوانی‌های API منسوخ‌شده و موارد دیگر کمک کند.

با فعال شدن این آزمایش، اکنون می‌توانید وضعیت گزارش‌ها را در پنل جدید Reporting API در پنل Application مشاهده کنید.

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

با این مقاله درباره API گزارش‌دهی بیشتر بیاموزید.

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

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

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

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

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

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

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

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