نحوه مشاهده کد HTML در کروم

پیوندهای دستگاه

• اندروید
• آیفون
• Chromebook
• مک
• پنجره ها
• دستگاه گم شده است؟

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

در این آموزش، نحوه مشاهده کد HTML یک صفحه وب در کروم را به شما نشان خواهیم داد.

مشاهده کد HTML در کروم

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

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

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

برای توسعه دهندگان، مشاهده کد منبع می تواند راهی مفید برای درک چگونگی ساختار یک صفحه و تعیین عناصر سبک و اسکریپت مورد استفاده باشد. برای طراحان، دیدن اینکه چگونه طراحان دیگر از HTML برای ایجاد طرح‌بندی مؤثر استفاده کرده‌اند، می‌تواند مفید باشد.

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

نحوه مشاهده کد HTML یک صفحه وب در کروم در رایانه شخصی ویندوز

سیستم عامل ویندوز یکی از سازگارترین سیستم های کروم است. Chrome بر روی پروژه منبع باز Chromium ساخته شده است که مایکروسافت یکی از مشارکت کنندگان اصلی آن است. این سازگاری به قلمرو HTML گسترش می یابد، جایی که مرورگر محبوب به کاربران اجازه می دهد کد HTML هر وب سایت را مشاهده کنند.

شما می توانید کد HTML را به دو صورت مشاهده کنید.

استفاده از مشاهده منبع صفحه

این روش ساده است:

1. Chrome را باز کنید و به صفحه ای که می خواهید کد منبع HTML را در آن مشاهده کنید بروید.
   
2. روی صفحه کلیک راست کرده و View Page Source را انتخاب کنید یا Ctrl + U را روی صفحه کلید خود فشار دهید تا کد منبع در یک تب جدید باز شود.
   

کد منبع در برگه جدید ظاهر می‌شود و می‌توانید برای مشاهده نشانه‌گذاری HTML آن صفحه، آن را مرور کنید.

استفاده از ابزارهای توسعه دهنده

برای بررسی کد منبع یک صفحه وب با استفاده از ابزارهای توسعه دهنده در Google Chrome، مراحل زیر را دنبال کنید.

1. Google Chrome را باز کنید و به صفحه وب که می خواهید بازرسی کنید بروید.
   
2. Ctrl + Shift + I را روی صفحه کلید خود فشار دهید. پنجره Developer Tools در یک داک در کنار صفحه وبی که در حال مشاهده آن هستید باز می شود.
   
3. روی تب "Elements" در بالای صفحه کلیک کنید. با این کار کد منبع HTML صفحه وب نمایش داده می شود.
   
4. اکنون می توانید کد منبع صفحه را مرور کنید. برای جمع کردن یک عنصر، روی مثلث کنار نام تگ آن کلیک کنید. برای مشاهده اطلاعات بیشتر در مورد یک جزء، روی آن کلیک راست کرده و "Inspect" را انتخاب کنید.
   

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

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

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

1. Chrome را باز کنید و به صفحه وب که می‌خواهید کد HTML را در آن مشاهده کنید بروید.
   
2. روی صفحه کلیک راست کرده و "Inspect" را انتخاب کنید.
   
3. یک صفحه جدید در پایین صفحه باز می شود که کد HTML را نشان می دهد.
   
4. همچنین می توانید روی عناصر خاصی در کد HTML کلیک کنید تا ببینید که چگونه آنها در صفحه استایل بندی شده اند. برای مثال، می‌توانید با انتخاب یک عنصر و سپس کلیک کردن بر روی زبانه «Styles» در پنجره‌ای که باز می‌شود، ببینید که کدام سبک‌های CSS روی یک عنصر اعمال می‌شوند.
   
5. برای بستن پنجره، روی "X" در گوشه سمت راست بالا کلیک کنید.
   

همچنین، می‌توانید از ابزارهای برنامه‌نویس Chrome برای مشاهده کد منبع استفاده کنید.

1. Google Chrome را باز کنید و به صفحه وبی که می‌خواهید بازرسی کنید بروید.
   
2. روی نماد منو (سه نقطه) در گوشه سمت راست بالای مرورگر کلیک کنید و از منوی کشویی More Tools and Developer Tools را انتخاب کنید.
   
