نحوه نمایش کد منبع یک صفحه وب در هر مرورگر

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

اکثر مرورگرهای وب توانایی دیدن کد منبع یک صفحه وب را دارند بدون هیچ نرم افزاری اضافی مورد نیاز، بدون توجه به نوع دستگاه شما.

بعضی از آنها حتی قابلیت و ساختار پیشرفته ای را ارائه می دهند که HTML و دیگر برنامه های کد را در صفحه قابل خواندن می کند.

چرا میخواهید کد منبع را مشاهده کنید؟

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

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

در زیر فهرستی از نحوه مشاهده کد منبع در انتخاب مرورگر شماست.

گوگل کروم

در حال اجرا: سیستم عامل کروم، لینوکس، macOS، ویندوز

نسخه دسکتاپ Chrome سه روش مختلف برای مشاهده یک کد منبع صفحه، اولین و ساده ترین با استفاده از میانبر صفحهکلید زیر است: CTRL + U ( COMMAND + OPTION + U در macOS).

هنگامی که فشار داده می شود، این میانبر یک برگه مرورگر جدید را نمایش می دهد که HTML و کد دیگر را برای صفحه فعال نمایش می دهد. این منبع رنگی و ساختار یافته به شیوه ای است که باعث می شود ساده تر به نظر برسد و آنچه را که دنبال می کنید پیدا کنید. شما همچنین می توانید از طریق وارد کردن متن زیر در نوار آدرس Chrome، به سمت چپ صفحه URL وب اضافه کنید و کلید Enter را بزنید: view-source: (به عنوان مثال، view-source: https: // www .)

روش سوم از طریق ابزار توسعهدهنده Chrome است که به شما امکان می دهد تا به صفحه کد نویسی عمیق تر بپردازید و همچنین آن را برای پرواز و آزمایش برای اهداف تست و توسعه آماده کنید. رابط ابزار توسعه دهنده می تواند با استفاده از این میانبر صفحه کلید باز و بسته شود: CTRL + SHIFT + I ( COMMAND + OPTION + I در macOS). شما همچنین می توانید از طریق مسیر زیر آنها را راه اندازی کنید.

  1. روی دکمه منوی اصلی Chrome کلیک کنید، در گوشه بالا سمت راست قرار دارد و توسط سه نقطه به صورت عمودی تنظیم شده است.
  2. وقتی منوی کشویی ظاهر می شود، نشانگر ماوس خود را بر روی گزینه ابزارهای بیشتر قرار دهید .
  3. هنگامی که زیر منو ظاهر می شود، روی ابزار توسعه دهنده کلیک کنید.

اندروید
مشاهده منبع منبع وب در Chrome برای Android ساده است به عنوان افزودن متن زیر به جلو آدرس آن (یا URL) و ارسال آن: view-source :. یک مثال از این می تواند مشاهده منبع باشد: https: // www. . HTML و کد دیگر از صفحه مورد نظر فورا در پنجره فعال نمایش داده می شود.

در iOS
در حالی که هیچ روش بومی برای مشاهده کد منبع با استفاده از Chrome در iPad، iPhone یا iPod touch وجود ندارد، ساده ترین و موثر تر از استفاده از یک راه حل شخص ثالث مانند برنامه View Source است.

در دسترس برای $ 0.99 در فروشگاه App، نمایش منبع، شما را به وارد کردن URL صفحه (یا کپی / چسباندن آن را از نوار آدرس کروم، که گاهی اوقات ساده ترین راه برای گرفتن) و این است. علاوه بر نشان دادن HTML و دیگر کد منبع، برنامه همچنین دارای زبانه هایی است که دارایی های صفحه شخصی، مدل Object Document (DOM)، و همچنین اندازه صفحه، کوکی ها و سایر جزئیات جالب را نشان می دهد.

مایکروسافت لبه

در حال اجرا: ویندوز

مرورگر Edge به شما امکان می دهد که کد منبع صفحه فعلی خود را از طریق ابزار رابط برنامه نویس خود مشاهده، تحلیل و حتی دستکاری کنید. برای دسترسی به این ابزار مفید، می توانید از یکی از این میانبرهای صفحه کلید استفاده کنید: F12 یا CTRL + U. اگر ترجیح دادید که موس را انتخاب کنید، روی دکمه منو Edge کلیک کنید (سه نقطه واقع در گوشه سمت راست بالا) و گزینه F12 Developer Tools را از لیست انتخاب کنید.

پس از اینکه ابزارهای Dev برای اولین بار اجرا می شوند، Edge دو گزینه اضافی را به منوی زمینه مرورگر اضافه می کند (قابل دسترسی با کلیک راست در هر نقطه در یک صفحه وب): بررسی عنصر و نمایش منبع ، دوم که بخش Debugger را باز می کند رابط ابزار با کد منبع پر شده است.

موزیلا فایرفاکس

در حال اجرا: لینوکس، macOS، ویندوز

برای مشاهده یک کد منبع صفحه در نسخه دسکتاپ فایرفاکس، میتوانید بر روی صفحهکلید خود، CTRL + U ( COMMAND + U در macOS) را فشار دهید، که یک برگه جدید حاوی HTML و کد دیگر برای صفحه وب فعال را باز می کند.

تایپ کردن متن زیر در نوار آدرس فایرفاکس، به طور مستقیم در سمت چپ URL صفحه، باعث می شود که همان منبع در برگه فعلی نمایش داده شود : view-source: (یعنی view-source: https: // www.) .

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

  1. با کلیک بر روی دکمه منو اصلی، در گوشه بالا سمت راست پنجره مرورگر خود قرار گرفته و توسط سه خط افقی نشان داده شده است.
  2. وقتی منو ظاهر می شود، روی نماد "آچارساز" برنامه نویس کلیک کنید.
  3. منوی زمینه برنامه نویس وب اکنون باید قابل مشاهده باشد. گزینه منبع صفحه را انتخاب کنید.

فایرفاکس همچنین به شما اجازه می دهد که کد منبع را برای بخش خاصی از صفحه مشاهده کنید و آن را برای جداسازی مسائل آسان کنید. برای انجام این کار، ابتدا منطقه ای را که مورد علاقه شما در موس شما است، برجسته کنید. بعد، راست کلیک کرده و گزینه View Selection Source را از منوی زمینه مرورگر انتخاب کنید.

اندروید
مشاهده کد منبع در نسخه آندروید فایرفاکس با پیشوند صفحه URL وب با متن زیر امکان پذیر است: view-source :. برای مثال، برای مشاهده منبع HTML برای ارسال متن زیر در نوار آدرس مرورگر: view-source: https: // www. .

در iOS
روش توصیه شده ما برای مشاهده کد منبع صفحه وب در iPad، iPhone یا iPod Touch شما از طریق برنامه View Source است که در فروشگاه App برای $ 0.99 در دسترس است. در حالی که به طور مستقیم با فایرفاکس مجتمع نمی شود، شما می توانید به راحتی URL را از مرورگر به برنامه پیکربندی و جای گذاری کنید تا HTML و کد دیگر مرتبط با صفحه مورد نظر را افشا کنید.

اپل سافاری

در حال اجرا در iOS و macOS

در iOS
اگر چه Safari برای iOS شامل امکان نمایش پیش فرض صفحه به صورت پیش فرض نیست، مرورگر به آسانی با برنامه Source View سازگار می شود - که در فروشگاه App برای $ 0.99 در دسترس است.

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

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

سیستم عامل مک
برای مشاهده کد منبع یک صفحه در نسخه دسکتاپ Safari ابتدا باید منوی توسعه خود را فعال کنید. مراحل زیر را از طریق فعال کردن این منوی پنهان و نمایش یک منبع HTML صفحه نشان می دهد.

  1. روی مرورگر Safari در منوی مرورگر، در بالای صفحه کلیک کنید.
  2. هنگامی که منوی کشویی ظاهر می شود، گزینه ترجیحات را انتخاب کنید.
  3. تنظیمات Safari در حال حاضر قابل مشاهده است. با کلیک بر روی آیکون پیشرفته ، واقع در سمت راست سمت راست ردیف بالا.
  4. در سمت پایین بخش پیشرفته، یک گزینه با نام Show Develop منو در نوار منو همراه با جعبه خالی است. یک بار روی این جعبه کلیک کنید تا علامت چک را در آن قرار دهید و پنجره Preferences را با کلیک روی قرمز "X" که در گوشه سمت چپ بالا قرار دارد، ببندید.
  5. روی منوی توسعه کلیک کنید، در بالای صفحه قرار دارد.
  6. هنگامی که منوی کشویی ظاهر می شود، نمایش صفحه منبع را انتخاب کنید. شما همچنین می توانید از میانبر صفحه کلید زیر استفاده کنید: COMMAND + OPTION + U.

اپرا

در حال اجرا: لینوکس، macOS، ویندوز

برای مشاهده کد منبع از صفحه وب فعال در مرورگر اپرا، از میانبر صفحهکلید زیر استفاده کنید: CTRL + U ( COMMAND + OPTION + U در macOS). اگر ترجیح میدهید منبع را در برگه فعلی بارگذاری کنید، متن زیر را به سمت چپ URL URL در نوار آدرس تایپ کنید و Enter را وارد کنید : view-source: (یعنی view-source: https: // www. )

نسخه دسکتاپ اپرا همچنین با استفاده از ابزارهای توسعهدهنده یکپارچه شما میتوانید متن HTML، CSS و سایر عناصر را مشاهده کنید. برای راه اندازی این رابط، که به طور پیش فرض در سمت راست پنجره مرورگر شما ظاهر می شود، کلید میانبر زیر را فشار دهید: CTRL + SHIFT + I ( COMMAND + OPTION + I در macOS).

ابزار ابزار توسعه اپرا نیز با در نظر گرفتن مراحل زیر قابل دسترسی است.

  1. بر روی لوگوی اپرا کلیک کنید، در گوشه سمت چپ بالای پنجره مرورگر خود قرار دارد.
  2. وقتی منوی کشویی ظاهر می شود، نشانگر ماوس خود را بر روی گزینه ابزارهای بیشتر قرار دهید .
  3. روی نمایش منوی توسعهدهنده کلیک کنید .
  4. دوباره لوگوی اپرا را کلیک کنید.
  5. هنگامی که منوی کشویی ظاهر می شود، مکان نما خود را بیش از Developer قرار دهید .
  6. هنگامی که زیر منو ظاهر می شود، روی ابزار توسعه دهنده کلیک کنید.

ویلوودی

راه های متعددی برای مشاهده منبع صفحه در مرورگر Vivaldi وجود دارد. ساده ترین راه از طریق CTRL + U میانبر صفحه کلید است که کد را از صفحه فعال در برگه جدید ارائه می دهد.

شما همچنین می توانید متن زیر را به جلو URL صفحه اضافه کنید، که کد منبع را در برگه فعلی نمایش می دهد : view-source :. یک مثال از این می تواند مشاهده منبع باشد: http: // www. .

روش دیگری از طریق ابزار توسعهدهنده مرورگر است که با فشار دادن CTRL + SHIFT + I و یا از طریق ابزار ابزار برنامهنویسان در منوی ابزارهای مرورگر قابل دسترسی است که با کلیک کردن بر روی لوگو «V» در گوشه سمت چپ بالا قرار دارد. با استفاده از ابزار dev اجازه می دهد تا تجزیه و تحلیل بسیار عمیق تر از منبع صفحه.