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

کیسی باسکی

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

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

لغوهای محلی

Local Overrides به شما امکان می دهد تغییراتی را در DevTools ایجاد کنید و این تغییرات را در بارگذاری صفحه حفظ کنید. قبلاً، هر تغییری که در DevTools ایجاد کرده بودید، هنگام بارگیری مجدد صفحه از بین می رفت. Local Override برای اکثر انواع فایل ها کار می کند، با چند استثنا. محدودیت ها را ببینید.

تداوم تغییر CSS در بارگیری صفحه با لغوهای محلی.

شکل 1 . تداوم تغییر CSS در بارگیری صفحه با لغوهای محلی

چگونه کار می کند:

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

برای تنظیم Local Override :

  1. پنل Sources را باز کنید.

  2. تب Overrides را باز کنید.

    تب Overrides

    شکل 2 . تب Overrides

  3. روی Setup Overrides کلیک کنید.

  4. انتخاب کنید که می خواهید تغییرات خود را در کدام دایرکتوری ذخیره کنید.

  5. در بالای نمای خود، روی Allow کلیک کنید تا به DevTools دسترسی خواندن و نوشتن به دایرکتوری داده شود.

  6. تغییرات خود را انجام دهید

محدودیت ها

  • DevTools تغییرات ایجاد شده در DOM Tree پانل Elements را ذخیره نمی کند. به جای آن HTML را در پانل منابع ویرایش کنید.
  • اگر CSS را در قسمت Styles ویرایش کنید و منبع آن CSS یک فایل HTML باشد، DevTools تغییر را ذخیره نخواهد کرد. به جای آن فایل HTML را در پانل منابع ویرایش کنید.
  • فضاهای کاری DevTools به طور خودکار منابع شبکه را به یک مخزن محلی نگاشت می کند. هر زمان که تغییری در DevTools ایجاد می‌کنید، این تغییر در مخزن محلی شما نیز ذخیره می‌شود.

تب تغییرات

تغییراتی را که به صورت محلی در DevTools انجام می دهید از طریق برگه تغییرات جدید ردیابی کنید.

تب تغییرات

شکل 3 . تب تغییرات

ابزارهای دسترسی جدید

برای بررسی ویژگی‌های دسترس‌پذیری یک عنصر از صفحه دسترسی جدید استفاده کنید، و نسبت کنتراست عناصر متنی را در انتخابگر رنگ بررسی کنید تا مطمئن شوید که برای کاربرانی که دارای اختلالات بینایی کم یا نقص‌های دید رنگی هستند در دسترس هستند.

صفحه دسترسی

برای بررسی ویژگی‌های دسترس‌پذیری عنصر انتخاب‌شده فعلی، از پنجره Accessibility در پانل Elements استفاده کنید.

صفحه دسترسی

شکل 4 . پنجره Accessibility ویژگی های ARIA و ویژگی های محاسبه شده را برای عنصری که در حال حاضر در درخت DOM در پانل Elements انتخاب شده است و همچنین موقعیت آن در درخت دسترسی را نشان می دهد.

A11ycast Rob Dodson را در برچسب زیر بررسی کنید تا پنجره Accessibility را در عمل ببینید.

نسبت کنتراست در Color Picker

Color Picker اکنون نسبت کنتراست عناصر متن را به شما نشان می دهد. افزایش نسبت کنتراست عناصر متنی، سایت شما را برای کاربرانی که دارای اختلالات بینایی کم یا کمبود دید رنگی هستند، قابل دسترس تر می کند. برای آشنایی بیشتر با نحوه تأثیر نسبت کنتراست بر دسترسی، به رنگ و کنتراست مراجعه کنید.

بهبود تضاد رنگ عناصر متنی شما باعث می شود سایت شما برای همه کاربران قابل استفاده تر باشد. به عبارت دیگر، اگر متن شما خاکستری با پس زمینه سفید باشد، خواندن آن برای کسی سخت است.

بررسی نسبت کنتراست عنصر H1 برجسته شده.

