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

Ctrl+U

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

روی دکمه سمت راست ماوس در عنصر صفحه مورد نظر کلیک کنید.

گوگل کروم : "مشاهده کد عنصر"

اپرا: "بازرسی عنصر"

فایرفاکس: "آنالیز عنصر"

در مرورگرهای دیگر، به دنبال یک آیتم منوی مشابه باشید.

سلام به همه!

به خصوص در ابتدای مقاله، برای کسانی که به دنبال پاسخ سریع هستند، کل موضوع را بیان کردم.

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

در آینده قطعا کد منبع صفحات و عناصر تکی را مطالعه خواهید کرد.

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

به عنوان مثال، می خواهیم ببینیم چه کلمات کلیدی برای یک صفحه خاص استفاده می شود. به صفحه وب مورد نظر خود می رویم و Ctrl + U را فشار می دهیم. کد منبع این صفحه در یک پنجره جداگانه یا در یک تب جداگانه باز می شود. Ctrl+F را فشار دهید برای جستجوی یک قطعه کد در این حالت در کادر جستجو کلمه « کلید واژه ها".شما به طور خودکار به یک قطعه کد با این متا تگ هدایت می شوید و کلمه جستجو برجسته می شود.

بر اساس قیاس، می توانید سایر قطعه های کد را جستجو و مطالعه کنید.

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

بیایید از یک مثال عینی برای مشاهده کد عنصر استفاده کنیم. به عنوان مثال، بیایید ببینیم آیا پیوند دارای ویژگی nofollow است یا خیر. ما روی پیوند مورد علاقه خود کلیک راست می کنیم و در منوی زمینه کشویی، روی مورد کلیک چپ می کنیم. "مشاهده کد عنصر"یا مشابه (بسته به مرورگر شما). در زیر، در یک پنجره ویژه برای تجزیه و تحلیل کد، چیزی مشابه دریافت می کنیم.

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

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

برای دسترسی به کنسول، سایت خود را در Google Chrome باز کنید، در هر نقطه از صفحه وب کلیک راست کنید، و از منوی کشویی زمینه، مشاهده کد صفحه را انتخاب کنید، یا روی یک عنصر خاص برای کاوش با انتخاب عنصر View Code را انتخاب کنید.

در بالا چندین برگه فهرست شده خواهید داشت. امروز در مورد تب "Elements" صحبت خواهیم کرد , که عناصر یک صفحه وب را با برجسته کردن تگ ها، ویژگی ها، برجسته سازی تودرتو عناصر، نشان دهنده سلسله مراتب عنصر در درخت DOM (اشاره در پایین، از والد ریشه تا مورد فعلی مورد بررسی)، قابلیت ویرایش را ارائه می دهد. عناصر، لیستی از خواص آنها، جستجو بر اساس عناصر را در نظر بگیرید و همچنین بیایید با مشاهده سبک های css مرتبط با عناصر و غیره آشنا شویم.

چگونه می توان تمام سبک هایی را که با یک عنصر خاص مرتبط هستند مشاهده کرد؟ کدام یک در حال حاضر استفاده می شود؟ در چه فایل هایی هستند؟

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

در پایین، ما یک کنسول با یک برگه برجسته در سمت چپ "Elements"و تمام سبک های مرتبط با عنصر سمت راست داریم، که در آن: سبک های محاسبه شده- اینها سبک های کلی "خلاصه" هستند که از قوانین css و تنظیمات مرورگر کاربر (محیط او) به عنصر اختصاص داده شده اند و در همان زمان برگه جمع می شود.

اما ما به برگه "Styles" علاقه مندیم که در زیر آن مستقر شده است، که به نوبه خود تمام سبک های اختصاص داده شده به عنصر و همچنین فایل هایی را که در آنها این قوانین برای این عنصر توسط نوع، شناسه، کلاس، نام، ویژگی، مشخص شده است، فهرست می کند. صفت و غیره در عین حال، اگر قانون css خط خورده باشد، به این معنی است که قبلاً / بعدی دوباره تعریف شده است (که ردیابی اینکه کدام یک از قوانین css اولویت دارد و در این مورد برای عنصر اعمال می شود آسان می کند).

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

