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

ثبت نام کنید و روزانه 1000 دلار کسب کنید ⋙

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

بهینه سازی URL

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Sign up and earn $1000 a day ⋙

نحوه رفع خطای عدم نصب نرم افزار در ویندوز

نحوه رفع خطای عدم نصب نرم افزار در ویندوز

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

دستورالعمل حذف یا تغییر پین در ویندوز 11

دستورالعمل حذف یا تغییر پین در ویندوز 11

دستورالعمل حذف یا تغییر پین کد در ویندوز 11، در ویندوز 11، پین کد یک ابزار امنیتی بسیار مفید و راحت برای کاربران است. با این حال برخی از مردم

چگونه خطای There are No Power Options Available در ویندوز 10 را برطرف کنیم

چگونه خطای There are No Power Options Available در ویندوز 10 را برطرف کنیم

چگونه خطای There are Currently No Power Options Available در ویندوز 10 را برطرف کنیم، در ویندوز 10 حالت پاور را نمی توان انتخاب کرد، چه کاری باید انجام دهم؟ در اینجا نحوه رفع خطا آورده شده است

ساده ترین راه برای رفع خطاهای برنامه Photos در ویندوز 10

ساده ترین راه برای رفع خطاهای برنامه Photos در ویندوز 10

ساده ترین راه برای رفع خطاهای برنامه Photos در ویندوز 10، اگر Microsoft Photos کار نمی کند، چه کاری باید انجام دهم؟ نگران راه های رفع خطاهای برنامه Photos در ویندوز نباشید

دستورالعمل نصب میانبرهای صفحه کلید برای تغییر زبان های ورودی در ویندوز 11

دستورالعمل نصب میانبرهای صفحه کلید برای تغییر زبان های ورودی در ویندوز 11

دستورالعمل های نصب میانبرها برای تغییر زبان های ورودی در ویندوز 11. در طول فرآیند استفاده از ویندوز، کاربران اغلب باید بین روش ها جابجا شوند.

نحوه بررسی وضعیت برق پشتیبانی شده در ویندوز 11

نحوه بررسی وضعیت برق پشتیبانی شده در ویندوز 11

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

نحوه تغییر از 2.4 گیگاهرتز به 5 گیگاهرتز در ویندوز 10

نحوه تغییر از 2.4 گیگاهرتز به 5 گیگاهرتز در ویندوز 10

نحوه تغییر از 2.4 گیگاهرتز به 5 گیگاهرتز در ویندوز 10، اگر می خواهید راهی سریع و ساده برای افزایش سرعت اینترنت پیدا کنید، تغییر باند وای فای از 2.4 گیگاهرتز به 5 گیگاهرتز ممکن است کمک کننده باشد.

نحوه رفع خطای عدم وجود حافظه کافی برای اجرای مایکروسافت اکسل در ویندوز

نحوه رفع خطای عدم وجود حافظه کافی برای اجرای مایکروسافت اکسل در ویندوز

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

راه های یافتن تمامی فایل های ویدئویی در ویندوز

راه های یافتن تمامی فایل های ویدئویی در ویندوز

راه هایی برای یافتن تمام فایل های ویدئویی در ویندوز، نمی توان فیلم های ضبط شده و ذخیره شده را در کامپیوتر پیدا کرد. در زیر راه هایی وجود دارد که به شما کمک می کند همه کلیپ ها را در ویندوز پیدا کنید.

نحوه رفع خطای 0xa00f4288 در برنامه دوربین در ویندوز 10 و 11

نحوه رفع خطای 0xa00f4288 در برنامه دوربین در ویندوز 10 و 11

نحوه رفع خطای 0xa00f4288 در برنامه دوربین در ویندوز 10 و 11. برنامه پیش فرض دوربین ویندوز ابزار اصلی برای عکس گرفتن است. بنابراین در مورد دوربین های Win 10 و 11

نحوه باز کردن چندین برنامه با یک میانبر در ویندوز 10

نحوه باز کردن چندین برنامه با یک میانبر در ویندوز 10

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

چگونه گزینه های قدیمی منوی بوت ویندوز را حذف کنیم

چگونه گزینه های قدیمی منوی بوت ویندوز را حذف کنیم

نحوه حذف گزینه های منوی بوت قدیمی در ویندوز، بوت دوگانه ویندوز 10 مفید است اما می تواند گزینه های بوت اضافی را در منو بگذارد. در اینجا نحوه حذف منو آورده شده است

دستورالعمل رفع خطاهای Snipping Tool در ویندوز 11

دستورالعمل رفع خطاهای Snipping Tool در ویندوز 11

دستورالعمل رفع خطاهای Snipping Tool در ویندوز 11. ویندوز 11 مدتی است که به طور رسمی منتشر شده است، اما در حین استفاده هنوز خطاهای زیادی وجود دارد.

دستورالعمل برای وارد کردن متن به صورت صوتی در ویندوز 11

دستورالعمل برای وارد کردن متن به صورت صوتی در ویندوز 11

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

نحوه روشن/خاموش کردن Sticky Key در ویندوز 11

نحوه روشن/خاموش کردن Sticky Key در ویندوز 11

نحوه روشن/خاموش کردن Sticky Key در ویندوز 11، Sticky Key استفاده از صفحه کلید کامپیوتر را آسانتر می کند. در اینجا نحوه روشن و خاموش کردن Sticky Key در ویندوز 11 آورده شده است.

Windows Modules Installer چیست؟

Windows Modules Installer چیست؟

Windows Modules Installer چیست؟، Windows Modules Installer گاهی اوقات منابع سیستم زیادی را اشغال می کند. آیا Windows Modules Installer مهم است یا خیر؟

نحوه افزایش حجم در ویندوز 10

نحوه افزایش حجم در ویندوز 10

چگونه صدا را در ویندوز 10 افزایش دهیم، چگونه حجم کامپیوتر را به حداکثر سطح برسانیم؟ بیایید با WebTech360 نحوه افزایش حجم کامپیوتر ویندوز 10 را بیاموزیم

نحوه استفاده از دستیار نصب ویندوز 11 برای نصب ویندوز 11

نحوه استفاده از دستیار نصب ویندوز 11 برای نصب ویندوز 11

نحوه استفاده از Windows 11 Installation Assistant برای نصب ویندوز 11، Windows 11 Installation Assistant یکی از بهترین راه ها برای ارتقاء رایانه شما به ویندوز 11 است.

نحوه خاموش کردن صدای راه اندازی در ویندوز 11

نحوه خاموش کردن صدای راه اندازی در ویندوز 11

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

دستورالعمل تغییر زمان قفل صفحه در ویندوز 11

دستورالعمل تغییر زمان قفل صفحه در ویندوز 11

دستورالعمل تغییر زمان قفل صفحه در ویندوز 11. هنگام استفاده از ویندوز 11، مواقعی وجود دارد که کاربران باید برای مدتی کامپیوتر را ترک کنند.