شکل 5 . بررسی نسبت کنتراست عنصر h1 برجسته شده

در شکل 5 ، دو علامت تیک کنار 4.61 به این معنی است که این عنصر با نسبت کنتراست توصیه شده افزایش یافته (AAA) مطابقت دارد. اگر فقط یک علامت داشت، به این معنی است که حداقل نسبت کنتراست توصیه شده (AA) را دارد.

روی نمایش بیشتر کلیک کنید بیشتر نشان بده، اطلاعات بیشتر برای گسترش بخش نسبت کنتراست . خط سفید در کادر Color Spectrum مرز بین رنگ‌هایی را نشان می‌دهد که نسبت کنتراست توصیه‌شده را برآورده می‌کنند و آن‌هایی که ندارند. برای مثال، از آنجایی که رنگ خاکستری در شکل 6 مطابق با توصیه‌ها است، به این معنی است که همه رنگ‌های زیر خط سفید نیز با توصیه‌ها مطابقت دارند.

بخش گسترش یافته نسبت کنتراست.

شکل 6 . بخش گسترش یافته نسبت کنتراست

پانل ممیزی دارای یک ممیزی دسترسی خودکار است تا اطمینان حاصل شود که هر عنصر متنی در یک صفحه دارای نسبت کنتراست کافی است.

برای آشنایی با نحوه استفاده از پنل حسابرسی برای آزمایش دسترسی، به Run Lighthouse در Chrome DevTools مراجعه کنید، یا A11ycast را در زیر تماشا کنید.

ممیزی های جدید

Chrome 65 با دسته بندی کاملاً جدیدی از ممیزی SEO و بسیاری از ممیزی های عملکرد جدید عرضه می شود.

ممیزی های جدید سئو

اطمینان از اینکه صفحات شما هر یک از ممیزی های دسته بندی جدید سئو را می گذرانند، ممکن است به بهبود رتبه بندی موتور جستجوی شما کمک کند.

دسته بندی جدید سئو حسابرسی.

شکل 7 . دسته بندی جدید سئو حسابرسی

ممیزی عملکرد جدید

Chrome 65 همچنین با بسیاری از ممیزی‌های عملکرد جدید عرضه می‌شود:

  • زمان راه اندازی جاوا اسکریپت زیاد است
  • از سیاست کش ناکارآمد در دارایی های ثابت استفاده می کند
  • از تغییر مسیر صفحه جلوگیری می کند
  • سند از افزونه ها استفاده می کند
  • CSS را کوچک کنید
  • جاوا اسکریپت را کوچک کنید

پرف مهمه! پس از اینکه Mynet سرعت بارگذاری صفحه خود را تا 4 برابر بهبود بخشید، کاربران 43 درصد زمان بیشتری را در سایت سپری کردند، 34 درصد صفحات بیشتری را مشاهده کردند، نرخ پرش 24 درصد کاهش یافت و درآمد به ازای هر بازدید از صفحه مقاله 25 درصد افزایش یافت. بیشتر بدانید .

نکته! اگر می خواهید عملکرد بارگذاری صفحات خود را بهبود بخشید، اما نمی دانید از کجا شروع کنید، پنل حسابرسی را امتحان کنید. شما به آن یک URL می‌دهید، و گزارش مفصلی در مورد روش‌های مختلفی که می‌توانید آن صفحه را بهبود ببخشید، به شما ارائه می‌دهد. شروع کنید .

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

کد قابل اعتماد همراه با کارگران و کد ناهمزمان

Chrome 65 به‌روزرسانی‌هایی را به Step Into ارائه می‌کند قدم به هنگامی که وارد کدی می شوید که پیام ها را بین رشته ها و کدهای ناهمزمان ارسال می کند را فشار دهید. اگر رفتار پله پله قبلی را می خواهید، می توانید از Step جدید استفاده کنید گام در عوض دکمه

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

وقتی وارد کدی می شوید که پیام ها را بین رشته ها ارسال می کند، DevTools اکنون به شما نشان می دهد که در هر رشته چه اتفاقی می افتد.