تگ Html در زمینه صفحه قابل مشاهده نیست؟ یا باید همه تگ ها را پیدا کنید، مثلاً بر اساس کلاس، نام، ویژگی، نوع خاصی؟

سایت را در Google Chrome باز کنید، کلیک راست کنید، منوی زمینه را فراخوانی کنید، انتخاب کنید « مشاهده کد صفحه » . کلید ترکیبی "CTRL + F" را همزمان فشار دهید، عبارت مورد نیاز خود را وارد کنید ( مثلا: کلاس = "لایه گذاری") و در لیست نتایج یافت شده حرکت کنید و همزمان تمام سبک های مرتبط با عناصر مورد نظر را در سمت راست صفحه مشاهده کنید.

نحوه مشاهده کد html عنصر (عناصر) بارگذاری شده به صورت پویا (به عنوان مثال: توسط Ajax)

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

تغییرات سبک css را در زمان واقعی مشاهده کنید

به هر حال، در صورت لزوم، مشاهده سبک هایی که به یک عنصر در حال پرواز اختصاص داده می شود نیز راحت است، به عنوان مثال، هنگام پیمایش در گالری و سایر رویدادهای تایمر. تمام سبک های اختصاص داده شده از طریق جاوا اسکریپت در زمان واقعی در ویژگی نمایش داده می شود سبکعنصر انتخاب شده در پنجره تب Elements.

نمای تعاملی تاثیر قوانین css در ارائه تگ های html

Google Chrome یک کنسول تعاملی برای سبک های css ارائه می دهد. و این بدان معنی است که شما نه تنها می توانید ببینید کدام سبک ها بر روی عنصر اعمال می شود، بلکه نشانگر ماوس را روی یک ویژگی css حرکت دهید، آن را با یک علامت بازشو در سمت راست فعال کنید، یا با برداشتن علامت پرچم و مشاهده آن را غیرفعال کنید. نتیجه حاصل در صفحه

ما ساختار ارائه عناصر html را به سرعت تغییر می دهیم (درست در مرورگر)

بنابراین، ما قبلاً یاد گرفته‌ایم که چگونه ساختار یک سند وب را در Google Chrome کاوش کنیم، اکنون اجازه دهید نگاهی سریع به ویرایش عناصر در پرواز بیندازیم. ما به هر شکلی که برایمان مناسب باشد به سراغ کنسول می رویم. ما عنصر مورد نظر را در برگه "Elements" پیدا می کنیم، روی آن کلیک راست کرده و از این طریق منوی زمینه پاپ آپ را فراخوانی می کنیم:

• ویژگی را اضافه کنید- یک ویژگی به عنصر مشخص شده اضافه می کند. به محض فعال شدن مکان نما، شروع به تنظیم ویژگی مورد نظر می کنیم. مثلا: بیایید name="itemImage" را بنویسیم که بلافاصله به عنصر ما اضافه می شود.
• ویرایش ویژگی- اگر روی یک ویژگی یک عنصر راست کلیک کنید، مورد در دسترس قرار می گیرد ویرایش کنیدویژگی های. کلیک کنید، ویرایش کنید.

مثال استفاده:ما رمز عبور ذخیره شده در زیر ستاره در Google Chrome را فراموش کرده ایم (اگر رمز عبور در این مرورگر ذخیره شده باشد). بر روی عنصر دارای رمز عبور راست کلیک کنید، روی "View Element Code" کلیک کنید. , در کنسول سمت چپ برگه عناصرروی ویژگی type="password" راست کلیک کنید، روی آن کلیک چپ کنید ویرایش کنیدویژگی های،تغییر ویژگی نوع = "کلمه عبور"بر نوع = "متن"، و در اینجا ما از قبل همان رمز عبور را به صورت متن به جای ستاره داریم.

• ویرایش کنیدhtml- روی یک عنصر در کنسول کلیک راست کنید عناصر، انتخاب کنید ویرایش کنیدhtmlکد را به دلخواه تغییر دهید
• کپی 🀄مانندHTML- بخشی از HTML را که برای تحقیقات بیشتر نیاز داریم، مثلاً در یک دفترچه یادداشت، یا برای اهداف دیگری که باید دقیقاً همان طرح بندی را اعمال کنیم، کپی کنید. ما در زمان صرفه جویی می کنیم.
• کپی 🀄XPATH- نمایش XPATH ساختار را از ریشه عنصر والد به عنصر انتخاب شده کپی می کند.
• حذفگره- اگر لازم است عنصر انتخاب شده فعلی و همه فرزندان آن را از متن صفحه وب حذف کنید و نتیجه را مشاهده کنید.
• کلمهبسته بندی کردن- نمای صفحه وب را در زمینه کنسول نمایش می دهد عناصرخواندنی تر

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

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

