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

ترجمه و تالیف : فاطمه شیرزادفر
تاریخ انتشار : 27 فروردین 99
خواندن در 3 دقیقه
دسته بندی ها : ابزار طراحی

ابزارهای توسعه گوگل کروم،‌ یک مجموعه‌ی بسیار عالی برای توسعه برنامه‌های وب است. این ابزار می‌توانند خیلی کارها برای ما انجام دهند؛ از عملیات های اساسی مانند مرور DOM ،‌ تا بررسی network request ها یا حتی نمایش پروفایلی از عمل‌کرد برنامه شما. 

درمیان این ویژگی‌های بزرگ،‌ هر روزه ویژگی‌های زیادی فعال می‌شوند،‌ که اگر به عمق آن‌ها بروید،‌ الماس‌های زیادی پیدا خواهید کرد!!  ویژگی‌هایی که ممکن است یک یا دو کلیک برای شما ذخیره کند. و آیا این چیزی نیست که همه‌ی ما باید درباره آن بدانیم؟

نمایش کوئری‌های jQuery style DOM  در کنسول

جی‌کوئری بسیار جذاب است و بیش از یک دهه هست،‌ که بر دنیای وب حاکم است. برخی از آمار اعلام ‌می‌کند که بیش از ۷۰٪ از محبوب‌ترین صفحات وب در جهان،‌ از نسخه‌های مختلف جی‌کوئری استفاده می‌کنند.

محبوب‌ترین API jQuery ، $ را برای انتخاب عناصر DOM ارائه می‌دهد. بخش کنسول chrome dev tools،‌ به شما این امکان را می‌دهد تا از $ و موارد دیگر استفاده کنید. اگر بخواهیم به درون $ نگاهی بیندازیم، در‌واقع $ همان ()document.querySelector می‌باشد.

به عنوان مثال اگر بخواهید،‌ کلیک کردن بر روی یک عنصر را شبیه‌سازی کنید،‌ می‌توانید این کار را انجام دهید:

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

 از selector $ برای کلیک روی یک دکمه استفاده کنید

به همین ترتیب،‌ $$ هم یک نام مستعار و یا همان ()document.querySelectorAll است.

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

 از  selector $$ برای چاپ کردن نام کلاس‌ها استفاده کنید

چند ترفند دیگر در مورد $ وجود دارد. گاهی‌اوقات ممکن است یک selector، برای اینکه بخواهید از روی آن بنویسید،‌ بسیار پیچیده باشد. یا حتی شما یک selector را به اندازه‌ی کافی نشناسید. اگر المنتی را در تب Elements انتخاب کنید،‌ می‌توانید آن را با متغییر 0$ در کنسول،‌ بازیابی کنید.

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

 این گیف نشان دهنده‌ی استفاده از selector $0 در کنسول است

کنسول حتی فراتر از این هم می‌رود و به ما این امکان را می‌دهد که نه تنها به آخرین،‌ بلکه به ۵ مورد آخر نیز دسترسی داشته باشیم.انتخاب‌ها از طریق متغییرهای 4$ - 0$ نمایش داده می‌شود.

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

 این گیف نشان دهنده‌ی استفاده از 4$-selector $0 در کنسول است

کپی کردن property های یک المنت

 تب Element یک تب بسیار مفید است. درخت DOM، وبسایت مارا ذخیره می‌کند و به ما این امکان را می‌دهد تا cssهایی که روی هر المنت اعمال شده را مشاهده کنیم؛ همچنین می‌توانیم تغییراتی را روی المنت‌های در حال اجرا،‌ اعمال کنیم.

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

 این گیف چگونگی کپی کردن یک element's selector را نمایش می‌دهد

این selector ممکن است به اندازه‌ی کافی خاص یا به عبارتی برای تولید خیلی خاص نباشد،‌ اما هنگام دیباگ کردن، سعی کنید زندگی را کمی آسان‌تر بگیرید :))))

همانطور که در گیف قبلی مشاهده کردید،‌ منوی کپی،‌ چند چیز جالب دیگر که می‌توانید کپی کنید را هم مخفی می‌کند.شما می‌توانید styleهای المنت‌ها، (document.querySelector(SELECTOR)) یا Xpath را کپی کنید.

فیلتر کردن network request ها

بعضی اوقات،‌شما روی صفحه‌ای کار می‌کنید که requestهای زیادی دارد،‌ منظورم خیییییییلی زیاد است!!

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

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

وقتی به دنبال چیز خاصی هستید، کار کردن با تمام آن درخواست‌ها می‌تواند دشوار باشد.خوشبختانه، شما می توانید به راحتی درخواست‌ها را فیلتر کنید.

نوار ابزا فیلتردار togglesهای سریع برای انواع مختلف درخواست‌ها،‌ مانند :XHR/Fetch, stylesheets, JS scripts, images و دیگر موارد است.

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

 استفاده از toolbar filters برای فیلتر کردن درخواست‌های شبکه

