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

کیسی باسکی

خوش برگشتی! ویژگی‌های جدیدی که در Chrome 63 به DevTools می‌آیند عبارتند از:

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

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

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

از Chrome 63، DevTools اکنون از چندین کلاینت اشکال زدایی راه دور به صورت پیش فرض پشتیبانی می کند، بدون نیاز به پیکربندی.

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

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

فضاهای کاری 2.0

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

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

بخش «نویسندگی» (حدود ساعت 14:28) بحث DevTools از CDS 2016 را بررسی کنید تا Workspaces 2.0 را در عمل ببینید.

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

در Chrome 63، پانل حسابرسی دارای 4 ممیزی جدید است:

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

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

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

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

شبیه سازی اعلان های فشار برای مدتی در DevTools وجود داشته است، با یک محدودیت: شما نمی توانید داده های سفارشی ارسال کنید. اما با آمدن جعبه متن Push جدید به بخش Service Worker در Chrome 63، اکنون می توانید. الآن امتحانش کن:

  1. به Simple Push Demo بروید.
  2. روی Enable Push Notifications کلیک کنید.
  3. هنگامی که Chrome از شما می خواهد اعلان ها را مجاز کنید، روی Allow کلیک کنید.
  4. DevTools را باز کنید.
  5. به بخش Service Workers بروید.

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

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

    شکل 1 . شبیه سازی یک اعلان فشار با داده های سفارشی از طریق کادر متنی Push در بخش Service Worker

  7. برای ارسال اعلان روی Push کلیک کنید.

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

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

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

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

  1. DevTools را باز کنید.
  2. به بخش Service Workers بروید.
  3. مقداری متن را در کادر متن Sync وارد کنید.
  4. روی همگام سازی کلیک کنید.

راه اندازی یک رویداد همگام سازی پس زمینه سفارشی

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

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

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

تماس با تیم Chrome DevTools

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

  • پیشنهاد یا بازخورد خود را از طریق crbug.com برای ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، مشکل DevTools را گزارش کنیدبیشتر > راهنما > گزارش مشکلات DevTools در DevTools.
  • توییت در @ChromeDevTools .
  • نظرات خود را در مورد ویدیوهای YouTube DevTools یا نکات DevTools در YouTube ما بنویسید.

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

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

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

کروم 118

کروم 117

کروم 116

کروم 115

کروم 114

کروم 113

کروم 112

کروم 111

کروم 110

کروم 109

کروم 108

کروم 107

کروم 106

کروم 105

کروم 104

کروم 103

کروم 102

کروم 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

کروم 90

کروم 89

کروم 88

کروم 87

کروم 86

کروم 85

کروم 84

کروم 83

کروم 82

Chrome 82 لغو شد .

کروم 81

کروم 80

کروم 79

کروم 78

کروم 77

کروم 76

کروم 75

کروم 74

کروم 73

کروم 72

کروم 71

کروم 70

کروم 68

کروم 67

کروم 66

کروم 65

کروم 64

کروم 63

کروم 62

کروم 61

کروم 60

کروم 59