به عنوان مثال، برنامه در شکل 8 پیامی را بین رشته اصلی و رشته کارگر ارسال می کند. پس از ورود به فراخوانی postMessage() در رشته اصلی، DevTools در کنترل کننده onmessage در رشته کارگر مکث می کند. خود کنترل کننده onmessage یک پیام را به موضوع اصلی ارسال می کند. وارد شدن به آن فراخوانی، DevTools را در رشته اصلی متوقف می‌کند.

ورود به کد ارسال پیام در Chrome 65.

شکل 8 . ورود به کد ارسال پیام در Chrome 65

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

ورود به کد ارسال پیام در Chrome 63.

شکل 9 . ورود به کد ارسال پیام در Chrome 63

ورود به کدهای ناهمزمان

در هنگام ورود به کد ناهمزمان، DevTools اکنون فرض می کند که می خواهید در کد ناهمزمان که در نهایت اجرا می شود، مکث کنید.

به عنوان مثال، در شکل 10 پس از ورود به setTimeout() ، DevTools تمام کدهای منتهی به آن نقطه را در پشت صحنه اجرا می کند و سپس در تابعی که به setTimeout() ارسال می شود مکث می کند.

ورود به کد ناهمزمان در کروم 65.

شکل 10 . ورود به کد ناهمزمان در کروم 65

همانطور که در شکل 11 می بینید، زمانی که وارد کدی مانند این در کروم 63 شدید، DevTools همزمان با اجرا شدن کد، مکث کرد.

ورود به کد ناهمزمان در کروم 63.

شکل 11 . ورود به کد ناهمزمان در کروم 63

چندین ضبط در پنل عملکرد

اکنون پانل عملکرد به شما امکان می دهد تا حداکثر 5 ضبط را به طور موقت ذخیره کنید. هنگامی که پنجره DevTools خود را می بندید، ضبط ها حذف می شوند. برای اینکه با پنل Performance راحت باشید ، به شروع با تجزیه و تحلیل عملکرد زمان اجرا مراجعه کنید.

انتخاب بین چندین ضبط در پانل Performance.

شکل 12 . انتخاب بین چندین ضبط در پانل عملکرد

پاداش: خودکار کردن اقدامات DevTools با Puppeteer 1.0

نسخه 1.0 Puppeteer، یک ابزار اتوماسیون مرورگر که توسط تیم Chrome DevTools نگهداری می شود، اکنون منتشر شده است. می‌توانید از Puppeteer برای خودکارسازی بسیاری از کارهایی که قبلاً فقط از طریق DevTools در دسترس بودند، مانند گرفتن اسکرین‌شات‌ها استفاده کنید:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

همچنین دارای API برای بسیاری از کارهای اتوماسیون مفید است، مانند تولید PDF:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

برای اطلاعات بیشتر به شروع سریع مراجعه کنید.

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

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

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

تماس با تیم Chrome DevTools

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

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

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

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

کروم 126

کروم 125

کروم 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

Chrome 73

کروم 72

کروم 71

Chrome 70

کروم 68

کروم 67

کروم 66

کروم 65

کروم 64

کروم 63

کروم 62

کروم 61

کروم 60

کروم 59

،

کیس باس

ویژگی های جدید به Devtools در Chrome 65 شامل موارد زیر است:

در زیر بخوانید ، یا نسخه ویدیویی این یادداشت های نسخه را در زیر مشاهده کنید.

نادیده گرفتن محلی

غلبه های محلی به شما امکان می دهد تغییراتی در devtools ایجاد کنید و آن تغییرات را در بارهای صفحه نگه دارید. پیش از این ، هر تغییری که در DevTools ایجاد کرده اید ، هنگام بارگیری مجدد صفحه از بین می رود. نادیده گرفتن محلی برای اکثر انواع پرونده ها ، با چند استثنا. محدودیت ها را ببینید.

ادامه یک تغییر CSS در بارهای صفحه با غلبه های محلی.

شکل 1 . ادامه یک تغییر CSS در بارهای صفحه با غلبه های محلی