دستورالعمل

1. در مرورگر Mozilla FireFox، بخش "View" را از منو باز کنید و روی "Initial" کلیک کنید. کد صفحات". همین مورد در منوی زمینه نیز وجود دارد که با کلیک راست روی متن ظاهر می شود صفحات. میانبر صفحه کلید CTRL + U نیز مجاز است. Mozilla FireFox از برنامه های خارجی استفاده نمی کند - ابتدا کد صفحاتبا برجسته کردن نحو در یک پنجره مرورگر جداگانه باز می شود.

2. در اینترنت اکسپلورر، روی منوی File کلیک کرده و Edit in Notepad را انتخاب کنید. به جای نام Notepad، برنامه دیگری را می توان نوشت که در تنظیمات مرورگر خود برای مشاهده اولیه تعیین کرده اید. کدآ. روی کلیک کنید صفحاتبا دکمه سمت راست ماوس، یک منوی زمینه ظاهر می شود، که همچنین دارای یک آیتم است که به شما امکان می دهد موارد اولیه را باز کنید. کد صفحاتدر یک برنامه خارجی - "مشاهده HTML- کدآ".

3. در مرورگر اپرا، منو را باز کنید، به بخش "صفحه" بروید و احتمالاً مورد "شروع" را در زیربخش "ابزارهای توسعه" ترجیح می دهید. کد” یا مورد ” اولیه کدقاب". کلیدهای میانبر CTRL+U و CTRL+SHIFT+U به ترتیب به این انتخاب اختصاص داده شده اند. در منوی زمینه متصل به کلیک کنید صفحاتکلیک راست کنید، همچنین مورد "Initial کد". منبع باز اپرا صفحاتدر یک برنامه خارجی که در سیستم عامل یا در تنظیمات مرورگر برای ویرایش فایل های HTML اختصاص داده شده است.

4. مرورگر گوگل کروم بدون شک بهترین سازماندهی را برای مرور اولیه دارد کدآ. با کلیک راست روی یک صفحه، ممکن است View را ترجیح دهید کدآ صفحاتو سپس کد منبع با برجسته سازی نحو در یک تب جداگانه باز می شود. یا می توانید در همان منو خط "مشاهده" را ترجیح دهید کدیک عنصر" و مرورگر در همان تب دو فریم اضافی را باز می کند که در آنها می توانید HTML و CSS را بررسی کنید - کدهر عنصر صفحات. مرورگر به حرکت مکان نما در خطوط پاسخ می دهد کدو برجسته کردن عناصر موجود در صفحه مربوط به این بخش از HTML- کدآ.

5. در مرورگر Apple Safari، بخش "View" را گسترش دهید و خط "View HTML" را انتخاب کنید کدآ". در منوی که با کلیک راست روی باز کردن ظاهر می شود صفحات، مورد مربوطه با عنوان "مشاهده منبع" است. کلیدهای میانبر CTRL + ALT + U به این عمل اختصاص داده شده است. کددر یک پنجره مرورگر جداگانه باز می شود.

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

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

چگونه کد صفحه را مشاهده کنیم؟

برای مشاهده کد منبع یک صفحه وب سایت، باید مکان نما ماوس را روی هر قسمت از صفحه وب (به جز تصاویر و پیوندها) حرکت دهید. پس از آن، بر روی دکمه سمت راست ماوس کلیک کنید. پنجره ای با چندین گزینه در مقابل ما باز می شود (در مرورگرهای مختلف ممکن است کمی متفاوت باشند). برای مثال، در مرورگر گوگل کروم، این دستورات هستند:

• بازگشت؛
• رو به جلو؛
• بارگذاری مجدد؛
• ذخیره به عنوان؛
• مهر؛
• ترجمه به روسی؛
• نمایش کد صفحه;
• مشاهده کد

