Chrome DevTools Revolutions 2013

مقدمه

با افزایش پیچیدگی و عملکرد برنامه های وب، ابزار توسعه کروم نیز افزایش یافته است. در این خلاصه‌ای از گفتگوی Google I/O 2013 پل ایریش ، Chrome DevTools Revolutions 2013 ، نگاهی به آخرین ویژگی‌هایی می‌بینید که نحوه ساخت و آزمایش برنامه‌های وب را متحول می‌کنند.

اگر سخنرانی پل را از دست دادید، می‌توانید آن را در بالا ببینید (ادامه دهید، ما صبر می‌کنیم) یا می‌توانید مستقیماً به خلاصه ویژگی بروید:

• Workspaces به شما امکان می دهد از DevTools به عنوان ویرایشگر کد منبع خود استفاده کنید.
• اگر از Sass استفاده می‌کنید، از توانایی ویرایش فایل‌های Sass (.scss) در DevTools لذت خواهید برد و تغییرات خود را بلافاصله در صفحه منعکس می‌کنید.
• اشکال زدایی از راه دور صفحات در Chrome for Android برای مدتی امکان پذیر بوده است، اما افزونه ADB اتصال به دستگاه های Android را ساده تر می کند. انتقال پورت معکوس به شما امکان می دهد به راحتی از دستگاه خود به لوکال هاست در دستگاه توسعه خود متصل شوید.
• عملکرد همیشه یک نگرانی در برنامه های کاربردی وب است و DevTools دارای تعدادی ویژگی جدید است که به شما در ردیابی تنگناها کمک می کند، از جمله تجسم جدید Flame Chart برای پروفایل CPU و چندین ابزار جدید برای اشکال زدایی مشکلات عملکرد مربوط به رندر و استفاده از حافظه.

این ویژگی‌ها در Chrome 28 فعال هستند و اکنون در کانال به‌روزرسانی پایدار موجود است.

فضاهای کاری

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

تصویر زیر نمونه ای از فضاهای کاری در حال عمل را نشان می دهد. سایت Calendar از طریق localhost بارگذاری شده است، در حالی که پنل Sources نمای سیستم فایل محلی پوشه ریشه سایت را نشان می دهد. ویرایش‌هایی که در فایل‌های این پوشه انجام می‌دهید روی دیسک باقی می‌ماند. در تصویر زیر، برخی تغییرات ذخیره نشده در Calendar.css ایجاد شده است، بنابراین یک ستاره در کنار نام فایل قرار داده شده است.

با فشار دادن Control+S یا Command+S تغییرات روی دیسک ادامه می یابد.

به طور مشابه، تغییراتی که در استایل های یک عنصر در پانل عناصر ایجاد می کنید، هم در پنل منابع و هم در ویرایشگر خارجی شما منعکس می شود. توجه داشته باشید که:

• تغییرات DOM در پانل عناصر ادامه پیدا نمی کند. فقط تغییرات سبک در پانل عناصر باقی می ماند.
• فقط سبک های تعریف شده در یک فایل CSS خارجی قابل تغییر هستند. تغییرات عنصر.style یا سبک‌های درون خطی به دیسک ادامه نمی‌یابد. اگر سبک های درون خطی دارید، می توان آنها را در پنل منابع تغییر داد.
• تغییرات سبک در پانل عناصر بلافاصله ادامه می یابد. لازم نیست Control+S یا Command+S فشار دهید.

افزودن یک پوشه فضای کاری

دو بخش برای استفاده از فضاهای کاری وجود دارد: در دسترس قرار دادن محتویات یک پوشه محلی برای DevTools، و نگاشت آن پوشه به یک URL.

برای افزودن یک پوشه فضای کاری جدید:

1. در DevTools، روی تنظیمات کلیک کنید برای باز کردن DevTools Settings.
2. روی Workspace کلیک کنید.
3. روی افزودن پوشه کلیک کنید.
4. به پوشه حاوی فایل های منبع پروژه خود بروید و روی انتخاب کلیک کنید.
5. هنگامی که از شما خواسته شد، روی Allow کلیک کنید تا به DevTools اجازه دسترسی کامل به پوشه داده شود.

پنل Sources پوشه فضای کاری جدید را به همراه منابع بارگذاری شده روی لوکال هاست نمایش می دهد. اکنون می‌توانید فایل‌ها را به صورت زنده در پوشه فضای کاری خود ویرایش کنید، و این تغییرات روی دیسک باقی خواهند ماند.