چگونه کار می کند:

  • شما دایرکتوری را مشخص می کنید که DevTools باید تغییرات را ذخیره کند.
  • هنگامی که در DevTools تغییراتی ایجاد می کنید ، DevTools یک نسخه از پرونده اصلاح شده را در فهرست خود ذخیره می کند.
  • هنگامی که صفحه را بارگیری می کنید ، DevTools به جای منبع شبکه ، به پرونده محلی و اصلاح شده خدمت می کند.

برای تنظیم نادیده گرفتن محلی :

  1. پانل منابع را باز کنید.

  2. برگه Overrides را باز کنید.

    برگه Overrides

    شکل 2 . برگه Overrides

  3. روی Setup Overrides کلیک کنید.

  4. انتخاب کنید که کدام فهرست را می خواهید تغییرات خود را در آن ذخیره کنید.

  5. در بالای دیدگاه خود ، روی اجازه دهید تا DevTools را بخواند و به دایرکتوری دسترسی پیدا کند.

  6. تغییرات خود را انجام دهید

محدودیت ها

  • DevTools تغییرات ایجاد شده در درخت DOM از پانل عناصر را ذخیره نمی کند. به جای آن ، HTML را در پانل منابع ویرایش کنید.
  • اگر CSS را در صفحه سبک ویرایش کنید ، و منبع آن CSS یک فایل HTML است ، DevTools تغییر را ذخیره نمی کند. به جای آن ، پرونده HTML را در پانل منابع ویرایش کنید.
  • فضای کاری DevTools به طور خودکار منابع شبکه را به یک مخزن محلی ترسیم می کند. هر زمان که در DevTools تغییر ایجاد کنید ، این تغییر در مخزن محلی شما نیز ذخیره می شود.

برگه تغییرات

تغییراتی را که به صورت محلی در DevTools از طریق برگه New Change ایجاد می کنید ، ردیابی کنید.

برگه تغییرات

شکل 3 . برگه تغییرات

ابزارهای دسترسی جدید

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

صفحه قابل دسترسی

برای بررسی خصوصیات دسترسی عنصر در حال حاضر انتخاب شده از صفحه دسترسی در پانل عناصر استفاده کنید.

صفحه دسترسی

شکل 4 . صفحه دسترسی ویژگی های ARIA و خصوصیات محاسبه شده را برای عنصری که در حال حاضر در درخت DOM در پنل عناصر انتخاب شده است ، و همچنین موقعیت آن در درخت دسترسی را نشان می دهد.

برای دیدن صفحه دسترسی در عمل ، از A11Ycast Rob Dodson در برچسب زدن در زیر دیدن کنید.

نسبت کنتراست در انتخاب رنگ

انتخاب کننده رنگ اکنون نسبت کنتراست عناصر متنی را به شما نشان می دهد. افزایش نسبت کنتراست عناصر متنی باعث می شود سایت شما برای کاربران با اختلالات کم نظیر یا کمبودهای رنگی در دسترس باشد. برای کسب اطلاعات بیشتر در مورد چگونگی تأثیر نسبت کنتراست بر دسترسی ، به رنگ و تضاد مراجعه کنید.

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

بازرسی نسبت کنتراست عنصر H1 برجسته.

شکل 5 . بازرسی نسبت کنتراست عنصر h1 برجسته

در شکل 5 ، دو علامت در کنار 4.61 به این معنی است که این عنصر با نسبت کنتراست توصیه شده پیشرفته (AAA) مطابقت دارد. اگر فقط یک علامت چک داشته باشد ، این بدان معنی است که حداقل نسبت کنتراست توصیه شده (AA) را برآورده می کند.

روی نمایش بیشتر کلیک کنید بیشتر نشان بده، اطلاعات بیشتر برای گسترش بخش نسبت کنتراست . خط سفید موجود در جعبه طیف رنگ ، مرز بین رنگ هایی را که نسبت کنتراست توصیه شده را برآورده می کنند ، و مواردی که انجام نمی دهند ، نشان می دهد. به عنوان مثال ، از آنجا که رنگ خاکستری در شکل 6 توصیه ها را برآورده می کند ، این بدان معنی است که تمام رنگ های زیر خط سفید نیز توصیه هایی را برآورده می کنند.

