🔥قابلیت جدید در گوگل کروم : ارزیابی زنده عبارات در #console


#chrome #devTools

✅@coderszone

⁣⁣🔥 برای گرفتن اسکرین شات تمام صفحه در #chrome می توانید به #DevTools رفته، ctrl+shift+P را بزنید و کلمه #screenshot را تایپ کنید.

#tips

⁣✅@coderszone

⁣⁣🔥اگر می خواهید در مرورگر #chrome از یک عنصر خاص، #screenshot بگیرید،کافی است پس از باز کردن #DevTools به تب Elements رفته و سپس بر روی عنصر مورد نظر کلیک کنید. آنگاه با فشردن دکمه های ctrl-shift-p در #ویندوز (یا cmd-shift-p در #مک) منوی Command را باز کرده و گزینه Capture node screenshot را انتخاب کنید.

#tips

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣⁣⁣⁣🔥⁣ یکی از قابلیت های مخفی در #devTools مرورگر #chrome استفاده از دستور زیر است:

⁣document.designMode = "on" 

با فراخوانی این دستور صفحه به حالت ویرایش رفته و امکان تغییر متن عناصر فراهم می شود.

#UI #browser #frontend

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 می توان با نگه داشتن #shift و کلیک بر روی دایره رنگی خاصیت color در #DevTools مرورگرهای #chrome و #firefox ، فرمت نمایشی رنگ را تغییر داد.

#tips #frontend #browser

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 اگر پوشه پروژه خود را در source panel #مرورگر #chrome بیاندازید، #DevTools این مرورگر تمامی تغییراتی که در آن اعمال می کنید را مستقیما بر روی فایل های اصلی پروژه اعمال خواهد کرد.

❗️تصویر را در اندازه بزرگ مشاهده کنید.

#UI #frontend #tips

⁣✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 استفاده از #DevTools مرورگر #کروم برای اعمال تغییرات بر روی عناصر صفحه و مشاهده همزمان آن تغییرات کاری ساده و لذت بخش است. اما زمانی که تغییرات زیاد می شوند، گاهی نیاز می شود که این تغییرات را با آنچه که از ابتدا بوده اند مقایسه کنیم.

برای این کار می توان از ابزار #Changes استفاده کرد. این ابزار، تغییرات را به شیوه ای که در نرم افزارهای #git متداول است نمایش داده و امکان لغو آن ها را نیز فراهم می کند.

💡 برای مشاهده نحوه عملکرد gif را در اندازه بزرگ ببینید.

🖼https://goo.gl/c8zqUQ

#chrome #UI #frontend #browser

✅ @coderszone

⁣⁣⁣⁣⁣⁣🔥 تب #coverage در #DevTools مرورگر #کروم، به شما نشان می دهد که چه حجم از کد های #CSS یا #javascript در صفحه شما بلا استفاده اند.

#forntend #UI #chrome #browser

✅ @coderszone

🔥 روش های #expand عناصر تودرتو در #DevTools مرورگر #کروم

🌟 یکی از روش ها در ویندوز نگه داشتن کلیدهای Control + Alt و سپس کلیک بر روی عنصر مورد نظر است.

#UI #frontend #chrome

✅ @coderszone

🔥 در نسخه 77 #chrome می توانید با کلیک راست بر روی یک node موجود در DOM، استایل های آن را کپی کنید.

#devTools #browser #UI #frontend

✅ @coderszone