Chrome Dev Tools یا بازرس سایت کروم چطور کار میکند

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

چطور به Chrome Dev Tools دسترسی پیدا کنم

برای دسترسی به ابزار بازرس (Inspector) می‌توانید:

• در ویندوز کلید F12 یا ترکیب Ctrl + Shift + J را بزنید
• در مک از ترکیب Command + Option + C استفاده کنید. 
• همچنین می‌توانید روی هر بخشی از صفحه راست‌کلیک کرده و گزینه Inspect را انتخاب کنید تا مستقیماً به کد آن عنصر در ابزار منتقل شوید.

این نمایی است که هنگام باز کردن بازرس برای اولین بار مشاهده می‌کنید. اولین توصیه من این است که محیط این ابزار را طوری تنظیم کنید که برای شما کاربردی باشد.

چطور Chrome Dev Tools را شخصی سازی کنم

برای این کار، روی سه نقطه در بالای پنجره کلیک کنید

و در قسمت Dock side تعیین کنید که ابزار در کدام سمت صفحه قرار بگیرد.

این بیشتر به سلیقه شخصی بستگی دارد. شما میتوانید محل قرار گیری این صفحه را طبق سلیقه شخصی خودتان در طرفین صفحه یا بالا یا پایین صفحه قرار دهید .

من در اینجا گزینه سمت چپ صفحه را انتخاب کردم و بعد از کلیک بر روی صفحه به سمت مورد نظر من منتقل شد.

در بالای پنجره ابزار معمولاً گزینه‌هایی مثل

Elements،

Console،

Sources،

Network

دیده می‌شوند و در منوی کشویی سایر گزینه‌ها مانند

Performance،

Memory،

Application،

Privacy and Security،

Lighthouse،

Recorder

وجود دارد. در اینجا فقط بخش‌هایی را پوشش می‌دهم که برای سئو فنی کاربرد دارند، اما توصیه می‌کنم سایر بخش‌ها را هم بررسی کنید.

Elements

بخش Elements که اکنون در آن قرار داریم، جایی است که می‌توانید کد یک صفحه را بررسی کنید. برای مثال، اینجا مکان خوبی برای بررسی ساختار تیترهای صفحه است که آیا درست استفاده شده‌اند یا نه.

Console

بخش Console معمولاً در سئو فنی کاربرد زیادی ندارد مگر اینکه با جاوااسکریپت یا ابزارهای تحلیلی کار کنید. مثلا در این تصویر فایل کنسول به ما میگوید که مرورگر تلاش کرده تا یک فایل (منبع) را بارگذاری کند، اما سرور گفته که چنین فایلی وجود ندارد. کد وضعیت 404 به معنی Not Found است. این مورد ممکن است به دلایل زیر باشد:

🔍 لیست خطاهای موجود در تصویر:

1. banner-default.jpg:1
2. IRANSansWeb.woff2:1
3. IranYekan.woff2:1

🧠 معنی خطاها به زبان ساده:

• فایل‌های گرافیکی (مثل banner-default.jpg) یا فونت‌ها (مثل IranYekan.woff2) در مسیر مشخص‌شده در سایت وجود ندارند یا آدرس‌دهی آن‌ها اشتباه است.
• این موضوع ممکن است باعث شود:
  • تصویر مورد نظر در سایت نمایش داده نشود.
  • فونت دلخواه (مثلاً ایران‌سنس یا ایران‌یکان) روی سایت بارگذاری نشود و فونت پیش‌فرض مرورگر جایگزین شود.
• این خطاها از لحاظ سئو یا تجربه کاربری مهم هستند، چون:
  • باعث کاهش جذابیت بصری سایت می‌شوند.
  • ممکن است سرعت سایت را تحت تأثیر قرار دهند.
  • کنسول مرورگر را برای دیباگ کردن شلوغ می‌کنند.

که در ادامه به بررسی که آیتم هایی که در بررسی سرعت سایت بسیار اهمیت دارند میپردازیم یعنی تب های Sources، Network و Performance :

Sources:

در تب Sources می‌توانید همه دامنه‌هایی که برای ساخت آن صفحه فراخوانی شده‌اند را ببینید. این موضوع اهمیت دارد، چون ممکن است نشان دهد که سایت شما از چندین دامنه مختلف فایل بارگذاری می‌کند که می‌تواند باعث کندی سرعت شود.