نگاشت یک پوشه به یک URL

هنگامی که یک پوشه فضای کاری را اضافه کردید، می توانید آن را به یک URL نگاشت کنید. هر زمان که Chrome URL مشخص شده را بارگیری می کند، پانل Sources محتویات پوشه فضای کاری را به جای محتوای پوشه شبکه نمایش می دهد.

برای نگاشت یک پوشه فضای کاری به یک URL:

1. در پانل Sources، روی فایلی که در پوشه فضای کاری قرار دارد، راست کلیک کنید یا Control+ کلیک کنید.
2. Map to Network Resource را انتخاب کنید.

   

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

   

4. صفحه را در کروم بارگیری مجدد کنید.

همانطور که در زیر نشان داده شده است، پنل Sources اکنون باید فقط محتویات پوشه فضای کاری محلی سایت شما را نشان دهد، نه منابع localhost را.

دو راه دیگر برای پیوند دادن یک پوشه شبکه به یک پوشه فضای کاری وجود دارد:

• روی یک منبع شبکه کلیک راست کنید (یا Control+click) و Map to File System Resource را انتخاب کنید.
• نگاشتها را به صورت دستی در برگه Workspace در گفتگوی DevTools Settings اضافه کنید.

اشکال زدایی نقشه منبع Sass/CSS

اشکال‌زدایی Sass (نقشه منبع CSS) به شما امکان می‌دهد فایل‌های Sass (.scss) را در پانل Sources به صورت زنده ویرایش کنید و نتایج را بدون نیاز به ترک DevTools یا بازخوانی صفحه مشاهده کنید. وقتی عنصری را بررسی می‌کنید که سبک‌های آن توسط یک فایل CSS تولید شده توسط Sass ارائه می‌شود، پانل Elements پیوندی به فایل .scss نشان می‌دهد، نه فایل css. ایجاد شده.

با کلیک بر روی پیوند، فایل SCSS (قابل ویرایش) در پنل Sources باز می شود. می توانید هر تغییری را که می خواهید در این فایل اعمال کنید.

هنگامی که تغییرات را در یک فایل SCSS (در DevTools یا جاهای دیگر) ذخیره می کنید، کامپایلر Sass فایل های CSS را دوباره تولید می کند. سپس DevTools فایل CSS تازه تولید شده را مجدداً بارگیری می کند.

استفاده از اشکال زدایی Sass

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

gem install sass -v '>=3.3.0alpha' --pre

همچنین باید ویژگی Sass debugging را در آزمایشات DevTools فعال کنید:

1. باز کردن about:flags در کروم.
2. فعال کردن آزمایش‌های ابزار برنامه‌نویس را روشن کنید.
3. کروم را مجددا راه اندازی کنید.
4. DevTools Settings را باز کنید و روی Experiments کلیک کنید.
5. پشتیبانی از Sass را روشن کنید (یا اشکال‌زدایی صفحه سبک Sass ، بسته به نسخه مرورگری که استفاده می‌کنید).

پس از نصب Sass، کامپایلر Sass را راه اندازی کنید تا تغییرات فایل های منبع Sass خود را مشاهده کند و برای هر فایل CSS تولید شده فایل های نقشه منبع ایجاد کنید، به عنوان مثال:

sass --watch **--sourcemap** sass/styles.scss:styles.css

اگر از Compass استفاده می کنید، توجه داشته باشید که Compass هنوز از نسخه پیش از انتشار Sass پشتیبانی نمی کند، بنابراین نمی توانید از اشکال زدایی Sass با Compass استفاده کنید.

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

برای هر فایل منبع SCSS که پردازش می کند، کامپایلر Sass علاوه بر CSS کامپایل شده، یک فایل نقشه منبع (فایل .map) ایجاد می کند. فایل نقشه منبع یک فایل JSON است که نگاشت بین فایل .scss و فایل های css. را تعریف می کند. هر فایل CSS حاوی یک حاشیه نویسی است که نشانی اینترنتی فایل نقشه منبع آن را مشخص می کند، که در یک نظر خاص جاسازی شده است:

/*# sourceMappingURL=<url>; */

به عنوان مثال، با توجه به فایل SCSS زیر:

<!-- styles.scss -->
$textSize: 26px;
$fontColor: red;
$bgColor: whitesmoke;

h2 {
    font-size: $textSize;
    color: $fontColor;
    background: $bgColor;
}

Sass یک فایل CSS مانند این را با حاشیه نویسی sourceMappingURL تولید می کند:

