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

Kayce Basques

خوش آمدید! ویژگی‌های جدیدی که به DevTools در کروم ۶۳ اضافه می‌شوند عبارتند از:

• پشتیبانی از اشکال‌زدایی از راه دور چند کلاینتی
• فضاهای کاری ۲.۰
• چهار حسابرسی جدید .
• اعلان‌های فوری را با داده‌های سفارشی شبیه‌سازی کنید .
• فعال کردن رویدادهای همگام‌سازی پس‌زمینه با برچسب‌های سفارشی .

برای اطلاعات بیشتر، ادامه مطلب را بخوانید یا ویدیوی زیر را تماشا کنید!

پشتیبانی از اشکال‌زدایی از راه دور چند کلاینتی

اگر تا به حال سعی در اشکال‌زدایی یک برنامه از طریق IDEهایی مانند VS Code یا WebStorm داشته‌اید، احتمالاً متوجه شده‌اید که باز کردن DevTools جلسه اشکال‌زدایی شما را به هم می‌ریزد. این مشکل همچنین استفاده از DevTools برای اشکال‌زدایی تست‌های WebDriver را غیرممکن می‌کرد.

از کروم ۶۳ به بعد، DevTools اکنون به طور پیش‌فرض از چندین کلاینت اشکال‌زدایی از راه دور پشتیبانی می‌کند و نیازی به پیکربندی ندارد.

اشکال‌زدایی از راه دور چند کلاینتی ، محبوب‌ترین مشکل DevTools در crbug.com و سومین مشکل در کل پروژه Chromium بود. پشتیبانی چند کلاینتی همچنین فرصت‌های جالبی را برای ادغام سایر ابزارها با DevTools یا استفاده از آن ابزارها به روش‌های جدید ایجاد می‌کند. به عنوان مثال:

• کلاینت‌های پروتکل مانند ChromeDriver یا افزونه‌های اشکال‌زدایی کروم برای VS Code و Webstorm و کلاینت‌های WebSocket مانند Puppeteer، اکنون می‌توانند همزمان با DevTools اجرا شوند.
• دو کلاینت پروتکل WebSocket جداگانه، مانند Puppeteer یا chrome-remote-interface ، اکنون می‌توانند همزمان به یک تب متصل شوند.
• افزونه‌های کروم که از رابط برنامه‌نویسی کاربردی chrome.debugger استفاده می‌کنند، اکنون می‌توانند همزمان با DevTools اجرا شوند.
• چندین افزونه مختلف کروم اکنون می‌توانند به طور همزمان از API chrome.debugger در یک تب استفاده کنند.

فضاهای کاری ۲.۰

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

Workspaces 2.0 بر اساس نسخه 1.0 ساخته شده است و تجربه کاربری مفیدتری را به آن اضافه کرده و نگاشت خودکار کد Transpiled را بهبود بخشیده است. این ویژگی در ابتدا قرار بود اندکی پس از اجلاس توسعه‌دهندگان کروم (CDS) 2016 منتشر شود، اما تیم توسعه‌دهنده آن را به دلیل رفع برخی مشکلات به تعویق انداخت.

برای آشنایی با نحوه‌ی عملکرد Workspaces 2.0، بخش «نویسندگی» (حدود ساعت ۱۴:۲۸) از سخنرانی DevTools در CDS 2016 را بررسی کنید.

چهار حسابرسی جدید

در کروم ۶۳، پنل Audits دارای ۴ حسابرسی جدید است:

• تصاویر را به صورت WebP ارائه دهید.
• از تصاویر با نسبت ابعاد مناسب استفاده کنید.
• از کتابخانه‌های جاوا اسکریپت frontend که آسیب‌پذیری‌های امنیتی شناخته‌شده‌ای دارند، اجتناب کنید.
• خطاهای مرورگر در کنسول ثبت می‌شوند.

برای یادگیری نحوه استفاده از پنل Audits برای بهبود کیفیت صفحات خود، به Run Lighthouse در Chrome DevTools مراجعه کنید.

برای کسب اطلاعات بیشتر در مورد پروژه‌ای که پنل Audits را پشتیبانی می‌کند، به Lighthouse مراجعه کنید.

شبیه سازی اعلان های فوری با داده های سفارشی

شبیه‌سازی اعلان‌های فشاری مدتی است که در DevTools وجود دارد، با یک محدودیت: شما نمی‌توانستید داده‌های سفارشی ارسال کنید. اما با اضافه شدن کادر متنی جدید Push به پنل Service Worker در کروم ۶۳، اکنون می‌توانید این کار را انجام دهید. همین حالا امتحان کنید:

1. به نسخه نمایشی ساده فشاری بروید.
2. روی فعال کردن اعلان‌های فشاری کلیک کنید.
3. وقتی کروم از شما درخواست اجازه دادن به اعلان‌ها را کرد، روی «اجازه دادن» کلیک کنید.
4. ابزار توسعه (DevTools) را باز کنید.
5. به پنل Service Workers بروید.

6. چیزی در کادر متن فشار بنویسید.

   

   شکل ۱. شبیه‌سازی یک اعلان فشاری با داده‌های سفارشی از طریق کادر متنی فشار در پنل Service Worker

7. برای ارسال اعلان، روی «فشار دادن» کلیک کنید.

   

   شکل 2. اعلان فشاری شبیه‌سازی‌شده

فعال‌سازی رویدادهای همگام‌سازی پس‌زمینه با برچسب‌های سفارشی

فعال کردن رویدادهای همگام‌سازی پس‌زمینه نیز مدتی است که در پنل Service Workers وجود دارد، اما اکنون می‌توانید تگ‌های سفارشی ارسال کنید:

1. ابزار توسعه (DevTools) را باز کنید.
2. به پنل Service Workers بروید.
3. متنی را در کادر متن همگام‌سازی وارد کنید.
4. روی همگام‌سازی کلیک کنید.

شکل ۳. پس از کلیک روی همگام‌سازی ، DevTools یک رویداد همگام‌سازی پس‌زمینه با برچسب سفارشی update-content به سرویس ورکر ارسال می‌کند.

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

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

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

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

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

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

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