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

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

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

 

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

 

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

 

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

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

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

 

eyedropper

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

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

 

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

 

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

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

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

 

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

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

 

جستجو در DOM

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

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

 

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

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

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