<!-- styles.css -->
h2 {
  font-size: 24px;
  color: orange;
  background-color: darkblue; 
}
/*# sourceMappingURL=styles.css.map */

در زیر یک نمونه فایل نقشه منبع آورده شده است:

{
  "version": "3",
  "mappings":"AAKA,EAAG;EACC,SAAS,EANF,IAAI;EAOX,KAAK..."
  "sources": ["sass/styles.scss"],
  "file": "styles.css"
}

اشکال زدایی از راه دور ساده تر در Chrome for Android

چند ویژگی جدید در DevTools راه‌اندازی اشکال‌زدایی از راه دور در Chrome for Android را آسان‌تر می‌کند: برنامه افزودنی ADB و ارسال معکوس پورت.

افزونه ADB Chrome فرآیند راه اندازی اشکال زدایی از راه دور را ساده می کند. مزایای زیر را ارائه می دهد:

• Android Debug Bridge (ADB) را بسته‌بندی می‌کند تا نیازی به نصب آن نداشته باشید.
• بدون نیاز به تعامل خط فرمان.
• UI برای راه اندازی و توقف آسان دیمون ADB و مشاهده دستگاه های متصل.

انتقال پورت معکوس اتصال Chrome را در Android به یک سرور وب در حال اجرا بر روی میزبان محلی شما آسان می کند، چیزی که برخی از محیط های شبکه بدون برخی از ترفندهای DNS آن را دشوار می کنند.

با استفاده از پسوند ADB

ابتدا افزونه ADB Chrome را از فروشگاه وب کروم نصب کنید. برای نصب افزونه روی افزودن به کروم کلیک کنید.

پس از نصب، یک نماد خاکستری منوی اندروید در کروم ظاهر می شود. برای شروع ADB، روی نماد کلیک کنید و سپس روی Start ADB کلیک کنید.

هنگامی که ADB شروع به کار کرد، نماد منو سبز می شود و تعداد دستگاه های متصل فعلی را در صورت وجود نشان می دهد.

روی View Devices کلیک کنید تا صفحه about:inspect باز شود که هر دستگاه متصل و برگه های آن را نشان می دهد. برای بررسی یک برگه در DevTools، روی پیوند "بازرسی" در کنار URL آن کلیک کنید.

اگر هیچ دستگاه متصلی را نمی‌بینید، بررسی کنید که دستگاهتان به USB وصل باشد و اشکال‌زدایی USB در تنظیمات Chrome for Android فعال باشد. برای دستورالعمل‌های دقیق‌تر و مراحل عیب‌یابی، به اشکال‌زدایی از راه دور در Android مراجعه کنید.

ارسال درگاه معکوس (تجربی)

معمولاً شما یک وب سرور دارید که بر روی دستگاه توسعه محلی خود کار می کند و می خواهید از دستگاه خود به آن سایت متصل شوید. اگر ماشین توسعه و دستگاه در یک شبکه هستند، این کار ساده است. اما در برخی موارد، مانند شبکه‌های محدود شرکتی، این ممکن است بدون برخی ترفندهای هوشمندانه DNS امکان پذیر نباشد. یک ویژگی جدید در Chrome for Android به نام Reverse Port Forwarding انجام این کار را ساده می کند. این کار با ایجاد یک پورت TCP شنود در دستگاه شما کار می‌کند که ترافیک را از طریق USB به یک پورت TCP خاص در دستگاه توسعه شما هدایت می‌کند.

برای استفاده از این ویژگی شما نیاز دارید:

• Chrome 28 یا جدیدتر روی دستگاه توسعه شما نصب شده است
• Chrome for Android بتا روی دستگاه شما نصب شده است
• Android Debug Bridge (برنامه افزودنی ADB Chrome یا Android SDK کامل) روی دستگاه توسعه شما نصب شده است

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

ابتدا انتقال پورت معکوس را فعال کنید:

1. Chrome را در دستگاه توسعه خود باز کنید.
2. در about:flags ، آزمایش‌های ابزار برنامه‌نویس را فعال کنید و Chrome را مجدداً راه‌اندازی کنید.
3. باز کردن در مورد: بازرسی . باید دستگاه تلفن همراه خود و لیستی از برگه های باز آن را ببینید.
4. روی پیوند "بازرسی" در کنار هر یک از سایت های لیست شده کلیک کنید.
5. در پنجره DevTools که باز می شود، پانل تنظیمات را باز کنید.
6. در بخش آزمایش‌ها، فعال کردن بازارسال درگاه معکوس را روشن کنید.
7. پنجره DevTools را ببندید و به about:inspect بازگردید.

