ثبت رویدادهای عناصر DOM در کنسول

تابع monitorEvents برای هر رویدادی که روی یک گره DOM (مانند یک عنصر HTML) رخ می‌دهد، پیامی در کنسول ثبت می‌کند.

monitorEvents(document.body);

📋 رویدادهای گزارش‌شده روی `document.body`

همان‌طور که مشاهده می‌کنید، گزارش‌گیری از تمام رویدادها می‌تواند بسیار شلوغ و پرحجم باشد.
برای جلوگیری از این مسئله، می‌توانید فقط نوع رویدادهایی که برایتان اهمیت دارند را به‌صورت آرایه‌ای مشخص کنید:

monitorEvents(document.body, ["pointerenter", "click"]);

برای غیرفعال کردن این گزارش‌ها، از تابع unmonitorEvents استفاده کنید:

unmonitorEvents(document.body);

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

شناسایی شنونده‌های رویداد (Event Listeners) متصل‌شده

برای مشاهده‌ی تمامی شنونده‌های رویداد (Event Handlers) که به یک عنصر متصل شده‌اند، می‌توانید از تابع getEventListeners استفاده کنید:

getEventListeners(document.body);

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

* نوع رویداد (مانند click`، `scroll و...)
* ویژگی‌هایی مانند اینکه آیا شنونده فقط یک‌بار اجرا می‌شود (once) یا خیر
* و همچنین ارجاع مستقیم به تابعی که به‌عنوان handler تعریف شده است

برای مشاهده‌ی کد منبع تابع، کافی‌ست روی آن راست‌کلیک کرده و گزینه‌ی Show function definition را انتخاب کنید تا مستقیماً به محل تعریف تابع هدایت شوید.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

یافتن اشیاء براساس سازنده (Constructor)
تابع queryObjects فهرستی از اشیایی را بازمی‌گرداند که با استفاده از سازنده‌ای که به آن پاس داده‌اید، ایجاد شده‌اند.

این سازنده می‌تواند یک نوع داخلی مانند Function یا Promise باشد، یا یک کلاسی که خودتان در کد تعریف کرده‌اید.

queryObjects(Function);

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

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

ابزار 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