بخش نسبت کنتراست گسترش یافته.

شکل 6 . بخش نسبت کنتراست گسترش یافته

پانل حسابرسی برای اطمینان از اینکه هر عنصر متن در یک صفحه دارای نسبت کنتراست کافی است ، حسابرسی دسترسی خودکار دارد.

برای یادگیری نحوه استفاده از پانل حسابرسی برای آزمایش دسترسی ، به Lighthouse Run Lighthouse در Chrome Devtools مراجعه کنید ، یا A11Ycast را در زیر مشاهده کنید.

ممیزی های جدید

Chrome 65 با یک دسته کاملاً جدید از حسابرسی سئو و بسیاری از حسابرسی های عملکرد جدید کشتی می گیرد.

ممیزی های جدید سئو

اطمینان از اینکه صفحات شما هر یک از حسابرسی ها را در گروه جدید SEO منتقل می کند ممکن است به بهبود رتبه های موتور جستجو کمک کند.

دسته جدید سئو ممیزی ها.

شکل 7 . دسته جدید سئو ممیزی ها

ممیزی های عملکرد جدید

Chrome 65 همچنین با بسیاری از ممیزی های عملکرد جدید ارسال می شود:

  • زمان بوت شدن JavaScript زیاد است
  • از سیاست حافظه پنهان ناکارآمد در دارایی های استاتیک استفاده می کند
  • از تغییر مسیر صفحه جلوگیری می کند
  • سند از افزونه ها استفاده می کند
  • CSS را کوچک کنید
  • جاوا اسکریپت را کوچک کنید

مسائل عطر! بعد از اینکه MYNET سرعت بار صفحه خود را با 4 برابر بهبود بخشید ، کاربران 43 ٪ زمان بیشتری را در سایت گذراندند ، 34 ٪ صفحات بیشتر را مشاهده کردند ، نرخ گزاف گویی 24 ٪ کاهش یافت و درآمد در هر صفحه مقاله 25 ٪ افزایش یافت. بیشتر بدانید .

نکته! اگر می خواهید عملکرد بار صفحات خود را بهبود بخشید ، اما نمی دانید از کجا شروع کنید ، پانل حسابرسی را امتحان کنید. شما به آن URL می دهید ، و گزارش مفصلی را در مورد روشهای مختلفی که می توانید آن صفحه را بهبود ببخشید ، به شما ارائه می دهد. شروع کنید .

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

کدهای قابل اعتماد با کارگران و کد ناهمزمان

Chrome 65 به روزرسانی ها را به مرحله وارد می کند قدم به دکمه هنگام ورود به کدی که پیام های بین موضوعات و کد ناهمزمان را منتقل می کند. اگر می خواهید رفتار پله قبلی را بخواهید ، می توانید از مرحله جدید استفاده کنید گام در عوض دکمه.

قدم زدن به کدی که پیام های بین موضوعات را منتقل می کند

وقتی وارد کدی می شوید که پیام های بین موضوعات را منتقل می کند ، DevTools اکنون به شما نشان می دهد که در هر موضوع چه اتفاقی می افتد.

به عنوان مثال ، برنامه در شکل 8 پیام بین موضوع اصلی و موضوع کارگر را منتقل می کند. پس از قدم گذاشتن به postMessage() با موضوع اصلی ، Devtools در قسمت onmessage در موضوع کارگر مکث می کند. خود کنترل کننده onmessage پیامی را به موضوع اصلی ارسال می کند. قدم زدن به آن تماس ، مکث های Devtools را در موضوع اصلی قرار می دهد.

قدم زدن به کد گذر پیام در Chrome 65.

شکل 8 . قدم به کد پست پیام در Chrome 65

