This media is not supported in your browser
VIEW IN TELEGRAM
در کروم ۷۳، logpoints اضافه شده به #DevTools حالا این لاگ پوینت ها چیکار میکنن؟ شما یه خط از کد رو انتخاب میکنید و کروم هرموقع اون خط اجرا بشه یه لاگ دلخواه براتون تو کنسول پرینت میکنه 😁 از این جهت که شما خودتون هیچ console.log ای نمی‌نویسید میتونه خیلی جالب باشه و کد رو تمیز نگه داره
https://twitter.com/dan_abramov/status/1255692247061929991?s=20
توضیحی در مورد لاگ پوینت ها در خود سایت گوگل دیولوپرز
@frontendtwitter
https://twitter.com/dan_abramov/status/1255692247061929991?s=20
توضیحی در مورد لاگ پوینت ها در خود سایت گوگل دیولوپرز
@frontendtwitter
This media is not supported in your browser
VIEW IN TELEGRAM
با پاس دادن یه فلگ از ترمینال برای باز کردن اپلیکیشن کروم، هر تب جدیدی که تو کروم باز میکنید اتوماتیک DevToolsش هم باز میشه 😁 #DevTools
https://twitter.com/addyosmani/status/1256138791166726144?s=20
@frontendtwitter
https://twitter.com/addyosmani/status/1256138791166726144?s=20
@frontendtwitter
⚡️از DevTools کروم قسمت Network میتونید ریکوئست هایی که زده میشه رو به شکل های مختلف (مثلا به شکل fetch API) کپی کنید
#DevTools
https://twitter.com/addyosmani/status/1260117510411567104?s=20
@frontendtwitter
#DevTools
https://twitter.com/addyosmani/status/1260117510411567104?s=20
@frontendtwitter
Twitter
Addy Osmani
In @ChromeDevTools > Network, the Copy menu is powerful for replaying network requests. Copy as Fetch API code, cURL and a Node.js fetch that includes cookie data.
🚀 تو DevTools کروم میتونید از منویی که تو تصویر نمایش داده شده، هر ریکوئستی که سایتتون میزنه رو بلاک کنید. کاربرد این بلاک کردن برای سنجش تفاوت پرفورمنس هستش. مثلا میتونید با بلاک کردن ریکوئست یک عکس سنگین، متوجه بشید که چند میلی ثانیه سایتتون سریعتر لود میشه!
#tools #performance #DevTools
https://twitter.com/addyosmani/status/1275352900244369408?s=20
@frontendtwitter
#tools #performance #DevTools
https://twitter.com/addyosmani/status/1275352900244369408?s=20
@frontendtwitter
Twitter
Addy Osmani
Tip: @ChromeDevTools supports Network request blocking. Block URLs & domains to measure their impact on your site. DevTools > top-right menu > More > Request blocking
🎉 نسخه جدید DevTools تو کروم جدید شامل این موارد خواهد بود:
- ادیت استایل های CSS-in-JS
- نسخه ۶ LIghthouse
- پشتیبانی از قابلیت های جدید جاواسکریپت مثل optional chaining
#tools #DevTools
https://twitter.com/ChromeDevTools/status/1276070123590172673?s=20
همه تغییرات رو میتونید از این لینک بخونید
@frontendtwitter
- ادیت استایل های CSS-in-JS
- نسخه ۶ LIghthouse
- پشتیبانی از قابلیت های جدید جاواسکریپت مثل optional chaining
#tools #DevTools
https://twitter.com/ChromeDevTools/status/1276070123590172673?s=20
همه تغییرات رو میتونید از این لینک بخونید
@frontendtwitter
Twitter
Chrome DevTools
What's New in DevTools in Chrome 85? ✨ • Style editing for CSS-in-CSS • Lighthouse 6 • Support for new JavaScript features Find out more great new features and fixes here 👉🏼 https://t.co/bA8odSG5kc
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ از تنظیمات DevTools کروم میتونید تیک CSS Overview رو بزنید تا یه تب جدید تو DevTools اضافه بشه که بتونید باهاش اطلاعاتی از نوع استایل‌ها، رنگ‌ها، فونت‌ها و استایل های CSSی که تعریف کردید و استفاده نکردید، بدست بیارید
#CSS #DevTools
https://twitter.com/jh3yy/status/1277626835342364672?s=20
@frontendtwitter
#CSS #DevTools
https://twitter.com/jh3yy/status/1277626835342364672?s=20
@frontendtwitter
This media is not supported in your browser
VIEW IN TELEGRAM
🔥 اگه یکسری دستورات خاص رو تو کنسول کروم دائما تکرار میکنید، میتونید اون هارو از قسمت snippets که تو ویدیو مشخص شده تبدیل به یک دستور کنید و بعدا با Ctrl + P یا Cmd + P، بدون نیاز به تایپ مجدد دستورات، اون‌ها رو اجرا کنید
#tools #DevTools
https://twitter.com/ChromeDevTools/status/1283046341204041728?s=20
@frontendtwitter
#tools #DevTools
https://twitter.com/ChromeDevTools/status/1283046341204041728?s=20
@frontendtwitter
⚡️ استایل هایی که از DevTools کروم تیکشون رو برمیدارید رو اگه کپی کنید، به شکل کامنت شده کپی میشن!
#tools #DevTools #CSS
https://twitter.com/umaar/status/1283358642088157184?s=20
@frontendtwitter
#tools #DevTools #CSS
https://twitter.com/umaar/status/1283358642088157184?s=20
@frontendtwitter
Twitter
Umar Hansa
Love this subtle yet handy Chrome DevTools feature If you copy some deactivated style rules, they are commented out when you paste them 🔥️️ More info here: https://t.co/Wc9Q8jLFBX #devtools @ChromeDevTools https://t.co/WJ0Wr3em1A
⚡️ از این به بعد میتونید برای قابلیت های Chrome Dev Tools کلید میانبر مشخص کنید
🔥 لینک مقاله
#chrome #devtools
https://twitter.com/addyosmani/status/1320290867001737217?s=20
@frontendtwitter
🔥 لینک مقاله
#chrome #devtools
https://twitter.com/addyosmani/status/1320290867001737217?s=20
@frontendtwitter
Twitter
Addy Osmani
You can now customize keyboard shortcuts for @ChromeDevTools features! https://t.co/F52g3tvULB
⚡️ با کمک Dev Tools در Chrome میتونید به سادگی ریکوئست به URL یا دامین خاصی رو مسدود کنید
#chrome #devtools
https://twitter.com/addyosmani/status/1275352900244369408?s=20
@frontendtwitter
#chrome #devtools
https://twitter.com/addyosmani/status/1275352900244369408?s=20
@frontendtwitter
Twitter
Addy Osmani
Tip: @ChromeDevTools supports Network request blocking. Block URLs & domains to measure their impact on your site. DevTools > top-right menu > More > Request blocking
⚡️ در Dev Tools مرورگر Chrome اگر روی پراپرتی های CSS مثل padding یا margin هاور کنید، میتونید بخش هایی که اون پراپرتی ها روشون تاثیر داشتن رو در صفحه مشاهده کنید
#chrome #devtools
https://twitter.com/addyosmani/status/1272785982862036994?s=20
@frontendtwitter
#chrome #devtools
https://twitter.com/addyosmani/status/1272785982862036994?s=20
@frontendtwitter
Twitter
Addy Osmani
Tip: In @ChromeDevTools, hovering over a CSS property (e.g padding, margin) highlights nodes impacted by it. Here's hovering over "padding" (green):
⚡️ با کمک Dev Tools در کروم میتونید استایل های اعمال شده روی یک المان رو بگیرید
#chrome #devtools
https://twitter.com/umaar/status/1263418649286754304?s=20
@frontendtwitter
#chrome #devtools
https://twitter.com/umaar/status/1263418649286754304?s=20
@frontendtwitter
Twitter
Umar Hansa
#DevTools Tip ⚡️ Copy and extract all the CSS for an element on the page Right click element > Copy > Copy Styles Useful as styles can often be scattered across many selectors! ⭐️ https://t.co/YHmdxoj9fh
⚡️ میدانستید که می توانید از خود کروم هم یک سکرین شات از المنت مورد نظر بگیرید و هیچ نیازی به اکستنشن خاصی نیست؟
#chrome #tip
https://twitter.com/AngeloFaella16/status/1335877093759086596
@frontendtwitter
#chrome #tip
https://twitter.com/AngeloFaella16/status/1335877093759086596
@frontendtwitter
Twitter
Angelo Faella 💡
📌 Chrome #DevTools tip You can take a screenshot of a particular element in the DOM: - Select the node - Press Ctrl+Shift+P (or Cmd+Shift+P) - Type "screenshot" - Click on "Capture node screenshot" #javascript #html