سپس یک قانون ارسال پورت اضافه کنید:

1. دوباره روی پیوند "بازرسی" کلیک کنید تا DevTools باز شود و دوباره DevTools Settings را باز کنید.
2. روی تب Port Forwarding کلیک کنید.
3. در قسمت پورت دستگاه ، شماره پورتی را که Chrome باید در دستگاه Android شما به آن متصل شود وارد کنید (به طور پیش فرض 8080).
4. در قسمت Target ، شماره پورتی را که برنامه وب شما در دستگاه توسعه شما اجرا می شود، اضافه کنید.

   

5. در Chrome for Android، localhost را باز کنید: ، کجا مقداری است که در قسمت Device port وارد کرده اید (پیش فرض 8080 است).

شما باید محتوایی را ببینید که توسط دستگاه توسعه شما ارائه می شود.

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

نمای Flame Chart جدید نمایشی بصری از پردازش جاوا اسکریپت در طول زمان ارائه می‌کند، مشابه آنچه در پانل‌های Timeline و Network یافت می‌شود.

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

در نمای جزئیات، یک پشته تماس به عنوان پشته ای از تابع "بلوک" نشان داده می شود. بلوکی که بالای بلوک دیگری قرار می گیرد توسط بلوک تابع پایینی فراخوانی می شود. ماوس روی یک بلوک معین، نام تابع و داده های زمان بندی آن را نمایش می دهد:

• نام - نام تابع.
• زمان خود - چه مدت طول کشید تا فراخوانی فعلی تابع، شامل فقط عبارات موجود در خود تابع، بدون هیچ توابعی که فراخوانی شده است، انجام شود.
• زمان کل - مدت زمانی که طول کشید تا فراخوانی فعلی این تابع و هر تابعی که فراخوانی شده است، انجام شود.
• زمان خود انباشته - زمان جمعی برای همه فراخوانی های تابع در سراسر ضبط، بدون احتساب توابع فراخوانی شده توسط این تابع.
• زمان کل انباشته - مجموع زمان کل برای همه فراخوانی های تابع، از جمله توابع فراخوانی شده توسط این تابع.

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

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

1. در DevTools، روی تب Profiles کلیک کنید.
2. ضبط پروفایل CPU جاوا اسکریپت را انتخاب کنید و روی Start کلیک کنید.
3. وقتی جمع‌آوری داده‌ها تمام شد، روی توقف کلیک کنید.
4. در نمای نمایه، تجسم نمودار شعله را انتخاب کنید.

   

پنج ویژگی کلیدی اندازه گیری عملکرد

جمع کردن این بررسی از پیشرفت های انقلابی در DevTools چندین ویژگی جدید برای بررسی مسائل عملکرد است:

• حالت نقاشی مداوم
• نمایش مستطیل ها و حاشیه های لایه Paint
• FPS متر
• یافتن طرح‌بندی‌های همزمان اجباری (تخریب طرح‌بندی)
• ردیابی تخصیص شی

حالت نقاشی مداوم

حالت نقاشی پیوسته گزینه‌ای در تنظیمات DevTools است ( Rendering > فعال کردن رنگ‌آمیزی مجدد مداوم صفحه ) که به شما کمک می‌کند هزینه رندر عناصر یا سبک‌های CSS را شناسایی کنید.

به طور معمول، کروم فقط در پاسخ به طرح‌بندی یا تغییر سبک، و فقط مناطقی از صفحه را که نیاز به به‌روزرسانی دارند، روی صفحه نقاشی می‌کند. وقتی رنگ‌آمیزی مجدد صفحه را فعال می‌کنید، تمام صفحه دائماً رنگ‌آمیزی می‌شود. یک نمایشگر هدآپ، مدت زمانی را که کروم برای رنگ آمیزی صفحه صرف می کند، و همچنین بازه زمانی، و نموداری که توزیع زمان های رنگ آمیزی اخیر را نشان می دهد، نشان می دهد. خط افقی در طول هیستوگرام علامت 16.6 میلی ثانیه را نشان می دهد.