هنگامی که در نسخه های قبلی Chrome به کدهایی مانند این رفتید ، Chrome فقط به شما نشان می دهد که قسمت اصلی کد کد را نشان می دهد ، همانطور که در شکل 9 مشاهده می کنید.

قدم زدن به کد گذر پیام در Chrome 63.

شکل 9 قدم زدن به کد گذر پیام در Chrome 63

قدم به کد ناهمزمان

DevTools هنگام قدم گذاشتن به کد ناهمزمان ، اکنون فرض می کند که می خواهید در کد ناهمزمان که در نهایت اجرا می شود ، مکث کنید.

به عنوان مثال ، در شکل 10 پس از قدم گذاشتن به setTimeout() ، DevTools تمام کد منتهی به آن نقطه را پشت صحنه اجرا می کند ، و سپس در عملکردی که به setTimeout() منتقل شده است مکث می کند.

قدم به کد ناهمزمان در Chrome 65.

شکل 10 . قدم زدن به کد ناهمزمان در Chrome 65

هنگامی که در Chrome 63 به کد مانند این وارد شدید ، Devtools در کد مکث کرد ، همانطور که در شکل 11 مشاهده می کنید.

قدم به کد ناهمزمان در Chrome 63.

شکل 11 قدم زدن به کد ناهمزمان در Chrome 63

ضبط های چندگانه در پانل عملکرد

پانل عملکرد اکنون به شما امکان می دهد تا 5 ضبط را به طور موقت ذخیره کنید. هنگام بستن پنجره DevTools ، ضبط ها حذف می شوند. با تجزیه و تحلیل عملکرد زمان اجرا ، شروع به کار کنید تا از پانل عملکرد راحت شوید.

انتخاب بین ضبط های متعدد در پانل عملکرد.

شکل 12 . انتخاب بین ضبط های متعدد در پانل عملکرد

جایزه: اقدامات DevTools را با Puppeteer 1.0 خودکار کنید

نسخه 1.0 Puppeteer ، یک ابزار اتوماسیون مرورگر که توسط تیم Chrome Devtools نگهداری می شود ، اکنون خارج است. شما می توانید از Puppeteer برای خودکار سازی بسیاری از وظایف که قبلاً فقط از طریق DevTools در دسترس بودند ، استفاده کنید ، مانند ضبط تصاویر:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

همچنین دارای API برای بسیاری از کارهای اتوماسیون به طور کلی مفید مانند تولید PDF است:

const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://news.ycombinator.com', {waitUntil: 'networkidle2'});
  await page.pdf({path: 'hn.pdf', format: 'A4'});
  await browser.close();
})();

شروع سریع برای کسب اطلاعات بیشتر را ببینید.

همچنین می توانید از Puppeteer برای افشای ویژگی های DevTools در حالی که مرور می کنید بدون اینکه به صراحت باز کردن devtools را باز کنید ، استفاده کنید. برای مثال با استفاده از ویژگی های DevTools بدون باز کردن DevTools مراجعه کنید.

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

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

در تماس با تیم Chrome Devtools

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

  • یک پیشنهاد یا بازخورد را از طریق Crbug.com به ما ارسال کنید.
  • با استفاده از گزینه های بیشتر ، یک مسئله DevTools را گزارش دهیدبیشتر > راهنما > گزارش مسائل DevTools در DevTools.
  • توییت در chromedevtools .
  • در مورد فیلم های YouTube DevTools یا نکات DevTools YouTube ، نظرات خود را در مورد Whats New در DevTools YouTube بگذارید.

آنچه در Devtools جدید است

لیستی از همه چیزهایی که در سری News in DevTools پوشش داده شده است.

کروم 126

کروم 125

کروم 124

کروم 123

کروم 122

کروم 121

کروم 120

کروم 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

کروم 109

Chrome 108

Chrome 107

کروم 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

کروم 100

کروم 99

کروم 98

کروم 97

کروم 96

کروم 95

کروم 94

کروم 93

کروم 92

کروم 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

کروم 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 was cancelled .

Chrome 81

Chrome 80

کروم 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59