برای مدت طولانی، گزینه "نمایش کد منبع صفحه" برای من بی فایده و غیر جالب بود. تا کنون، یادگیری HTML در Codecademy و ساختن سایت های خودم به سرگرمی جدید من تبدیل نشده است. در اینجا این سؤال مطرح شد: کجا می توان موارد واقعی را پیدا کرد و راه حل های جالبی را برای "قلک" خود وام گرفت؟ پاسخ به طرز شگفت آوری ساده بود، مانند همه نابغه ها: کد منبع صفحه را در Google Chrome مشاهده کنید! یافته های متواضعانه ام را با شما به اشتراک می گذارم.
کد منبع صفحه چیست؟
اگر شما نیز مانند من اولین قدم های خود را در برنامه نویسی HTML برداشته اید، دانستن اینکه کد منبع یک صفحه چیست، اضافی نخواهد بود.
کد منبع که به عنوان کد HTML صفحه نیز شناخته می‌شود، متنی به زبان نشانه‌گذاری فرامتن (HTML) است. این شامل محتوای واقعی صفحه (متن، جداول) و برچسب ها است. دومی نقش دستورالعمل‌های مرورگر را بازی می‌کند: نحوه نمایش محتوا، نوع قالب‌بندی، محل قرار دادن لینک یا فایل رسانه. خوب، برای ما، برنامه نویسان تازه کار، کد منبع بهترین زمینه آموزشی است: ما یک سایت جالب پیدا می کنیم و نگاه می کنیم، ذخیره می کنیم، و از قطعات موفق استفاده می کنیم. چگونه؟
نحوه مشاهده کد منبع در صفحه مرورگر گوگل کروم
صفحه ای را که دوست دارید پیدا کنید. مثلا من به طراحی منوی سایت علاقه داشتم. سه راه برای باز کردن کد منبع در مرورگر گوگل کروم وجود دارد:
- روی نماد کلیک کنید منودر گوشه سمت راست بالای مرورگر و "ابزارهای بیشتر" را انتخاب کنید. در میان سایر موارد، گزینه ای برای "مشاهده کد منبع" وجود دارد. صادقانه بگویم، من به ندرت از این روش استفاده می کنم: بسیاری از حرکات غیر ضروری. می توان آن را حتی آسان تر کرد.
- کلید ترکیبی را فشار دهید Ctrl+U- یک پنجره جدید با کد منبع باز می شود.
- برای طرفداران منوی زمینه: روی صفحه کلیک راست کرده و گزینه "View Page Code" را انتخاب کنید.
ما با وظیفه مشاهده کد HTML صفحه در مرورگر کنار آمدیم. ما به جالب ترین مرحله عبور می کنیم.
نحوه ویرایش و ذخیره کد منبع
برای یادگیری نحوه ایجاد وب سایت، خواندن کد HTML شخص دیگری کافی نیست. شما باید با آن بازی کنید، آزمایش کنید، تغییراتی ایجاد کنید و نتیجه را بررسی کنید. حتی می توانید با جمع آوری چند نمونه موفق شروع کنید. چگونه کد منبع را ویرایش و ذخیره کنیم؟
گزینه 1. "دستی"
پس از اینکه کد منبع صفحه را باز کردیم، منوی زمینه را فراخوانی کرده و گزینه "Save As" را انتخاب کرده و فایل را در هارد دیسک ذخیره می کنیم. فایل را در Notepad یا Notepad ویرایش می کنیم، تغییرات را ذخیره می کنیم و از طریق مرورگر باز می کنیم. نتایج تغییرات ما (موفق و نه چندان خوب) در پنجره مرورگر منعکس خواهد شد.
گزینه 2. برای حرفه ای ها
وقتی هر روز با کد منبع "بازی" می کنید، فرآیند "ذخیره - باز کردن - تغییر - ذخیره - بررسی" خسته کننده است. برای خودم راه حلی در قالب نصب یک افزونه برای Google Chrome - Firebug Lite پیدا کردم. این به شما امکان می دهد بدون خروج از پنجره مرورگر خود کد منبع را ویرایش و ذخیره کنید.
لازم است به سرعت همه تغییرات را در خود سایت مشاهده کنید، بدون اینکه بر روی فایل ها و کدهای سایت ارسال شده در اینترنت تأثیر بگذارد. به عنوان مثال، طرح رنگ یک بلوک را تغییر دهید، یک عنصر جابجا شده را جابجا کنید و غیره.
برای انجام این کار، بسیاری از وب مسترها از سرورهای محلی Denwer یا OpenServer استفاده می کنند و یک نسخه کامل از سایت را روی رایانه خود اجرا می کنند. این روش جهانی و مناسب برای افراد حرفه ای است، با آن می توانید عملکرد اسکریپت ها و پلاگین های مختلف را بررسی کنید، تغییر طرح را آزمایش کنید و تمامی فایل های سایت را ویرایش کنید و پس از تست تغییرات مناسب را مستقیماً به سایت منتقل کنید.
برای کاربرانی که از هنر وب مستر دور هستند، استفاده از مرورگر را برای این اهداف توصیه می کنم. از آنجایی که من از کروم استفاده می کنم، دستورالعمل هایی با اسکرین شات برای این مرورگر خاص ارائه خواهم کرد. بر اساس قیاس، می توانید با مرورگرهای Opera، Yandex.Browser، Mozilla Firefox و سایر مرورگرها کار کنید، اصل ابزارهای آنها مشابه است.
آموزش 1: نحوه مشاهده کل کد HTML سایت در مرورگر
صفحه وب مورد نیاز سایت خود را باز کنید. ما روی عنصر مورد نیاز راست کلیک می کنیم، یک منوی کشویی زمینه مرورگر با دستورات موجود ظاهر می شود:
شکل 1. مشاهده کل کد HTML یک صفحه وب در مرورگر کروم
مهم:دستورات در منوی کشویی ممکن است متفاوت باشد، به عنوان مثال، برای عناصر فعال (پیوندها، تصاویر، ویدیوها) و عناصر غیر فعال (متن، پس زمینه، divs):
شکل 2. منوی کشویی مرورگر کروم
بنابراین، اگر دستور مورد نیاز را پیدا نکردید، فقط در جای دیگری راست کلیک کنید یا از کلیدهای میانبر مرورگر استفاده کنید.
با بازگشت به شکل 1، دستور لازم برای مشاهده کل کد HTML صفحه اصلی وب را نشان می دهد، به نام " مشاهده کد صفحه". ما روی دستور کلیک می کنیم، یک برگه جدید با کد کامل صفحه اصلی وب باز می شود، یک امتیاز بزرگ برای همه چیز - این نما با برجسته کردن نحو در دسترس است:
شکل 3. قطعه کد برای این سایت
این ابزار برای یافتن و ویرایش عناصر مورد نظر شما بسیار مفید است.
روش های جایگزین برای مشاهده تمام HTML یک صفحه وب
برای دسترسی سریعتر می توانید از راه های دیگری برای فراخوانی این ابزار استفاده کنید
- در شکل 1 نیز مشاهده می کنیم که این دستور از طریق میانبر صفحه کلید در دسترس است. + ;
- در نوار آدرس مرورگر view-source قرار دهید: سایت به جای دامنه من، آدرس خود را بچسبانید.
هر دو روش جهانی هستند و باید در همه مرورگرها کار کنند.
در ابتدا ممکن است برای برخی به نظر برسد که این به هیچ وجه ابزار ضروری نیست، اما مشاهده کل کد HTML سایت برای یافتن عناصر ضروری در کد عالی است، اینها می توانند پیوندها، تگ ها، متا تگ ها، ویژگی ها و عناصر دیگر
ترکیب کلید داغ +کادر جستجو را باز کنید، در مرورگر کروم در بالا سمت راست ظاهر می شود:
شکل 3. جستجو بر اساس کد سایت
پس از ارسال درخواست به فرم جستجو، صفحه به اولین عنصر یافت شده منتقل می شود، با استفاده از فلش ها می توانید بین آنها حرکت کنید و مورد نیاز خود را انتخاب کنید:
شکل 4. جستجو بر اساس کد HTML وب سایت
دستورالعمل 2: نحوه مشاهده و ویرایش کد HTML و CSS وب سایت در مرورگر Google Chrome
اکنون مهمترین بخش، که در آن نشان می دهم چگونه می توانید کد HTML و CSS سایت را در مرورگر ویرایش کنید. سپس تغییرات را به مرورگر منتقل کنید.
در اینجا چنین ابزار مفیدی همیشه در مرورگر شما موجود است، با دستورات دیگری آزمایش کنید که ویرایش سایت را برای شما آسان تر می کند.
اگر هر صفحه وب را باز کنید، حاوی عناصر معمولی است که بسته به نوع و جهت سایت تغییر نمی کند. مثال 4-1 کد یک سند ساده حاوی تگ های اساسی را نشان می دهد.
مثال 4.1. کد منبع صفحه وب
نمونه صفحه وب
سرتیتر
پراگراف اول.
پاراگراف دوم.
محتویات این مثال را کپی کرده و در پوشه c:\www\ به عنوان example41.html ذخیره کنید. پس از آن، مرورگر را راه اندازی کنید و فایل را از طریق آیتم منو باز کنید File > Open File (Ctrl+O). در گفتگوی انتخاب سند، فایل example41.html را مشخص کنید. صفحه وب نشان داده شده در شکل. 4.1.
برنج. 4.1. نتیجه اجرای مثال
عنصربرای نشان دادن نوع سند فعلی - DTD (تعریف نوع سند، شرح نوع سند) در نظر گرفته شده است. این لازم است تا مرورگر بفهمد که چگونه صفحه وب فعلی را تفسیر کند، زیرا HTML در چندین نسخه وجود دارد، علاوه بر این، XHTML (Extensible HyperText Markup Language، زبان نشانه گذاری فرامتن توسعه یافته) وجود دارد که شبیه به HTML است، اما با آن تفاوت دارد آن را در نحو برای اینکه مرورگر "گیج نشود" و بفهمد که طبق کدام استاندارد یک صفحه وب را نمایش می دهد، باید در خط اول کد تنظیم شود.
.
چندین نوع وجود دارد، بسته به نسخه HTML مورد نظر آنها متفاوت است. روی میز. 4.1. انواع اصلی اسناد با شرح آنها آورده شده است.
Tab. 4.1. DTD های معتبر | DOCTYPE |
شرح |
|---|
| HTML 4.01
|
|
|
نحو دقیق HTML |
|
|
نحو HTML انتقالی |
|
|
فریم ها در یک سند HTML استفاده می شوند. |
| HTML 5
|
|
|
این نسخه از HTML تنها یک نوع doctype دارد. |
| XHTML 1.0
|
|
|
نحو دقیق XHTML. |
|
|
نحو XHTML انتقالی. |
|
|
سند به زبان XHTML نوشته شده و حاوی فریم است. |
| XHTML 1.1
|
|
|
توسعه دهندگان XHTML 1.1 انتظار دارند که به تدریج جایگزین HTML شود. همانطور که می بینید، این تعریف به انواع تقسیم نمی شود، زیرا نحو یکسان است و از قوانین واضح پیروی می کند. |
تفاوت بین توضیحات دقیق و انتقالی، رویکرد متفاوت نوشتن کد سند است. HTML دقیق مستلزم رعایت دقیق مشخصات HTML است و اشتباهات را نمی بخشد. HTML انتقالی در مورد برخی از ایرادات کد "آرام تر" است، بنابراین این نوع در موارد خاص ترجیح داده می شود.
به عنوان مثال، HTML و XHTML سختگیرانه نیاز به تگ دارند
، اما در HTML انتقالی می توان آن را حذف کرد و مشخص نکرد. در عین حال، به یاد داشته باشید که مرورگر سند را در هر صورت نمایش می دهد، صرف نظر از اینکه با نحو مطابقت داشته باشد یا خیر. چنین اعتبارسنجی با استفاده از یک اعتبار سنجی انجام می شود و در درجه اول برای توسعه دهندگان در نظر گرفته شده است تا خطاهای یک سند را ردیابی کنند.</p>
<p>در ادامه، ما عمدتاً از سخت استفاده خواهیم کرد<!DOCTYPE>، به جز مواردی که به طور خاص ذکر شده است. این به ما امکان می دهد از اشتباهات رایج اجتناب کنیم و به ما یاد می دهد که کدهای نحوی درست بنویسیم.</p>
<p>اغلب ممکن است بدون استفاده از کدهای HTML برخورد کنید<!DOCTYPE>، صفحه وب همچنان در چنین حالتی نمایش داده می شود. با این حال، ممکن است اتفاق بیفتد که هنگام استفاده، همان سند به طور متفاوتی در مرورگر نمایش داده شود<!DOCTYPE>و بدون آن علاوه بر این، مرورگرها می توانند چنین اسنادی را به روش خود نمایش دهند، در نتیجه، صفحه "فشرده" می شود، یعنی. مطابق با نیاز توسعه دهنده به روشی کاملاً متفاوت نمایش داده می شود. برای جلوگیری از چنین موقعیت هایی، همیشه اضافه کنید<!DOCTYPE>تا ابتدای سند</p><p>برچسب بزنید <html>ابتدای فایل HTML را تعریف می کند، هدر داخل آن ذخیره می شود ( <head>) و بدنه سند ( <body>
).</p><p>عنوان سند، به عنوان بلوک نیز نامیده می شود <head>، ممکن است حاوی متن و برچسب باشد، اما محتوای این بخش به جز ظرف، مستقیماً در صفحه نمایش داده نمی شود. <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>برچسب بزنید <meta>جهانی است و یک کلاس کامل از ویژگی ها را اضافه می کند، به ویژه، با کمک تگ های متا، همانطور که این تگ به طور کلی نامیده می شود، می توانید کدگذاری صفحه را تغییر دهید، کلمات کلیدی، توضیحات سند و موارد دیگر را اضافه کنید. به طوری که مرورگر متوجه می شود که با رمزگذاری UTF-8 (فرمت تبدیل یونیکد، فرمت تبدیل یونیکد) سروکار دارد و این خط اضافه می شود.</p><p>
<title>نمونه صفحه وب
برچسب بزنید
عنوان یک صفحه وب را تعریف می کند، این یکی از عناصر مهمی است که برای حل بسیاری از مشکلات طراحی شده است. در سیستم عامل ویندوز، متن عنوان در گوشه سمت چپ بالای پنجره مرورگر نمایش داده می شود (شکل 4.2).</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>برنج. 4.2. نمای هدر در مرورگر</p>
<p>برچسب بزنید <title>اجباری است و باید در کد سند موجود باشد.</p><p>حتماً یک تگ پایانی اضافه کنید</head>برای نشان دادن کامل بودن بلوک عنوان سند.</p><p>بدنه سند <body>برای قرار دادن برچسب ها و محتوای صفحه وب در نظر گرفته شده است.</p><p>
<h1>سرتیتر</h1>
</p><p>HTML شش سطح مختلف از عناوین متن را ارائه می دهد که نشان دهنده اهمیت نسبی بخش بعد از عنوان است. بله تگ کنید <h1>مهمترین عنوان سطح اول و تگ را نشان می دهد <h6>برای تعیین سرفصل سطح ششم کاربرد دارد و کمترین اهمیت را دارد. به طور پیش فرض، عنوان سطح اول با بزرگترین فونت پررنگ نمایش داده می شود، عنوان سطح بعدی کوچکتر است. برچسب ها <h1>...<h6>عناصر سطح بلوک هستند، همیشه از یک خط جدید شروع می شوند و بعد از آنها عناصر دیگر در خط بعدی ظاهر می شوند. علاوه بر این، یک فضای خالی قبل و بعد از عنوان اضافه می شود.</p><p>
<!-- Комментарий -->
</p><p>برخی از متن ها را می توان با گذاشتن نظر در مرورگر از نمایش آن پنهان کرد. اگرچه کاربر چنین متنی را نمی بیند، اما همچنان در سند منتقل می شود، بنابراین نگاه کردن به کد منبع می تواند یادداشت های پنهان را آشکار کند.</p>
<p>بنابراین، امروز ما به چندین ابزار مفید برای جادوگر وب نگاه خواهیم کرد که زندگی را هنگام طراحی سایت آسان‌تر می‌کنند. بیایید با کنسول وب مستر در گوگل کروم شروع کنیم. و بیایید به سوالاتی بپردازیم که اغلب از مدیر وب سایت در طول طرح بندی سایت ایجاد می شود.</p>
<p>برای دسترسی به کنسول، سایت خود را در Google Chrome باز کنید، در هر نقطه از صفحه وب کلیک راست کنید، و از منوی کشویی زمینه، مشاهده کد صفحه را انتخاب کنید، یا روی یک عنصر خاص برای کاوش با انتخاب عنصر View Code را انتخاب کنید.</p>
<p>در بالا چندین برگه فهرست شده خواهید داشت. امروز در مورد تب "Elements" صحبت خواهیم کرد <b>,
</b>که عناصر یک صفحه وب را با برجسته کردن تگ ها، ویژگی ها، برجسته سازی تودرتو عناصر، نشان دهنده سلسله مراتب عنصر در درخت DOM (اشاره در پایین، از والد ریشه تا مورد فعلی مورد بررسی)، قابلیت ویرایش را ارائه می دهد. عناصر، لیستی از خواص آنها، جستجو بر اساس عناصر را در نظر بگیرید و همچنین بیایید با مشاهده سبک های css مرتبط با عناصر و غیره آشنا شویم.</p>
<h3>چگونه می توان تمام سبک هایی را که با یک عنصر خاص مرتبط هستند مشاهده کرد؟ کدام یک در حال حاضر استفاده می شود؟ در چه فایل هایی هستند؟</h3>
<p>بنابراین، هیچ چیز ساده تر نیست! مرورگر گوگل کروم را باز می کنیم، سایت خود را باز می کنیم - منبع سوالات، اگر عنصر مورد نظر در زمینه صفحه قابل مشاهده است، کلیک راست کرده و مورد "نمایش کد عنصر" را در منوی زمینه انتخاب کنید.</p>
<p>در پایین، ما یک کنسول با یک برگه برجسته در سمت چپ "Elements"و تمام سبک های مرتبط با عنصر سمت راست داریم، که در آن: <b>سبک های محاسبه شده</b>- اینها سبک های کلی "خلاصه" هستند که از قوانین css و تنظیمات مرورگر کاربر (محیط او) به عنصر اختصاص داده شده اند و در همان زمان برگه جمع می شود.</p>
<p>اما ما به برگه "Styles" علاقه مندیم که در زیر آن مستقر شده است، که به نوبه خود تمام سبک های اختصاص داده شده به عنصر و همچنین فایل هایی را که در آنها این قوانین برای این عنصر توسط نوع، شناسه، کلاس، نام، ویژگی، مشخص شده است، فهرست می کند. صفت و غیره در عین حال، اگر قانون css خط خورده باشد، به این معنی است که قبلاً / بعدی دوباره تعریف شده است (که ردیابی اینکه کدام یک از قوانین css اولویت دارد و در این مورد برای عنصر اعمال می شود آسان می کند).</p>
<p>در زیر کنسول خطی وجود دارد که عنصر را در سلسله مراتب سند نشان می دهد و به راحتی به شما امکان می دهد کل لیست عناصر والد را از ریشه تا عنصر انتخاب شده مشاهده کنید. چیزی شبیه پودر سوخاری.</p>
<h3>تگ Html در زمینه صفحه قابل مشاهده نیست؟ یا باید همه تگ ها را پیدا کنید، مثلاً بر اساس کلاس، نام، ویژگی، نوع خاصی؟</h3>
<p>سایت را در Google Chrome باز کنید، کلیک راست کنید، منوی زمینه را فراخوانی کنید، انتخاب کنید <b>«
</b>مشاهده کد صفحه <b>»
</b>. کلید ترکیبی "CTRL + F" را همزمان فشار دهید، عبارت مورد نیاز خود را وارد کنید ( <b>مثلا</b><i>:
</i><i>کلاس = "</i><i>لایه گذاری"</i>) و در لیست نتایج یافت شده حرکت کنید و همزمان تمام سبک های مرتبط با عناصر مورد نظر را در سمت راست صفحه مشاهده کنید.</p>
<h3>نحوه مشاهده کد html عنصر (عناصر) بارگذاری شده به صورت پویا (به عنوان مثال: توسط Ajax)</h3>
<p>در حال انتظار برای بارگیری صفحه در Google Chrome. ما اقدامات لازم را برای کار آژاکس انجام می دهیم. ما روی داده های بارگیری شده کلیک راست می کنیم، "مشاهده کد عنصر" را در منوی زمینه انتخاب می کنیم، نتیجه را در کنسول در برگه "Elements" در سمت چپ بررسی می کنیم.</p>
<h3>تغییرات سبک css را در زمان واقعی مشاهده کنید</h3>
<p>به هر حال، در صورت لزوم، مشاهده سبک هایی که به یک عنصر در حال پرواز اختصاص داده می شود نیز راحت است، به عنوان مثال، هنگام پیمایش در گالری و سایر رویدادهای تایمر. تمام سبک های اختصاص داده شده از طریق جاوا اسکریپت در زمان واقعی در ویژگی نمایش داده می شود <b>سبک</b>عنصر انتخاب شده در پنجره تب Elements.</p>
<h3>نمای تعاملی تاثیر قوانین css در ارائه تگ های html</h3>
<p>Google Chrome یک کنسول تعاملی برای سبک های css ارائه می دهد. و این بدان معنی است که شما نه تنها می توانید ببینید کدام سبک ها بر روی عنصر اعمال می شود، بلکه نشانگر ماوس را روی یک ویژگی css حرکت دهید، آن را با یک علامت بازشو در سمت راست فعال کنید، یا با برداشتن علامت پرچم و مشاهده آن را غیرفعال کنید. نتیجه حاصل در صفحه</p>
<h3>ما ساختار ارائه عناصر html را به سرعت تغییر می دهیم (درست در مرورگر)</h3>
<p>بنابراین، ما قبلاً یاد گرفته‌ایم که چگونه ساختار یک سند وب را در Google Chrome کاوش کنیم، اکنون اجازه دهید نگاهی سریع به ویرایش عناصر در پرواز بیندازیم. ما به هر شکلی که برایمان مناسب باشد به سراغ کنسول می رویم. ما عنصر مورد نظر را در برگه "Elements" پیدا می کنیم، روی آن کلیک راست کرده و از این طریق منوی زمینه پاپ آپ را فراخوانی می کنیم:</p>
<ul><li><b>ویژگی را اضافه کنید</b>- یک ویژگی به عنصر مشخص شده اضافه می کند. به محض فعال شدن مکان نما، شروع به تنظیم ویژگی مورد نظر می کنیم. <b>مثلا</b>: بیایید name="itemImage" را بنویسیم که بلافاصله به عنصر ما اضافه می شود.</li>
<li><b>ویرایش ویژگی</b>- اگر روی یک ویژگی یک عنصر راست کلیک کنید، مورد در دسترس قرار می گیرد <b>ویرایش کنید</b><b>ویژگی های</b>. کلیک کنید، ویرایش کنید.</li>
</ul><p><b>مثال استفاده:</b>ما رمز عبور ذخیره شده در زیر ستاره در Google Chrome را فراموش کرده ایم (اگر رمز عبور در این مرورگر ذخیره شده باشد). بر روی عنصر دارای رمز عبور راست کلیک کنید، روی "View Element Code" کلیک کنید. <b>,
</b>در کنسول سمت چپ برگه <b>عناصر</b>روی ویژگی type="password" راست کلیک کنید، روی آن کلیک چپ کنید <b>ویرایش کنید</b><b>ویژگی های،</b>تغییر ویژگی <i>نوع = "</i><i>کلمه عبور"</i>بر روی <i>نوع = "</i><i>متن"</i>، و در اینجا ما از قبل همان رمز عبور را به صورت متن به جای ستاره داریم.</p>
<ul><li><b>ویرایش کنید</b><b>html</b>- روی یک عنصر در کنسول کلیک راست کنید <b>عناصر</b>، انتخاب کنید <b>ویرایش کنید</b><b>html</b>کد را به دلخواه تغییر دهید</li>
<li><b>کپی 🀄</b><b>مانند</b><b>HTML</b>- بخشی از HTML را که برای تحقیقات بیشتر نیاز داریم، مثلاً در یک دفترچه یادداشت، یا برای اهداف دیگری که باید دقیقاً همان طرح بندی را اعمال کنیم، کپی کنید. ما در زمان صرفه جویی می کنیم.</li>
<li><b>کپی 🀄</b><b>XPATH</b>- نمایش XPATH ساختار را از ریشه عنصر والد به عنصر انتخاب شده کپی می کند.</li>
<li><b>حذف</b><b>گره</b>- اگر لازم است عنصر انتخاب شده فعلی و همه فرزندان آن را از متن صفحه وب حذف کنید و نتیجه را مشاهده کنید.</li>
<li><b>کلمه</b><b>بسته بندی کردن</b>- نمای صفحه وب را در زمینه کنسول نمایش می دهد <b>عناصر</b>خواندنی تر</li>
</ul><p>در مقالات بعدی به بررسی ابزارهای وبمستر می پردازیم و به طور خاص با بقیه تب های ابزار وب مستر در <b>گوگل کروم</b>و همچنین اشکال زدایی خطاهای جاوا اسکریپت را با استفاده از مرورگرهای مختلف در نظر بگیرید</p>
<p>توسعه دهندگان مرورگر از آسایش کسانی که سایت هایی را ایجاد می کنند که در همین مرورگرها باز می شوند، یعنی مدیران وب، مراقبت کرده اند. آنها ابزارهای توسعه دهنده را به ویژگی های استاندارد اضافه کردند که با آنها می توانید به راحتی باز کنید و <b>کد منبع صفحه سایت را در مرورگر مشاهده کنید</b>: HTML، CSS، جاوا اسکریپت (JS)، داده های مفید مختلف در مورد ساختار سایت را دریافت کنید، تجزیه و تحلیل فنی آن را انجام دهید. به طور کلی، برای دیدن بسیاری از چیزهای مفید.</p>
<p>البته، این ابزارها نه تنها توسط سازندگان سایت ها برای کار، بلکه توسط کاربران عادی نیز استفاده می شود که کد منبع به شما امکان می دهد داده های مفید مختلف را مشاهده کنید.</p>
<p>از این مقاله نحوه مشاهده سورس کد صفحه سایت در مرورگر (نحوه باز کردن کدهای HTML, CSS, JavaScript سایت) را خواهید آموخت.</p>
<i>
</i>
<h2>نحوه باز کردن کد منبع صفحه در مرورگر</h2>
<p>دو راه برای باز کردن کد منبع یک صفحه وب در مرورگر وجود دارد:</p>
<ol><li>استفاده از کلیدهای داغ؛</li>
<li>از منوی زمینه باز کنید.</li>
</ol><p><b>Ctrl+U</b>- ترکیبی از کلیدهای داغ برای مشاهده کد منبع کل صفحه سایت در یک پنجره جدید جداگانه. استاندارد برای همه مرورگرها: Google Chrome، Opera، Mozilla Firefox، Yandex مرورگر، IE.</p>
<p>همچنین می توانید ابزارهای توسعه دهنده را به صورت زیر وارد کنید:</p>
<p>برای یافتن سریع کد، کلمه یا متن مورد نظر در صفحه، می توانید از ترکیب کلید میانبر جستجوی استاندارد برای همه مرورگرها استفاده کنید: Ctrl + G.</p>
<p>آموزش تصویری:</p>
<p><span class="dmruvuTBwxg"></span></p>
<h2>مشاهده کد عنصر | عنصر کاوش | عنصر را بازرسی کنید</h2>
<p>اگر به طور ناگهانی نیاز دارید که نه کل کد منبع را مشاهده کنید، بلکه فقط یک بخش جداگانه از آن، بخشی را در صفحه نمایش دهید، ابزار قبلی کار نخواهد کرد. برای این کار، عملکرد دیگری در ابزارهای توسعه دهنده وجود دارد که در ادامه به آن پرداخته خواهد شد.</p>
<p><b>نحوه مشاهده کد یک عنصر در صفحه:</b></p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>علاوه بر این، می توانید از میانبرهای صفحه کلید برای دسترسی سریع به بازرسی عناصر استفاده کنید.</p>
<p>کلیدهای داغ (دکمه):</p>
<p>گوگل کروم: Ctrl+Shift+I و Ctrl+Shift+C</p>
<p>Opera: Ctrl+Shift+I و Ctrl+Shift+C</p>
<p>موزیلا فایرفاکس: Ctrl+Shift+I و Ctrl+Shift+C</p>
<p>مرورگر Yandex: Ctrl+Shift+I و Ctrl+Shift+C</p>
<p>پس از انجام اقدامات انجام شده، کد منبع صفحه وب در همان پنجره مرورگر باز می شود:</p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-HTML-CSS-kod-sayta.png' width="100%" loading=lazy loading=lazy><p>تمام کدهای HTML در ستون بزرگ سمت چپ قرار خواهند گرفت. و سبک های CSS در سمت راست قرار دارند.</p>
<br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>مزیت این روش البته این است که کاربر امکان تغییر کد منبع، ویرایش سبک ها را دارد. یعنی می‌توانید استایل‌های سایت را ویرایش کنید و ببینید که با سبک‌های خاص چگونه به نظر می‌رسد، بدون اینکه نیازی به ایجاد تغییرات فوری در فایل‌هایی که در سرورهای میزبانی وجود دارد. برای تغییر یا افزودن کد برنامه، باید بر روی قطعه یا بخش مورد نظر دوبار کلیک کنید. بدیهی است تصحیح کد موجود در مرورگر روی سرورهای هاست انجام نخواهد شد. بنابراین در آینده در هر صورت باید این کد را کپی کرده و در فایل ها بنویسید.</p>
<p>این فیلم آموزشی جزئیات و نحوه کار با ابزارهای توسعه دهنده را نشان می دهد:</p>
<p><span class="DQMK8CuXkOg"></span></p>
<p>بنابراین فقط به صورت آنلاین، درست در مرورگر، می توانید کد منبع صفحه سایت را مشاهده کنید، اطلاعات اولیه در مورد کدهای HTML و CSS دریافت کنید، آنها را تغییر دهید و کپی کنید، بدون اینکه فایل های این سایت را در رایانه خود دانلود کنید.</p>
<p>به هر حال، کاربران بی تجربه اینترنت که کد صفحه را تغییر داده اند و انتظار ذخیره آن را دارند، ناامید خواهند شد. از این گذشته، پس از رفرش کردن صفحه، تمام تغییرات روی آن از بین خواهد رفت. این برای هک کردن سایت کافی نیست 🙂</p>
<h2>نحوه مشاهده کد منبع در تلفن اندرویدی</h2>
<p>همچنین می خواهم توجه داشته باشم که ابزارهای توسعه دهنده نه تنها در نسخه دسکتاپ مرورگرها، یعنی در رایانه ها و لپ تاپ ها در دسترس هستند. در تلفن ها و تبلت ها (اندروید، IOS) همچنین می توانید کد منبع را مشاهده کنید.</p>
<p>برای انجام این کار، پیشوند view-source را به URL صفحه بازرسی شده اضافه کنید:</p>
<p>مثلا:</p>
<p>view-source:https://website/turbo-mode-opera/</p>
<p><span class="N9JyJMmIZr8"></span></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">برترین مقالات مرتبط</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/fa/skachat-play-market-versiya-android-4-4-2-servisy-google-play-vozmozhnosti-i-osobennosti.html">
<div class="img_container"><img src="/uploads/9e5be7753d71e508a6970118b6e2f58a.jpg" border="0" alt="دانلود پلی مارکت نسخه اندروید 4" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">دانلود پلی مارکت نسخه اندروید 4</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/fa/tarif-vodafon-red-s-dlya-razgovorov-po-ukraine-i-v-rouminge-tarif-red-xs.html">
<div class="img_container"><img src="/uploads/733672c5e8037c62aed0eb0b5799078f.jpg" border="0" alt="تعرفه Vodafone red - برای تماس در داخل اوکراین و در رومینگ" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">تعرفه Vodafone red - برای تماس در داخل اوکراین و در رومینگ</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/fa/nastroika-televizora-dlya-priema-kanalov-kabelnogo.html">
<div class="img_container"><img src="/uploads/b64481e304c155801b2b15e6d090b9de.jpg" border="0" alt="نحوه راه اندازی کانال ها در تلویزیون کانال ها در تلویزیون قدیمی شیواکی ذخیره نمی شوند" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">نحوه راه اندازی کانال ها در تلویزیون کانال ها در تلویزیون قدیمی شیواکی ذخیره نمی شوند</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">دسته بندی ها:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/fa/category/programs/">برنامه ها</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/safety/">ایمنی</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/windows-10/">ویندوز 10</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/iron/">اهن</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/windows-8/">ویندوز 8</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/vkontakte/">در تماس با</a></li>
<li class=""><a href="https://bumotors.ru/fa/category/errors/">اشتباهات</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="https://vk.com/share.php?url=https://bumotors.ru/kak-vychislit-ishodnyi-kod-stranicy-kak-bystro-otkryt-kod.html" class="vk social-ico"></a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https://bumotors.ru/kak-vychislit-ishodnyi-kod-stranicy-kak-bystro-otkryt-kod.html" class="fb social-ico"></a>
<a href="https://www.twitter.com/share?url=https%3A%2F%2Fbumotors.ru%2Ffa%2Fkak-vychislit-ishodnyi-kod-stranicy-kak-bystro-otkryt-kod.html" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2022 bumotors.ru. نحوه راه اندازی گوشی های هوشمند و رایانه های شخصی. پرتال اطلاعاتی</span>
</div>
</div>
</div>
</div>
</body>
</html> 