مزیت استفاده از آن این است که می‌توانید درخت DOM را در پانل Elements راه بروید و عناصر جداگانه را پنهان کنید (کلید H را فشار دهید تا عنصر انتخاب‌شده فعلی پنهان شود)، یا سبک‌های CSS یک عنصر را غیرفعال کنید. با مشاهده تغییرات در زمان رنگ‌آمیزی صفحه، می‌توانید ببینید که یک عنصر یا سبک چقدر زمان به "وزن" رندر صفحه اضافه می‌کند. اگر پنهان کردن یک عنصر واحد زمان رنگ را به میزان قابل توجهی کاهش می دهد، می دانید که باید روی استایل یا ساخت آن عنصر تمرکز کنید.

برای فعال کردن حالت درد مداوم:

1. DevTools Settings را باز کنید. 1. در برگه عمومی ، در زیر Rendering ، فعال کردن رنگ‌آمیزی مجدد صفحه مداوم را روشن کنید.

برای اطلاعات بیشتر، Profilering Long Paint Times with DevTools' Continuous Painting Mode را ببینید.

نمایش مستطیل های رنگ و حاشیه های لایه

یکی دیگر از گزینه‌های DevTools این است که نشان دهد در چه مناطق مستطیلی صفحه نمایش رنگ می‌شود. (تنظیمات > رندر > نمایش مستطیل های رنگ). به عنوان مثال، در تصویر زیر، یک مستطیل رنگ بر روی ناحیه‌ای کشیده می‌شود که افکت شناور CSS روی گرافیک بنفش اعمال می‌شود. این خوب است، زیرا بخش نسبتاً کوچکی از صفحه نمایش است.

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

FPS متر

FPS متر نرخ فریم فعلی صفحه، حداقل و حداکثر نرخ فریم، یک نمودار میله ای که نرخ فریم را در طول زمان نشان می دهد و یک هیستوگرام که تغییرات نرخ فریم را نشان می دهد را نمایش می دهد.

برای نمایش FPS متر:

1. DevTools Settings را باز کنید.
2. روی General کلیک کنید.
3. در بخش Rendering ، Force accelerated compositing و Show FPS meter را روشن کنید.

می‌توانید با باز کردن about:flags ، روشن کردن شمارنده FPS و راه‌اندازی مجدد Chrome، FPS متر را مجبور کنید همیشه ظاهر شود.

یافتن طرح‌بندی‌های همزمان اجباری (تخریب طرح‌بندی)

برای به حداکثر رساندن عملکرد رندر، Chrome معمولاً تغییرات طرح‌بندی درخواستی برنامه شما را دسته‌بندی می‌کند و یک پاس طرح‌بندی را برای محاسبه و ارائه تغییرات درخواستی به‌صورت ناهمزمان زمان‌بندی می‌کند. با این حال، اگر برنامه‌ای مقدار یک ویژگی وابسته به طرح‌بندی (مانند offsetHeight یا offsetWidth) را بخواهد، Chrome مجبور می‌شود فوراً و به طور همزمان طرح‌بندی صفحه را انجام دهد. این به اصطلاح چیدمان های همزمان اجباری می توانند عملکرد رندرینگ را به طور قابل توجهی کاهش دهند، به خصوص زمانی که به طور مکرر بر روی درختان DOM بزرگ انجام شوند. این سناریو را " layout thrashing " نیز می نامند.

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

این پاپ آپ همچنین تعداد گره هایی را که نیاز به چیدمان دارند، اندازه درخت طرح بندی مجدد، محدوده طرح بندی و ریشه طرح را نشان می دهد.

برای اطلاعات بیشتر به نسخه نمایشی Timeline: تشخیص طرح‌بندی‌های همزمان اجباری مراجعه کنید.

ردیابی تخصیص شی

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

برای ردیابی تخصیص اشیا:

1. در DevTools، روی تب Profiles کلیک کنید.
2. Record heap allocations را انتخاب کنید و روی Start کلیک کنید.
3. پس از جمع‌آوری داده‌ها، روی توقف ضبط نمایه پشته (دایره قرمز رنگ در گوشه سمت چپ پایین صفحه نمایه) کلیک کنید.

پروفایل بوم (تجربی)

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

برای استفاده از پروفایل بوم:

1. ویژگی بازرسی بوم را در تب Experiments در تنظیمات DevTools روشن کنید. (اگر این برگه را نمی‌بینید، about:flags را باز کنید، آزمایش‌های ابزار برنامه‌نویس را فعال کنید و کروم را مجدداً راه‌اندازی کنید.)
2. روی تب Profiles کلیک کنید.
3. Capture canvas frame را انتخاب کنید و روی گرفتن عکس فوری کلیک کنید.
4. اکنون می توانید تماس های مورد استفاده برای ایجاد قاب بوم را بررسی کنید.