​​حتما از قابلیت‌های devtools برای تست کردن پروژه در ابعاد موبایل‌ها اطلاع دارید.
اما با chrome devtools می‌توانیم اینترنت و پردازنده ضعیف‌تر دستگاه‌های همراه را هم شبیه‌سازی کنیم.
این تنظیمات در تب Performance قرار دارند. برای مثال در تصویر اینترنت 3G و CPU با سرعت پردازش یک چهارم شبیه‌سازی شده است.

#quicktip #devtools

@ProGraphs

​​گاهی پیش می‌آید که اطلاعات یک عنصر را می‌دانیم و می‌توانیم با جاوااسکریپت آن را select کنیم، ولی جای آن در صفحه را نمی‌دانیم و برای inspect گرفتن باید دنبال آن بگردیم. در این شرایط می‌توانیم از تابع inspect در قسمت console گوگل کروم استفاده کنیم.

این تابع یک DOM Node که توسط جاوااسکریپت انتخاب شده است دریافت می‌کند و بلافاصله عنصر مورد نظر را در حالت inspect element نمایش می‌دهد. (مانند تصویر)

دقت کنید که این تابع api خود کروم هست و نمی‌توانید از داخل اسکریپت آن را فراخوانی کنید‌(فقط از طریق کنسول google chrome).

(به شخصه خیلی از این api استفاده می‌کنم 😃)

#quicktip #devtools

@ProGraphs

​​با استفاده از تب Sensors در chrome devtools می‌توانیم سنسور‌های Geolocation و Accelerometer دستگاه‌های همراه را شبیه سازی کنیم.

(برای نمایش این تب از منوی devtools, گزینه‌ی more tools و sensors را انتخاب کنید)

این صفحه هم برای تست این قابلیت درست شده:
http://googlesamples.github.io/web-fundamentals/fundamentals/native-hardware/device-orientation/dev-orientation.html

#quicktip #devtools

@ProGraphs

​​نسخه 71 گوگل کروم هم به تازگی منتشر شد!

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

کافی است در تب elements روی یک عنصر راست کلیک کنید و گزینه‌ی Store as global variable را انتخاب کنید.

#quicktip #devtools

@ProGraphs

​​یکی دیگر از ‌api های جالب chrome devtools تابع monitorEvents است. این تابع یک آبجکت DOM را دریافت می‌کند و هر بار یک event برای آن عنصر رخ می‌دهد، اطلاعات آن را در کنسول نمایش می‌دهد.

این تابع یک پارامتر دوم اختیاری هم دریافت می‌کند که می‌تواند نام یک event خاص و یا آرایه‌ای از eventها باشد که می‌خواهیم track کنیم.

همچنین می‌توانیم به جای نام یک event از عبارت‌هایی مثل mouse یا key استفاده کنیم تا تمامی event های مربوط به موس یا کیبورد را بررسی کنیم.

این api برای دیباگ کردن، پیدا کردن نام یک event و ... می‌تواند مفید باشد.

#quicktip #devtools

@ProGraphs

یکی از قابلیت‌های خیلی کاربردی chrome devtools امکان ثبت screenshot تمام صفحه از یک وب‌سایت است.

برای این کار command menu را باز می‌کنیم (Ctrl+Shift+P در ویندوز و Cmd+Shift+P در مک) و دستور capture full size screenshot را تایپ می‌کنیم.

#quicktip #devtools

@ProGraphs

با استفاده از live expression ها در گوگل کروم،‌می‌توانیم مقدار هر expression جاوااسکریپت و تغییرات آن را ببینیم!

#quicktip #devtools #js

@ProGraphs

​​فرض کنید می‌خواهیم بررسی کنیم که یک صفحه، بدون یک 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