3. پنل Developer Tools در پایین صفحه باز می شود. "Elements" را در بالای صفحه انتخاب کنید.
   
4. اکنون کد HTML صفحه فعلی را در پنل Elements خواهید دید. می‌توانید از گزینه‌های مختلف در پنل برای بررسی و اشکال‌زدایی کد در صورت نیاز استفاده کنید.
   

تنها با چند کلیک، می‌توانید کد HTML هر صفحه وب را در Chrome در مک به راحتی مشاهده کنید. این می تواند زمانی مفید باشد که می خواهید مشکلات توسعه وب را عیب یابی کنید یا می خواهید نگاه دقیق تری به نحوه ساخت یک وب سایت خاص بیندازید.

نحوه مشاهده کد HTML یک صفحه وب در کروم در برنامه آیفون

اگر از آیفون استفاده می‌کنید، می‌توانید کد HTML هر صفحه در کروم را به دو روش مشاهده کنید:

بهینه سازی URL

شما می توانید به راحتی کد HTML هر صفحه را با انجام یک تنظیم کوچک در URL مشاهده کنید:

1. Chrome را باز کنید و به صفحه وب که می‌خواهید کد HTML آن را مشاهده کنید بروید.
   
2. برای شروع حالت ویرایش، یک بار در نوار آدرس ضربه بزنید.
   
3. مکان نما را به جلوی URL حرکت دهید.
   
4. "View-source" را تایپ کنید و سپس دکمه "Go" را بزنید. کد HTML صفحه وب در کروم نمایش داده می شود.
   

استفاده از ابزارهای توسعه دهنده

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

1. روی سه نقطه در گوشه سمت راست بالای صفحه ضربه بزنید و "Settings" را انتخاب کنید.
2. به پایین اسکرول کنید و روی «پیشرفته» ضربه بزنید، سپس کلید کنار «ابزارهای برنامه‌نویس» را فعال کنید.
3. روی قسمت خالی صفحه ضربه بزنید و نگه دارید، سپس «Inspect Element» را انتخاب کنید. این یک پانل جانبی با کد HTML برای آن صفحه باز می شود.

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

هنگام استفاده از برنامه Chrome در تلفن Android خود، ممکن است بخواهید کد HTML یک صفحه وب را مشاهده کنید. اگر می‌خواهید مشکل صفحه را عیب‌یابی کنید یا می‌خواهید ببینید ساختار صفحه چگونه است، می‌تواند مفید باشد. برای مشاهده کد HTML یک صفحه وب در Chrome در تلفن Android خود، این مراحل را دنبال کنید:

1. Chrome را در اندروید خود باز کنید.
   
2. "view-source:" را تایپ کنید و سپس URL صفحه مورد نظر خود را در جایی که می خواهید کد منبع را مشاهده کنید، تایپ کنید. برای مثال، اگر می‌خواهید کد منبع www.google.com را مشاهده کنید، «view-source:www.google.com» را در نوار آدرس Chrome تایپ کنید.
   

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

نحوه مشاهده کد HTML یک صفحه وب در کروم در iPad

Chrome در برنامه iPad مشاهده کد HTML هر صفحه وب را آسان می کند. به سادگی این مراحل را دنبال کنید:

1. کروم را باز کنید و "view-source:" را تایپ کنید و سپس URL صفحه ای را که می خواهید مشاهده کنید، تایپ کنید. برای مثال، اگر می‌خواهید کد منبع www.alphr.com را مشاهده کنید، باید «view-source:www.alphr.com» را در نوار آدرس Chrome تایپ کنید.
   
2. دکمه «برو» را بزنید.
   

این باید کد منبع صفحه را در یک برگه جدید در Chrome بارگیری کند. از آنجا می توانید کد را در صورت نیاز ذخیره یا به اشتراک بگذارید.

کد منبع چسبی است که صفحات را با هم نگه می دارد

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

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

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

آیا سعی کرده اید کد HTML هر صفحه وب را با استفاده از هر یک از روش های مورد بحث در این آموزش مشاهده کنید؟ چطور گذشت؟

در قسمت نظرات به ما اطلاع دهید.