تنظیمات Browser Site Preview (پیش‌نمایش سایت در مرورگر)

Site Preview در مرورگر به قابلیت مشاهده نسخه کَش شده یا در حال توسعه سایت بدون نیاز به انتشار رسمی اشاره دارد. این قابلیت می‌تواند در مواردی مانند توسعه، تست و بهینه‌سازی وب‌سایت مفید باشد.

روش‌های مختلف تنظیم Site Preview در مرورگر

بررسی پیش‌نمایش سایت از طریق DevTools (مرورگر کروم و فایرفاکس)

مشاهده نسخه کش شده سایت

1. کلید F12 را بزنید یا روی صفحه کلیک راست کنید و "Inspect" را انتخاب کنید.
2. به تب "Network" بروید.
3. گزینه "Disable Cache" را فعال کنید تا سایت بدون استفاده از کش بارگذاری شود.
4. صفحه را ریفرش (Ctrl + Shift + R یا Cmd + Shift + R در مک) کنید.

استفاده از "Responsive Design Mode" در مرورگر برای پیش‌نمایش سایت در دستگاه‌های مختلف

این روش برای مشاهده نحوه نمایش سایت در موبایل، تبلت و سایر دستگاه‌ها استفاده می‌شود.

در گوگل کروم یا فایرفاکس:
1. **F12** را بزنید و به تب "Toggle Device Toolbar" بروید.
2. مدل‌های مختلف مانند iPhone, Samsung Galaxy, iPad را انتخاب کنید.
3. تغییرات نمایش سایت را مشاهده کنید.

پیش‌نمایش سایت بدون تغییر DNS (Hosts File Method)

اگر دامنه شما هنوز ست نشده ولی می‌خواهید سایت را تست کنید، از این روش استفاده کنید:

ویندوز
1. فایل `C:\Windows\System32\drivers\etc\hosts` را باز کنید.
2. این خط را به انتهای فایل اضافه کنید:

192.168.1.100 domainname.com

3. مرورگر را باز کرده و اسم دامین را تایپ کنید.

لینوکس / مک
1. ترمینال را باز کنید و دستور زیر را اجرا کنید:

sudo nano /etc/hosts

2. این خط را به فایل اضافه کنید:

192.168.1.100 domainname.com

3. فایل را ذخیره کنید و سایت را در مرورگر باز کنید.

نکته: این روش به شما امکان می‌دهد نسخه جدید سایت را بدون تغییر DNS واقعی مشاهده کنید.هر زمان مایل بودید از روی dns دامین شما سایت لود شود نیاز است تغییرات را به حالت اولیه باز گردانید و خط اخری را که افزودید حذف نمایید و تغییرات را ذخیره کنید.

پیش‌نمایش سایت با استفاده از ابزارهای آنلاین

برخی از سایت‌ها امکان پیش‌نمایش و تست سایت در مرورگرهای مختلف را فراهم می‌کنند:

[browserstack.com](https://www.browserstack.com/) (تست روی مرورگرهای مختلف)
- [responsinator.com](http://www.responsinator.com/) (بررسی نمایش موبایل)
- [developers.google.com/speed/pagespeed/insights/](https://developers.google.com/speed/pagespeed/insights/) (بررسی عملکرد سایت)

5) مشاهده سایت بدون کش و ذخیره‌های مرورگر

اگر تغییرات سایت را نمی‌بینید:
1. Ctrl + Shift + R (در مک: Cmd + Shift + R) → بارگذاری سخت‌افزاری بدون کش
2. Ctrl + F5 → ریفرش کامل سایت
3. پاک کردن کش و کوکی‌ها:
- در کروم: `chrome://settings/clearBrowserData`
- در فایرفاکس: `about:preferences#privacy`

✔ پیش‌نمایش سایت در مرورگر را می‌توان با ابزارهای DevTools، تغییر فایل Hosts، ابزارهای آنلاین یا غیرفعال کردن کش انجام داد.
✔ برای تست طراحی موبایل، از "Responsive Design Mode" در DevTools استفاده کنید.
✔ اگر تغییرات سایت را نمی‌بینید، کش مرورگر را پاک کنید یا از کلیدهای میانبر ریفرش سخت‌افزاری استفاده کنید.

برچسب ها

پشتیبانی