اگر نیاز دارید که خاص‌تر باشید یا سریع‌تر می‌خواهید، چیزی را که در نظر دارید پیدا کنید،‌ کافی‌ست معیارهای فیلتر را در کادر جستجو که درست دربالای نوار ابزار است،‌ بنویسید تا در requests’ name ها جستجو کند.

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

 فیلتر کردن درخواست‌های شبکه با نام 

شبیه‌سازی سرعت شبکه‌های مختلف

دوباره با استفاده از تب network می‌توانیم سایت خود را با سرعت‌های مختلف اینترنت آزمایش کنیم. preset پیش‌فرض، online است. از پهنای باند کامل متصل به اینترنت خود لذت خواهید برد.

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

 منویی که امکان انتخاب سرعت‌های مختلف اینترنت را فراهم می‌کند

علاوه بر online،‌ چند preset از پیش تعیین شده دیگر نیز،‌ در دسترس است: Fast 3G ، Slow 3G و offline که در سرعت آپلود و دانلود و latency (زمان تاخیر) متفاوت است.

اگر شما، نیاز به شبیه‌سازی سرعت متفاوت و عجیب‌تری دارید،‌ می‌توانید مشخصات خود را از طریق دکمه‌ی Add اضافه کنید:

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

 افزودن مشخصات افزایش سرعت

استفاده از Live Expression ها در کنسول 

live expression ها چه هستند؟

live expression ها عباراتی هستند که مرتبا در بالای کنسول شما در حال ارزیابی هستند.

مثلاً می‌خواهید مقدار یک متغییر را در گذشت زمان بررسی و پیگیری کنید. شما بارها و بارها می‌توانید وارد آن شوید.

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

 بارها و بارها یک متغییر را چاپ کنید

با live expressionها،‌ می‌توانید روی کد خود تمرکز کنید و به chrome اجازه دهید تا عمل نظارت را انجام دهد.

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

 ذخیره یک متغییر در یک live expression

این مربوط به متغییرهایی است که در کنسول و اسکریپت تعریف شده‌اند.

شبیه‌سازی دستگاه‌های مختلف

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

من اینجا نیستم که در موردmedia queryها به شما بگوییم، اما به دنبال روشی مناسب برای تست کارکرد آن‌ها هستم.

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

 دکمه‌ای که برای جابه‌جایی نمای دستگاه استفاده می‌شود

هنگامی که روی دکمه‌ای که شبیه یک تبلت و تلفن است کلیک می‌کنید، خواهید دید که نمای مرورگر شما تغییر می‌کند، تا ابعاد دستگاه دیگری را منعکس کند.

می‌توانید یک دستگاه از میان لیست‌های از پیش تعریف شده،‌ که حاوی دستگاه‌های مختلف محبوب مانند :

iPhone X, iPad Pro, Pixel 2, Pixel 2 XL و موارد دیگر را انتخاب کنید. این لیست تقریباً قدیمی شده، اما فکر می‌کنم در بیشتر موارد به اندازه‌ی کافی جوابگو باشد.

البته اگر نمی‌توانید دستگاهی را پیدا کنید که متناسب با نیازهای شما باشد، می‌توانید یک رزولوشن کاستوم تنظیم کنید،‌ همانطور که می‌بینید، من برای استفاده از OnePlus 6 (‌که درایور روزانه من است)‌یک رزولوشن تنظیم کرده‌ام.

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

 شبیه‌سازی OnePlus 6

فورس‌کردن حالت یک المنت

آیا تا به حال با شرایطی روبه‌رو شده‌اید که می‌خواهید با یک عنصر بازی کنید: hover خاص css، اما هربار که ماوس خود را به بخش styles در dev tools منتقل می‌کنید، المنت،‌ دیگر درحالت hover نمی‌ماند؟

خب،‌chrome dev tools روش خوبی را برای قفل کردن حالت یک المنت در معرض دید شما،‌ قرار می‌دهد. بنابراین می‌توانید با آرامش از property های آن استفاده کنید.

به این ترتیب می‌توانید به سرعت،‌ المنت‌های مورد نظر را فعال کنید:                                                         active, :hover, :focus, :focus-within و ویژگی  :visited 

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

 منو برای تغییر حالت یک المنت

این نکات و ترفندهای مورد علاقه من بودند، که فکر می‌کنم هرکسی می‌تواند از آن‌ها بهره‌مند شود. بابت وقتی که برای مطالعه گذاشتید ممنونم.

منبع

گردآوری و تالیف فاطمه شیرزادفر

تجربه کلمه‌ای هست که همه برای توصیف اشتباهاتشون ازش استفاده میکنن، و من همیشه دنبال اشتباهات جدیدم! بک‌اند دولوپر هستم و لینوکس‌ کار