قبل از بررسی قابلیت ها بهتر است نگاهی به کانال های مختلف منتشرسازی کروم داشته باشیم. تیم کروم برای اینکه بروز رسانی بهتری داشته باشند و از چند مرحله تست در چند سطح توسط کاربران متفاوت بهره ببرند از کانال های متفاوتی برای انتشار کروم استفاده می کنند.
- 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 موس را نگه دارید تا قسمت های مختلف صفحه که تاثیری از آن استایل می گیرند, مشخص شوند. در تصویر زیر موس روی دو انتخابگر متفاوت قرار می گیرد. توجه داشته باشید که نیازی به کلیک کردن نیست. (من کلیک کردم تا متوجه بشین کجا موس قرار میگیره :) )
در قسمت بعد موارد کاربردی دیگر را بررسی خواهیم کرد.
سلام
ممنون مفید بود، نمیدونستم بعضی مواردشو. همینطور ادامه بدین
اینا چیه یکی توضیح بده مام متوجه بشیم پلاگین یا همون inspect
سلام دوست عزیز خسته نباشی
من همیشه راحت نبودم با devtools کروم چون فکر میکردم چنین چیزایی نداره و همیشه از mozilla استفاده میکردم البته فایرفاکس هم خیلی قابلیت ها داره ولی برای تست رو webkit کروم مورد نیازه
خوشحال میشم اگه قابلیت های firefox هم بذاری
کدوم خیلی خوبه ولی نمیدونم چرا هنوز به فایرفاکس بسته ام :-|
فایرفاکس چی داره که کروم نداره. :-|
به زودی بصورت کامل شیفت میکنم رو کروم
شما سبب خیر شدی :-)