باید روی آن کلیک کنیم نمایش کد صفحهو کد html صفحه سایت مقابل ما باز می شود.

مشاهده کد صفحه: به دنبال چه چیزی باشیم؟

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

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

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

مثلا:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

سبک های فونت CSS صفحه را مشاهده خواهیم کرد. در این حالت از فونت استفاده می شود. این را می توان در اینجا مشاهده کرد - font-family: "Source Sans Pro".

این سایت با استفاده از افزونه Yoast SEO بهینه شده است. این را می توان از این بخش نظری کد مشاهده کرد:

این سایت با افزونه Yoast SEO v3.4.2 بهینه شده است — https://yoast.com/wordpress/plugins/seo/

تمام اطلاعات داخل تگ بدنه توسط مرورگر بر روی صفحه نمایشگر نمایش داده می شود. در اینجا کد html صفحه را می بینیم و در پایین آن کد اسکریپت Yandex Metrics قرار دارد. این در یک برچسب نظر داده شده با متن پیچیده شده است:

/Yandex.Metrika counter

جمع بندی

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

• CMS WordPress;
• فونت گوگل Source Sans Pro;
• قالب وردپرس - سیدنی;
• پلاگین های Yoast
• مقابله با معیارهای Yandex.

اکنون اصل تجزیه و تحلیل کدهای html یک صفحه سایت کاملاً مشخص است. لزومی ندارد که صفحه مورد بررسی در مرورگر باز بماند. با استفاده از کلیدهای ترکیبی ctrl+a، ctrl+c، ctrl+v می‌توانید کد صفحه را در رایانه خود ذخیره کنید. آن را در هر ویرایشگر متنی (ترجیحاً Notepad++) قرار دهید و با پسوند html ذخیره کنید. بنابراین، در هر زمان می توانید آن را عمیق تر مطالعه کنید و اطلاعات مفیدتری برای خود بیابید.

برای مدت طولانی، گزینه "نمایش کد منبع صفحه" برای من بی فایده و غیر جالب بود. تا کنون، یادگیری HTML در Codecademy و ساختن سایت های خودم به سرگرمی جدید من تبدیل نشده است. در اینجا این سؤال مطرح شد: کجا می توان موارد واقعی را پیدا کرد و راه حل های جالبی را برای "قلک" خود وام گرفت؟ پاسخ به طرز شگفت آوری ساده بود، مانند همه نابغه ها: کد منبع صفحه را در Google Chrome مشاهده کنید! یافته های متواضعانه ام را با شما به اشتراک می گذارم.

کد منبع صفحه چیست؟

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

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

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

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

1. روی نماد کلیک کنید منودر گوشه سمت راست بالای مرورگر و "ابزارهای بیشتر" را انتخاب کنید. در میان سایر موارد، گزینه ای برای "مشاهده کد منبع" وجود دارد. صادقانه بگویم، من به ندرت از این روش استفاده می کنم: بسیاری از حرکات غیر ضروری. می توان آن را حتی آسان تر کرد.
2. کلید ترکیبی را فشار دهید Ctrl+U- یک پنجره جدید با کد منبع باز می شود.
3. برای طرفداران منوی زمینه: روی صفحه کلیک راست کرده و گزینه "View Page Code" را انتخاب کنید.

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

نحوه ویرایش و ذخیره کد منبع

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

گزینه 1. "دستی"

پس از اینکه کد منبع صفحه را باز کردیم، منوی زمینه را فراخوانی کرده و گزینه "Save As" را انتخاب کرده و فایل را در هارد دیسک ذخیره می کنیم. فایل را در Notepad یا Notepad ویرایش می کنیم، تغییرات را ذخیره می کنیم و از طریق مرورگر باز می کنیم. نتایج تغییرات ما (موفق و نه چندان خوب) در پنجره مرورگر منعکس خواهد شد.

گزینه 2. برای حرفه ای ها

وقتی هر روز با کد منبع "بازی" می کنید، فرآیند "ذخیره - باز کردن - تغییر - ذخیره - بررسی" خسته کننده است. برای خودم راه حلی در قالب نصب یک افزونه برای Google Chrome - Firebug Lite پیدا کردم. این به شما امکان می دهد بدون خروج از پنجره مرورگر خود کد منبع را ویرایش و ذخیره کنید.