1. بعلاوه ساختار پوشه‌ها و فایل‌های لودشده از سرور شما را نمایش می‌دهد – مثلاً می‌توانید بفهمید که آیا یک فایل CSS یا JS لود شده یا نه.
2. امکان ویرایش زنده کدها را فراهم می‌کند – مثلاً می‌توانید مستقیم در یک فایل JavaScript یا CSS تغییری آزمایشی ایجاد کنید و نتیجه را ببینید.
3. با استفاده از Workspace، می‌توانید DevTools را با فایل‌های لوکال همگام‌سازی کنید – این یعنی تغییرات شما قابل ذخیره‌سازی دائمی خواهد بود، نه فقط در لحظه مرورگر.
4. برای اشکال‌زدایی جاوااسکریپت بسیار مهم است – چون اینجا می‌توانید Breakpoint بگذارید، اسنیپت اجرا کنید و وضعیت اجرای اسکریپت‌ها را ببینید.

Network

تب Network هم برای بررسی سرعت مفید است چون تمام فایل‌هایی که برای ساخت صفحه فراخوانی شده‌اند را نشان می‌دهد. اگر صفحه را رفرش کنید، اطلاعات جدید به این تب اضافه می‌شود. می‌توانید روی هر مورد حرکت ماوس انجام دهید تا ببینید این فایل چطور در کل سایت جا گرفته است. یکی از موارد مهم در این بخش بررسی کد وضعیت (Status Code) عناصر است. مثلاً اگر فایلی بارگذاری نمی‌شود و کد 404 دارد، باید سریعاً اصلاح شود چون باعث کندی سایت می‌شود.

Performance

بخش Performance اطلاعات عمیق‌تری درباره نحوه بارگذاری عناصر و تأثیر آن‌ها بر سرعت کلی سایت می‌دهد. برای اطلاعات بیشتر در مورد این بخش‌ها، در مقالات مرتبط با سرعت سایت این بخش را دقیق تر شکافتیم.

بخش‌های Memory و Application را فعلاً نادیده می‌گیریم.

Security

در تب Security باید مطمئن شوید که سایت گواهینامه امنیتی معتبر دارد. مثلاً در سایت نمونه inadramseo می‌بینید که گواهینامه معتبر است و سایت امن است.

Lighthouse

در نهایت می‌رسیم به Lighthouse.

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

پیشنهاد می‌کنم Lighthouse را در حالت ناشناس (Incognito) اجرا کنید. برای این کار روی سه نقطه بالا کلیک کرده و گزینه New Incognito Window را بزنید و سپس از Lighthouse استفاده کنید.

این کار از تأثیر افزونه‌های کروم که ممکن است نتایج را تغییر دهند، جلوگیری می‌کند.

برای نمونه، در سایت InadramSeo.com می‌بینید که Lighthouse در حالت ناشناس اجرا شده و گزارش داده است. دقت کنید که بخش Performance در Lighthouse با بخش Performance در Dev Tools متفاوت است. گزارشی که در اینجا می‌بینید شبیه همان چیزی است که با ابزار Google PageSpeed Insights به‌دست می‌آورید.

پیشنهاد می‌کنم صفحه را پایین ببرید و بخش‌های Accessibility، Best Practices و SEO را نیز بررسی کنید. هر کاری که باعث دسترس‌پذیرتر شدن سایت شما شود، نه‌تنها از نظر تجربه کاربری مفید است بلکه ممکن است از نظر قانونی هم لازم باشد.

در بخش سئو، ربات‌های خزنده سایت شما احتمالاً همین مشکلات را پیدا می‌کنند، اما همیشه خوب است که ابزار دوم هم به شما بازخورد بدهد.

در نهایت، یادتان باشد که می‌توانید این ابزارها را روی هر سایتی اجرا کنید. شروع کنید به بررسی سایت‌هایی که هر روز از آن‌ها بازدید می‌کنید. این تمرین به شما کمک می‌کند با ابزارها راحت‌تر کار کنید و همچنین می‌توانید مشکلات سئو فنی رایج را در سایت‌های دیگر هم ببینید.