استفاده از قابلیت های devtools در مرورگر کروم

Devtools Device Mode

به دلیل اهمیت زیاد طراحی واکنشگرا و روش های Mobile First در طراحی صفحات وب، ما به محیطی نیاز داریم تا بتوانیم واکشگرایی طرح خود در آن آزمایش و بررسی کنیم. مرورگر کروم برای این کار راه حلی بوجود آورده است تحت عنوان Device Mode که ما در این مطلب این قسمت از ابزار توسعه دهندگان را مورد بررسی قرار می دهیم.

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

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

در ادامه مطالب مربوط به ابزار طراحان وب در گوگل کروم می خواهیم در این مطلب بیشتر به نکات مربوط به قسمت استایل نویسی و ویراش عناصر بپردازیم. البته چند مورد از نکات, خیلی هم جدید نیستند :)   ویرایش مستقیم keyframe@ این ویژگی همراه با ویژگی هایی که در مطالب قبلی بیان شد نشان […]

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

ترفندهایی برای کار با قسمت Sources در کروم

در مطالب قبل در مورد کانال های مختلف کروم و همینطور تعدادی از ویژگی های جدید آن برای طراحان وب بحث کردیم. در این مطلب چند ترفند را برای استفاده بهتر از قسمت منبع بیان می کنیم. قبل از هرچیزی چند کلید میانبر پرکاربرد باهم یاد بگیریم: Ctrl + Shift + I (mac: Cmd + […]

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

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

  کنترل سرعت ترنزیشن ها و انیمیشن ها اگر با این موضوع آشنایی ندارید به مطلب timing function مراجعه کنید. در نسخه های جدید کروم قابلیت کنترل و تغییر این تابع بوسیله نمودار مهیا شده است. کافی است بر روی علامت آیکون نمودار که به رنگ بنفش است کلیک کنید.   کنترل انیمیشن ها این […]

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

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

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