​​فرض کنید می‌خواهیم بررسی کنیم که یک صفحه، بدون یک resource خاص چطور نمایش داده می‌شود.
برای این کار در گوگل کروم (به نحوی که در ویدیو مشاهده می‌کنید)، می‌توانیم یک url خاص را بلاک کنیم تا load نشود.

#quicktip #devtools

@ProGraphs

​یکی دیگر از apiهای کاربردی گوگل کروم تابع $$ است. این تابع مشابه متد document.querySelectorAll عمل می‌کند.

با این تفاوت که خروجی تابع querySelectorAll از نوع Array-Like است و به متدهای آرایه‌ها دسترسی ندارد.
ولی خروجی تابع $$ یک آرایه معمولی است. بنابراین می‌توانیم مستقیما تابع‌هایی مثل map را روی آن اجرا کنیم.
(به مطلبی که راجع به Array-Likeها منتشر کردیم مراجعه کنید)

#quicktip #devtools #js

@ProGraphs

​وقتی در یک صفحه اشتباها وارد حلقه بی‌نهایت می‌شویم، تب مرورگر کاملا freeze می‌شود و گاهی حتی بسته هم نمی‌شود!

در این شرایط، در chrome devtools، با ترفندی که در تصویر می‌بینید می‌توانیم صفحه را از حالت freeze خارج کنیم.

#quicktip #devtools

@ProGraphs

​با استفاده از تب Code Coverage در گوگل کروم می‌توانیم بررسی کنیم که چند درصد و چه قسمت‌هایی از کدها در یک صفحه اجرا می‌شوند و چه قسمت‌هایی اجرا نمی‌شوند.

همچنین از نسخه‌ی 73 که به زودی منتشر خواهد شد، امکان ذخیره‌ی نتایج Code Coverage در یک فایل json اضافه می‌شود. (به این ترتیب می‌توانیم اطلاعات ذخیره شده را به عنوان ورودی برای ابزارهایی که کد را modify می‌کنند استفاده کنیم)

#quicktip #devtools

@ProGraphs

​در گوگل کروم می‌توانیم برای زمانی که attribute یک عنصر تغییر می‌کند، breakpoint تعریف کنیم.

به این ترتیب مثلا می‌توانیم بررسی کنیم که یک افکت، دقیقاً در چه قسمتی از کد و چطور پیاده‌سازی شده است!

#quicktip #devtools

@ProGraphs

با استفاده از قابلیت workspaces در گوگل کروم می‌توانیم کاری کنیم که تغییراتی که در devtools انجام می‌دهیم،‌ در فایل‌های پروژه اعمال شوند.

#quicktip #devtools

@ProGraphs

در گوگل کروم می‌توانیم داخل یک پنجره‌ی devtools، یک devtools دیگر باز کنیم (یعنی devtools برای devtools)!

در این ویدیو با استفاده از این قابلیت فریم‌های کند برنامه را پیدا می‌کنیم.

#quicktip #devtools #trick

@ProGraphs

در قسمت‌های مختلف chrome devtools می‌توانیم یک مقدار را در یک متغیر گلوبال ذخیره کنیم تا به راحتی در کنسول به آن دسترسی داشته باشیم.

در ویدیو، کاربرد این ویژگی برای دسترسی به اطلاعات یک انیمیشن، dom element و response object را می‌بینید.

#quicktip #devtools

@ProGraphs

با استفاده از media query inspector در گوگل کروم، می‌توانیم تمام media queryهای تعریف شده داخل یک صفحه را ببینیم و اعمال کنیم!

#quicktip #devtools

@ProGraphs

🔺یه ابزار جالب برای تهیه‌ی عکس از performance reportهای گوگل کروم 👌🏻

https://github.com/ilicmarko/devtools-timeline-images

#link #devtools #performance #performancereport

@ProGraphs