ترفند های گوگل devtools

معرفی قابلیت های جدید Chrome Devtools (قسمت اول)

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

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

  • Beta: اگر مشتاق هستید تا به قابلیت های جدید زودتر دسترسی داشته باشید و همینطور احتمال باگ های مختلف کمینه باشد این کانال بهترین انتخاب خواهد بود. تقریبا هر هفته بروز رسانی دارد. و هر شش هفته یک بار برای انتشارهای اصلی قبل از کانال Stable بروز رسانی می شود.
  •  

  • Dev: اگر بدنبال این هستید که تیم کروم همین الان بر روی چه موضوعی در حال کار هستند این کانال مناسب شما است. با اینکه این خروجی همیشه تست می شود اما همیشه احتمال وجود باگ در آن هست. این کانال هفته ای یک یا دو بار بروز رسانی می شود.
  •  

  • Canary: قناری خروجی روزانه از کد نویسی برنامه نویسان تیم کروم است. این خروجی تست نمی شود. و در زمانی که بر روی سیستم شما نصب می شود از پروفایل و تنظیمات مخصوص به خودش استفاده می کند.

شخصا استفاده از Beta و Canary در کنار هم را بیشتر می پسندم.

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

 

eyedropper

در نسخه های اخیر کروم ابزار انتخاب رنگ به قابلیت های بسیار کاربردی مجهز شده است:

  • تغییر مدل های رنگی HSL و RGB و …
  • داشتن جعبه های رنگی (Color Palettes)
  • قابلیت اضافه کردن رنگ مورد علاقه
  • جمع آوری رنگ های صفحه بصورت خودکار در یک جعبه رنگی مجزا
  • جعبه رنگی شامل رنگ های طراحی متریال گوگل

Chrome dev tools eyedropper

 

انتخاب و ویرایش عناصر

انتخاب و ویرایش DOM در کروم

 

مخفی کردن و جابه جایی عناصر هم سطح

پس از انتخاب یک عنصر از صفحه یا به بیان بهتر انتخاب DOM در DevTools می توانید با زدن دکمه H آن را مخفی و آشکار کنید.

همینطور می توانید عناصری که در یک همسایگی هستند را با نگه داشتن دکمه Ctrl + Shift و با استفاده از جهت های بالا و پایین جابه جا کنید.

مخفی و جابه جا کردن DOM در کروم

 

پس زمینه بنفش رنگ چیست؟

هر زمان که تغییری در DOM به وجود می آید این رنگ در پس زمینه تغییرات چشمک می زند و باعث می شود تا راحت تر متوجه انجام تغییرات بشویم. مثلا وقتی با جاواسکریپت قرار است بعد از کلیک بر روی یک عنصر یک کلاس به عنصر دیگری اضافه/حذف کنید, با یک نگاه به DevTools متوجه این تغییر از طریق این رنگ خواهید شد.

 

جستجو در DOM

با زدن دکمه Ctrl + F امکان جستجو برای شما فراهم خواهد شد. اما قابلیت بسیار عالی اینکه می توانید با استفاده از نوشتن Selector ها شبیه به CSS دنبال عنصر مورد نظر بگردید. فرض کنید دنبال لینک های داخل تگی با کلاس post هستید, کافی است بنویسید .post a

همینطور می توانید با زدن Enter و یا دکمه های کناری فرم جستجو, موارد قبلی و بعدی را پیدا کنید:

finding dom

 

مشاهده مکان تاثیر استایل نوشته شده در صفحه

کافی است بر روی رشته انتخابگرهای CSS موس را نگه دارید تا قسمت های مختلف صفحه که تاثیری از آن استایل می گیرند, مشخص شوند. در تصویر زیر موس روی دو انتخابگر متفاوت قرار می گیرد. توجه داشته باشید که نیازی به کلیک کردن نیست. (من کلیک کردم تا متوجه بشین کجا موس قرار میگیره :) )

long hover chrome devtools

در قسمت بعد موارد کاربردی دیگر را بررسی خواهیم کرد.

2 دیدگاه برای “معرفی قابلیت های جدید Chrome Devtools (قسمت اول)

  1. سلام دوست عزیز خسته نباشی
    من همیشه راحت نبودم با devtools کروم چون فکر میکردم چنین چیزایی نداره و همیشه از mozilla استفاده میکردم البته فایرفاکس هم خیلی قابلیت ها داره ولی برای تست رو webkit کروم مورد نیازه

    خوشحال میشم اگه قابلیت های firefox هم بذاری

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *