جمع‌آوری ضبط عملکرد

ابزار Performance Profiler در Chrome DevTools ابزاری قدرتمند برای ثبت دقیق جزئیات عواملی است که بر سرعت بارگذاری صفحه شما تأثیر می‌گذارند.

شما می‌توانید در بخش Performance پنل DevTools یک پروفایل را آغاز کرده و پس از اتمام، ضبط را متوقف کنید. با این حال، این روش می‌تواند با چند مشکل همراه باشد:

کنترل دقیقی بر زمان جمع‌آوری داده‌ها ندارید و ناچارید بعداً روی بخش مورد نظر بزرگ‌نمایی کنید.

ضبط چندین پروفایل تکراری فرآیندی کند و دستی است.

بارگذاری ردگیری‌های بزرگ (Large traces) در ابزار توسعه‌دهنده زمان‌بر است.

توابع profile و profileEnd تمام این مشکلات را برطرف می‌کنند. با استفاده از این توابع، می‌توانید به‌صورت برنامه‌ریزی‌شده و دقیقاً در زمان مناسب، ضبط عملکرد را آغاز و پایان دهید:

console.profile();
// اجرای مجموعه‌ای از عملیات کند
console.profileEnd();

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

عبارات زنده (Live Expressions)
اگر مرتباً یک عبارت جاوااسکریپت خاص را برای بررسی وضعیت صفحه اجرا می‌کنید، «عبارات زنده» گزینه‌ای ایده‌آل هستند. به جای اجرای دستی کد، با استفاده از این قابلیت می‌توانید Chrome را طوری پیکربندی کنید که به‌طور خودکار و پیوسته همان عبارت را اجرا کند.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

تنظیمات کنسول
برای پیکربندی تنظیمات کنسول، روی آیکون چرخ‌دنده در گوشه بالای سمت راست زبانه Console کلیک کنید.

به عنوان نمونه، می‌توانید گزینه Preserve log را فعال کنید تا خروجی‌های ثبت‌شده هنگام جابه‌جایی بین وب‌سایت‌ها و صفحات مختلف حذف نشوند. به طور پیش‌فرض، کنسول با هر بار پیمایش به صفحه جدید پاک می‌شود.

علاوه بر این، می‌توانید نوع پیام‌های تولیدشده توسط Chrome را فعال یا غیرفعال کنید:

Hide network: پنهان‌کردن درخواست‌های ناموفق

Log XMLHttpRequests: ثبت همه درخواست‌های Ajax یا Fetch در صفحه

Show CORS errors in console: نمایش علت شکست درخواست‌های بین‌مبدأ (Cross-Origin)

با این تنظیمات، خروجی کنسول می‌تواند شامل گزارش درخواست‌ها و همچنین خطاهای CORS باشد.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

اوایل همین ماه، شرکت ByteDance — خالق TikTok و CapCut — از Lynx.js رونمایی کرد. این خبر می‌تواند برای جامعه‌ی Vue بسیار مهم باشد، چراکه احتمالاً امکان توسعه‌ی اپلیکیشن‌های بومی با Vue را فراهم خواهد کرد!

یک فریم‌ورک رابط کاربری مبتنی بر جاوااسکریپت است که به توسعه‌دهندگان اجازه می‌دهد اپلیکیشن‌های وب و موبایل را به‌گونه‌ای بسازند که احساس بومی (Native) داشته باشند؛ به این ترتیب رویای قدیمی فرانت‌اندکاران و توسعه‌دهندگان UI یعنی «یک بار بنویس، همه‌جا اجرا کن» را محقق می‌کند.
با این حال، ترکیب Vue و Lynx یک فرصت هیجان‌انگیز است:

اپلیکیشن‌های واقعاً بومی

با استفاده از همان دانش وب

و منحنی یادگیری ساده‌ی Vue

با رشد این اکوسیستم، انتظار می‌رود ابزارها، کامپوننت‌ها و الگوهای بهتری شکل بگیرند و Vue Lynx به گزینه‌ای جدی برای توسعه‌ی کراس‌پلتفرم تبدیل شود.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

توسعه‌دهندگان گوگل کروم MCP برای Chrome DevTools را معرفی کردند!
‏MCP مخفف *Model Context Protocol* است؛ پروتکلی که روشی یکپارچه برای اتصال ابزارهای خارجی و منابع داده به مدل‌های هوش مصنوعی تعریف می‌کند.

اما چرا این مهم است؟ چون در واقع همان حلقه‌ی مفقوده در فرایند توسعه است: این امکان را می‌دهد که یک عامل (Agent) واقعاً به داده‌های یک برنامه‌ی واقعی دسترسی پیدا کند،

معیارهای زنده‌ی سرعت و پایداری، کد واقعیِ در حال اجرا ــ همه این‌ها پیش‌تر در اختیار DevTools بود و حالا در دسترس عامل نیز قرار می‌گیرد.

تصور کنید بتوانید بپرسید: «وقتی ایمیل اشتباه وارد می‌کنم، اعتبارسنجی عمل نمی‌کند؛ بررسی کن چرا.» و واقعاً هم بررسی خواهد کرد!

تمام رویدادهای موردنیاز پشتیبانی می‌شوند؛ حتی بارگذاری فایل‌ و دریافت وضعیت شبکه.

بی‌اغراق، این واقعاً شگفت‌انگیز است. حالا می‌توانید آن را به ابزارهایی مثل Jira و Figma متصل کنید، همه چیز را به مرورگر بسپارید و خودتان با خیال راحت فقط تماشا کنید.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Capture node screenshot
این قابلیت در DevTools کروم و فایرفاکس به شما اجازه می‌دهد که یک عنصر مشخص (یا همان نود) در صفحه را به‌صورت تصویر ذخیره کنید، بدون اینکه نیاز باشد کل صفحه را اسکرول کنید یا اسکرین‌شات بگیرید.

روش کار به‌طور خلاصه:

1. باز کردن DevTools:

* در کروم یا فایرفکس، کلید F12 یا Ctrl+Shift+I را فشار دهید.

2. انتخاب نود موردنظر:

* در تب Elements یا Inspector**، روی عنصر HTML که می‌خواهید اسکرین‌شاتش را بگیرید کلیک کنید.

3. **گرفتن اسکرین‌شات:

* در کروم: راست‌کلیک روی نود → گزینه‌ی Capture node screenshot را انتخاب کنید.
* در فایرفکس: راست‌کلیک روی نود → گزینه‌ی Take a screenshot of node یا مشابه آن را انتخاب کنید.

DevTools سپس همان بخش خاص را پردازش کرده و یک تصویر PNG از آن نود ایجاد می‌کند.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ماشین قابل‌آموزش (Teachable Machine) یک آزمایش تعاملی است که یادگیری ماشین را برای همه ساده‌تر می‌کند؛ به‌طوری‌که مستقیماً در مرورگر اجرا می‌شود و هیچ نیازی به کدنویسی ندارد. روشی سریع و ساده برای ساخت مدل‌های یادگیری ماشین جهت استفاده در وب‌سایت‌ها، اپلیکیشن‌ها و موارد دیگر — بدون نیاز به دانش تخصصی یا کدنویسی.


🔗https://teachablemachine.withgoogle.com/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

چگونگی تست WebKit یا Safari روی ویندوز و لینوکس
به سادگی از BrowserStack استفاده کنید
اما مشکل اینجاست که همه نمی‌توانند حتی ۱۵۰ دلار در سال برای پلن فریلنسری هزینه کنند… آیا راهی وجود دارد؟

بله، راه وجود دارد!

‏BrowserStack به‌طور فعال از پروژه‌های Open Source پشتیبانی می‌کند و لایسنس یک‌ساله رایگان ارائه می‌دهد!

اگر پروژه‌ی شما چنین شرایطی دارد، کافی است به این صفحه
بروید و لینک مخزن (repository) خود را وارد کنید.

نکته مهم: باید لایسنس مناسب داشته باشید. لیست کامل را پیدا نکردم، اما مطمئنم که GPL، BSD و MIT پوشش داده شده‌اند. من هم خودم Creative Commons Attribution 4.0 International را وارد کردم.
دسترسی هر سال تمدید می‌شود تا زمانی که مخزن در دسترس باشد


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

حملات زنجیرهٔ تأمین (Supply Chain Attacks) نوعی حملهٔ سایبری است که به جای حملهٔ مستقیم به خود محصول یا سرویس هدف، به یکی از تأمین‌کننده‌ها، ابزارها یا وابستگی‌هایی که محصول استفاده می‌کند نفوذ می‌کند.

مثال ساده:

* فرض کن برنامه‌ای داری که از یک بسته‌ی جاوااسکریپت در npm استفاده می‌کند.
* یک هکر موفق می‌شود همان بسته یا نسخهٔ جدیدش را آلوده کند و کد مخرب داخل آن قرار دهد.
* وقتی نسخهٔ جدید بسته را نصب می‌کنید، کد مخرب به برنامهٔ شما نیز منتقل می‌شود.

بنابراین حملهٔ زنجیره‌ای یعنی حمله نه به خود برنامهٔ شما، بلکه به یک قطعه یا منبعی که برنامهٔ شما به آن وابسته است.

---

### npm-check-updates

این ابزار به شما امکان می‌دهد تا به جای استفاده از نسخه‌های مشخص‌شده در `package.json`، بسته‌ها را به آخرین نسخه‌های موجود ارتقا دهید.
شامل یک حالت تعاملی (-i) است که می‌توانید به‌صورت مرحله‌به‌مرحله ارتقاها را بررسی کرده و هرکدام را جداگانه انتخاب کنید.

نسخهٔ ۱۸.۲ ویژگی جدیدی به نام ‘cooldown’ اضافه کرده است که برای محافظت در برابر حملات زنجیرهٔ تأمین کاربرد دارد. این ویژگی تضمین می‌کند که نسخه‌های بسته حداقل به تعداد روز مشخصی قبل از ارتقا منتشر شده باشند، تا از استفادهٔ ناخواسته از نسخه‌های تازه و بالقوه آسیب‌پذیر جلوگیری شود.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

بهترین کدنویسی آن است که اصلاً نیازی به انجامش نباشد.

به همین دلیل من عاشق کانستراکتورها (Constructors) هستم. اما منظور ما از کانستراکتور اینجا، ساخت طرح‌بندی‌ها و Layoutها است، نه ابزارهایی مثل Tilda.

امروز یک ابزار جدید پیدا کردم: FlexBox Labs

🔗https://flexboxlabs.netlify.app
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏Vue Bits گنجینه‌ای بزرگ از اجزای رابط کاربری متحرک VueJS است که طراحی شده تا به وب‌سایت‌هایتان جان تازه‌ای ببخشد. انیمیشن‌های خیره‌کننده، کامپوننت‌های متنوع، پس‌زمینه‌های خلاقانه و امکاناتی منحصربه‌فرد را در اختیارتان می‌گذارد — و همه‌ی این‌ها کاملاً رایگان‌اند!

هر کامپوننت با گزینه‌های شخصی‌سازی به‌صورت prop همراه شده تا بتوانید در سریع‌ترین زمان نتیجه‌ی دلخواهتان را بگیرید.

ویژگی‌های کلیدی
بیش از نود کامپوننت (انیمیشن متن، انیمیشن، کامپوننت و پس‌زمینه) که هر هفته افزوده می‌شود
کمترین وابستگی‌ها و امکان تنظیم کامل همه‌ی اجزا از طریق prop



#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

مرتب نگه داشتن head

با یک اسکریپت جالب برخورد کردم که امکان انجام یک حسابرسی بسیار سریع و اصلاح نسبتاً سریع ترتیب تگ‌ها درون <head> را فراهم می‌کند.

یک قطعه CSS از هری رابرتز وجود دارد که ترتیب نادرست تگ‌های سیستمی را برجسته می‌کند. این فایل ct.css نام دارد [+لینک]. همچنین یک ارائه درباره این قطعه وجود دارد. هری یک متخصص فوق‌العاده در زمینه عملکرد وب است و اسلایدهای او [+لینک] بسیار متقاعدکننده هستند.

اسکریپت capo.js تقریباً همان کار را انجام می‌دهد، با این تفاوت که نتایج حسابرسی را در کنسول نمایش می‌دهد و پیشنهاد می‌کند چگونه متا تگ‌ها، نشانه‌گذاری و سایر محتوای <head> را بهتر مرتب کنیم تا مهم‌ترین اطلاعات برای بارگذاری سریع صفحه در اولویت قرار گیرند و بقیه موارد بعداً بارگذاری شوند.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

افزونه‌ی Save All Resources یک ابزار برای مرورگر Google Chrome است که به شما اجازه می‌دهد تمام فایل‌های یک وب‌سایت را (تقریباً هر چیزی که مرورگر برای نمایش آن سایت دانلود می‌کند) ذخیره کنید.

به زبان ساده، وقتی شما وارد یک سایت می‌شوید، مرورگر فایل‌هایی مثل HTML، CSS، JavaScript، عکس‌ها، فونت‌ها و حتی داده‌های JSON را بارگذاری می‌کند. این افزونه همه‌ی آن منابع را یکجا جمع می‌کند و به شما امکان می‌دهد با یک کلیک آن‌ها را به‌صورت فشرده (ZIP) دانلود کنید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

افزونه‌ی PT Application Inspector آسیب‌پذیری‌ها و ویژگی‌های مستندسازی‌نشده را در کد منبع برنامه شناسایی می‌کند. افزون بر تحلیل کد، ماژول‌های داخلی آن خطاها را در فایل‌های پیکربندی و همچنین آسیب‌پذیری‌ها را در مؤلفه‌ها و کتابخانه‌های شخص‌ ثالثی که در توسعه‌ی برنامه استفاده شده‌اند، تشخیص می‌دهند.
حالا الگوریتم هوشمند فقط فهرستی از مشکلات ارائه نمی‌دهد، بلکه پیشنهاد می‌کند از کجا بررسی را آغاز کنید: کدام آسیب‌پذیری‌ها را باید ابتدا تأیید کرد و کدام را رد نمود. علاوه‌براین، موارد مشابه را گروه‌بندی می‌کند تا بتوانید آن‌ها را به‌صورت دسته‌جمعی پردازش کنید، نه جداگانه.

● مدیریت گروهی آسیب‌پذیری‌ها. در افزونه‌ی مخصوص IntelliJ IDEA سرانجام قابلیت موردانتظار مدیریت گروهی اضافه شده است. کافی است چند آسیب‌پذیری را در زبانه‌ی Detected Vulnerabilities (آسیب‌پذیری‌های شناسایی‌شده) تیک بزنید و وضعیت همه را یک‌جا تغییر دهید. برای کاربران VSCode وعده داده‌اند که این قابلیت تا پایان سال عرضه شود.

● کوپایلت مبتنی بر LLM (مدل زبانی بزرگ) — قابلیتی آزمایشی که فعلاً فقط برای کاربران IntelliJ فعال است. در این افزونه، یک دستیار هوش مصنوعی مبتنی بر YandexGPT برای تولید اصلاحات مستقیم در محیط IDE ادغام شده است. این سیستم در رفع خودکار کد کمک می‌کند: نه‌تنها آسیب‌پذیری را پیدا می‌کند، بلکه وصله‌ای آماده با پیش‌نمایش تغییرات ارائه می‌دهد. همچنین منطق اصلاح را توضیح می‌دهد — می‌توانید از آن بپرسید چرا این تغییر به این شکل انجام شده است. همه‌ی پیشنهادهای تولیدشده نیز در زبانه‌ی جدیدی با عنوان «How to Fix» (چگونه اصلاح کنیم) ذخیره می‌شوند.

این قابلیت به‌صورت پیش‌فرض غیرفعال است (باید از بخش تنظیمات فعال شود) و برای تمام آسیب‌پذیری‌ها به‌جز موارد ردشده یا مستثناشده عمل می‌کند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

وقتی فناوری‌ها پیر می‌شوند، معمولاً این فرسودگی به‌سادگی قابل‌تشخیص نیست — تا وقتی که دیگر خیلی دیر شده باشد. همه‌چیز ظاهراً درست کار می‌کند، اما به‌روزرسانی‌های امنیتی متوقف می‌شوند، وابستگی‌های قدیمی دیگر قابل ساخت نیستند، و نسخه‌های جدید کتابخانه‌ها سازگاری را از بین می‌برند. به این ترتیب، پروژه به‌آرامی به یک بمب ساعتی تبدیل می‌شود.

برای جلوگیری از چنین موقعیت‌هایی، پروژه‌ای وجود دارد به نام endoflife.date (https://endoflife.date/
).
این سایت نشان می‌دهد پشتیبانی از زبان‌ها، کتابخانه‌ها، فریم‌ورک‌ها و سیستم‌ها چه زمانی پایان می‌یابد. کافی است مثلاً «Node.js» یا «Ubuntu» را جست‌وجو کنید تا فوراً ببینید کدام نسخه‌ها هنوز فعال‌اند و کدام را باید به‌روزرسانی کرد. حتی یک API عمومی هم دارد (https://endoflife.date/docs/api/v1/
) تا بتوانید بررسی نسخه‌ها را مستقیماً در CI خود بگنجانید و اعلان‌های خودکار دریافت کنید.

البته باید با درایت به‌روزرسانی کرد. گاهی نسخه‌ی جدید تغییرات ناسازگار و دردسرهای زیادی به‌همراه می‌آورد. برای همین، نسخه‌های LTS ایجاد شده‌اند — شاخه‌های پایداری که مدت طولانی‌تری پشتیبانی می‌شوند و تغییراتشان تدریجی‌تر است. این نسخه‌ها برای زمانی مناسب‌اند که پایداری و پیش‌بینی‌پذیری برایتان اهمیت دارد.

ایده‌ای ساده، اما در بلندمدت صرفه‌جویی بزرگی در زمان و اعصاب شما خواهد بود.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏👀 Umami ۳.۰: جایگزین خودمیزبان گوگل آنالیتیکس

یک ابزار مشابه Plausible یا Google Analytics است، اما با Node.js ساخته شده و آماده است تا خودتان آن را روی سرور خود میزبانی کنید.

ویژگی‌ها:

جمع‌آوری آمار وب بدون ردگیری شخصی کاربران

داشبورد ساده و قابل فهم

پشتیبانی از چندین سایت و کاربر

MIT License، یعنی کاملاً متن‌باز

همچنین امکان استفاده از سرویس میزبانی‌شده پولی وجود دارد

لینک‌ها:

نسخه ۳.۰: GitHub

سرویس میزبانی‌شده: Umami.is

توسعه‌دهنده: Umami Software, Inc.

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

Draw DB

وب‌سایتی است که به‌عنوان یک سامانهٔ تعاملی عمل می‌کند و به کاربران امکان می‌دهد نمودارها و دیاگرام‌های گرافیکی بسازند و با دیگران به‌اشتراک بگذارند، و بدین‌وسیله تصویری‌سازی ایده‌ها و مفاهیم را تسهیل می‌کند.


🔗https://www.drawdb.app
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

گیم‌شِل — یک بازیِ آموزشیِ کنسولی است که از ماجراجویی‌های کلاسیک متنی الهام گرفته؛ جایی که تمام دنیا در قالب متن وجود دارد و اعمال شما همان فرمان‌ها هستند. تنها تفاوت این است که این‌جا فرمان‌ها واقعیِ یونیکس‌اند. بازی با مأموریت‌ها و وظایف، کار با ترمینال را آموزش می‌دهد و یادگیری را به یک کوئست تبدیل می‌کند.
است، روی لینوکس و مک‌او‌اِس اجرا می‌شود و یک ایمیج داکر نیز دارد. نصب آن حداقلی است: اسکریپت را دانلود می‌کنید، اجرا می‌کنید — و ی
این پروژه در اصل به‌عنوان یک کار دانشگاهی شکل گرفت: نویسنده گیم‌شِل را برای دانشجویانی ساخت که باید به‌سرعت فرمان‌های پایهٔ لینوکس را یاد می‌گرفتند. ایده کاملاً جواب داد — به‌جای شنیدن سخنرانی‌های خسته‌کننده، دانشجویان شروع کردند به انجام مأموریت‌های عملی با استفاده از ابزارهای واقعی خط فرمان.

گیم‌شِل کاملاً متن‌باز ک محیط تمرینی با امکان حفظ پیشرفت دریافت می‌کنید.

هر مأموریت یک «اتاق» متنی کوچک است، درست مانند بازی‌های ماجرایی قدیمی، اما با فرمان‌های واقعی.

کاملاً پیشنهاد می‌شود.

🔗https://github.com/phyver/GameShell/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

چطور رفتار برنامه را وقتی یک درخواست مشخص شکست می‌خورد بررسی کنیم؟ 🥲

وقتی تست می‌کنیم، معمولاً در مرورگر حالت «بدون اینترنت» را فعال می‌کنیم. این کار مفید است، اما همیشه واقع‌بینانه نیست؛ در دنیای واقعی معمولاً کل اتصال قطع نمی‌شود، بلکه فقط یک درخواست مشخص به API با خطا مواجه می‌شود. به همین دلیل، گاهی لازم است ببینیم برنامه دقیقاً در چنین شرایطی چگونه رفتار می‌کند. 😁

اینجاست که DevTools به کمک ما می‌آید. در Chrome می‌توان نه‌تنها کل شبکه را قطع کرد، بلکه یک درخواست مشخص را هم مسدود نمود:

✔️ DevTools را باز کنید → تب Network
✔️ درخواست موردنظر را پیدا کنید، روی آن راست‌کلیک کنید → Block request URL / مسدود کردن URL درخواست
✔️ صفحه را رفرش کنید یا عمل مربوطه را تکرار کنید و ببینید برنامه دقیقاً به شکست همین درخواست چگونه واکنش نشان می‌دهد

با این روش می‌توانید موارد زیر را تست کنید:

⏺️ سناریوهای fallback، وقتی بخشی از داده‌ها در دسترس نیست
⏺️ مدیریت خطاها و پیام‌ها یا نوتیفیکیشن‌هایی که به کاربر نمایش داده می‌شود
⏺️ وضعیت لودینگ و اسپینرها، تا مطمئن شوید رابط کاربری در مواجهه با مشکل شبکه رفتار درستی دارد

این کار به‌ویژه زمانی مفید است که سناریوی پیچیده‌ای دارید که به چند API وابسته است؛ می‌توانید چند درخواست را به‌صورت انتخابی مسدود کنید و خرابی‌های جزئی را شبیه‌سازی نمایید. چیزی شبیه یک استرس‌تست هدفمند برای سناریوهای خاص، بدون اینکه لازم باشد اتصال همهٔ سرویس‌ها را به‌طور کامل قطع کنید.

📌 یک عادت کوچک که می‌تواند کیفیت محصول را بالا ببرد:
به‌جای اینکه فقط حالت «آفلاین» را تست کنید، شکست خوردن درخواست‌های تکی را هم بررسی کنید — این حالت به مشکلات واقعی‌ای که کاربر با آن‌ها مواجه می‌شود بسیار نزدیک‌تر است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript