تماس با ما
مسیر فرانت‌اند· ۲ دقیقه مطالعه

مرورگرها و DevTools

مرورگرها و DevTools؛ آموزش مسیر فرانت‌اند به زبان ساده، همراه با مثال و خروجی.

مرورگر چطور کار می‌کنه؟

اجزای اصلی: UI، موتور رندر (Blink در Chrome/Edge، WebKit در Safari، Gecko در Firefox)، موتور JavaScript (V8، JavaScriptCore، SpiderMonkey)، شبکه، ذخیره‌سازی.

مسیر رندر (Critical Rendering Path)

۱. Parse HTML ← DOM ۲. Parse CSS ← CSSOM ۳. DOM + CSSOM ← Render Tree (المان‌های display: none توش نیستن) ۴. Layout (اندازه و موقعیت) ۵. Paint (رنگ‌آمیزی) ۶. Composite (ترکیب لایه‌ها روی GPU)

  • CSS render-blocking است؛ <script> معمولی parser-blocking است (از defer/async استفاده کن).
  • جزئیات هزینه‌ی هر مرحله: عملکرد CSS.

JavaScript در مرورگر

Call Stack، Web APIs، Task Queue و Event Loop: Async JS.

سازگاری مرورگرها

  • ویژگی‌های جدید رو در caniuse.com و MDN Browser Compatibility چک کن.
  • Progressive Enhancement: پایه برای همه کار کنه، قابلیت‌های جدید به‌عنوان ارتقا (@supports، feature detection در JS).
  • Polyfill / Transpile برای مرورگرهای قدیمی (Babel، SWC، Autoprefixer).
  • browserslist تعیین می‌کنه ابزارها برای کدوم مرورگرها خروجی بدن.

DevTools

باز کردن: F12 یا Ctrl+Shift+I (در مک Cmd+Option+I).

پنلکاربرد
Elementsبررسی و تغییر زنده‌ی DOM و CSS، box model، حالت‌های :hover
Consoleلاگ، خطاها، اجرای JS
Sourcesدیباگ با breakpoint، step over/into، watch
Networkدرخواست‌ها، زمان‌بندی، هدرها، throttling، cache
Performanceضبط و تحلیل رندر و اجرای JS
Lighthouseامتیاز عملکرد، دسترس‌پذیری، SEO، PWA
ApplicationlocalStorage، cookie، IndexedDB، service worker، manifest
Memoryشناسایی نشت حافظه (heap snapshot)
Securityوضعیت گواهی و محتوای mixed

ترفندهای Console

console.log("ساده");
console.table([{ a: 1 }, { a: 2 }]);   // جدول
console.group("گروه"); console.log("x"); console.groupEnd();
console.time("t"); /* کد */ console.timeEnd("t");
console.assert(1 === 2, "این پیام نمایش داده می‌شه");
console.dir(document.body);             // ساختار شیء
$0                                       // المان انتخاب‌شده در Elements
$$("a")                                  // querySelectorAll
copy(obj)                                // کپی به clipboard

دیباگ

function calc(a, b) {
  debugger;                // اگه DevTools باز باشه اینجا متوقف می‌شه
  return a + b;
}
  • Breakpoint روی خط، شرطی (Conditional)، روی رویداد (Event Listener Breakpoints)، روی تغییر DOM.
  • Network: گزینه‌ی Disable cache، Offline، Slow 4G برای شبیه‌سازی.
  • Device Toolbar (Ctrl+Shift+M) برای شبیه‌سازی موبایل.

ابزارهای دیگه

  • React/Vue DevTools (extension)
  • Firefox: ابزار Grid و Flexbox inspector عالی
  • chrome://inspect، دیباگ از راه دور موبایل

تمرین

۱. در یک سایت دلخواه، با Elements رنگ یک دکمه رو زنده عوض کن. ۲. در Network ببین کدوم درخواست از همه کندتره و چرا. ۳. برنامه‌ی کوچکی با یک باگ بنویس و با breakpoint پیداش کن.

ایده‌ای دارید؟ برایمان بگویید

مشاوره و پیشنهاد اولیه رایگان است.

تماس با ما