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

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

ترکیبی از کلیدهای داغ + جعبه جستجو را باز کنید، در مرورگر Chrome آن را در سمت راست ظاهر می شود:

شکل 3. سایت جستجو کد

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

شکل 4. جستجو بر اساس کد سایت HTML

دستورالعمل 2: نحوه مشاهده و ویرایش کد سایت HTML و CSS در Google Chrome مرورگر

در حال حاضر sameya بخش مهمیدر آن من نشان خواهم داد که چگونه می توانید کد سایت HTML و CSS را در مرورگر ویرایش کنید. پس از انتقال انتقال به مرورگر.

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

" همان مورد در منوی زمینهکه اگر متن راست کلیک کنید صفحات. شما می توانید ترکیبی را استفاده کنید کلید Ctrl + U. موزیلا فایرفاکس. از برنامه های خارجی استفاده نمی کند - اصلی کد صفحات برجسته نحو در یک پنجره مرورگر جداگانه باز خواهد شد.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مشاهده تعاملی از نفوذ قوانین CSS بر روی نمایش تگ HTML

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

ساختار ارسال عناصر HTML از RAID را تغییر دهید (راست در مرورگر)

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

• اضافه کردن ویژگی - یک ویژگی برای مورد مشخص شده اضافه می کند. به محض این که مکان نما فعال شود، شروع به مشخص کردن اموال مورد نظر کنید. مثلا: نوشتن نام \u003d "ItemImage"، که بلافاصله به عنصر ما اضافه می شود.
• ویرایش ویژگی - اگر شما بر روی ویژگی راست کلیک کلیک کنید به مورد، آن را در دسترس می شود ویرایشصفت.. کلیک کنید، ویرایش کنید.

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

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

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

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

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

نحوه مشاهده کد منبع صفحات HTML در مرورگر از Google

آنچه شما می توانید کد صفحه را در Chrome ببینید باید به سایت شما علاقه مند شوید و اقدامات زیر را انجام دهید:

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

تفاوت بین کد صفحه و فقط دستور «View Code» چیست؟

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

اما توضیح دادن برای کاربر معمولی می توانید این توابع را برای اهداف زیر تقسیم کنید:

1. "مشاهده کد صفحه" فقط لازم است که ترکیبی اصلی صفحه را ببینید. اساسا، این ساختار سایت (بدون مدل های اضافی در قالب فایل های CSS و سایر افزونه هایی است که در پوشه Creator Site باقی مانده اند). این ساختار مناسب برای ایجاد نیست صفحه خود با کپی کردن - insert "، اما به شما این امکان را می دهد که برنامه نویس را انجام دهید و در چه دنباله ای به طوری که سایت در مرورگر Google Chrome چنین طراحی خارجی داشته باشد.
2. "مشاهده کد" یک ساختار دقیق را با تخصیص همه مناطق تحت تاثیر قرار می دهد. اگر به یک کد لیست خاصی برسید - یک مورد را در سایت که متعلق به آن است اختصاص می دهد.
3. مشاهده کد صفحه در یک مرورگر جداگانه باز می شود بدون توانایی ویرایش آن. به این ترتیب، فقط برای کپی کردن و خواندن کد سایت مناسب است. اما این یک ویژگی کمتر مفید نیست.
4. "مشاهده کد" تغییر و شما می توانید هر مورد را ویرایش کنید زیرا آن را برای شما مناسب خواهد بود. البته - این همه تغییرات "زندگی می کنند" تا زمانی که صفحه به روز می شود، اما گاهی اوقات سرگرم کننده است که از تنظیمات صعود و به سادگی درک کنید که چرا لازم است، و چه اتفاقی خواهد افتاد اگر تغییر کند. شما نباید فرض کنید که چنین اقداماتی که به خود یا سایت آسیب می رسانید - این تغییرات فقط در کد Google Chrome شما معتبر است و به صورت آنلاین نمی رود.

سوال در مورد چگونگی دیدن کد عنصر را در نظر بگیرید

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

عملکرد کد عنصر بسیار گسترده است، بنابراین ما یکی از کلمات را در سایت مرورگر Google Chrome می گیریم. ما آرزو داشتیم که چه چیزی را در نظر بگیریم کلید واژه ها (در کد، آن را به عنوان "کلمات کلیدی" ثبت شده) برای سایت ما مورد استفاده قرار گرفت. برای انجام این کار، الگوریتم زیر را انجام دهید:

راه های دیگر برای استفاده از این عملکرد در مرورگر Google Chrome

به طور کلی، ادامه دادن به سوال در مورد چگونگی دیدن کد مورد و چرا مورد نیاز، باید به توابع آن منتقل شود. یعنی به لطف توانایی دیدن کد عنصر هر سایت در مرورگر Google Chrome، ما می توانیم:

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

این یک لیست محدود نیست اما باید یادآوری شود که بدون دانش خاص - "خواندن" کد صفحات Google کروم تقریبا غیرممکن است و داده های حاصل عملا توسط کاربر معمولی مورد نیاز نیست.

مورد "مشاهده کد مورد" کار نمی کند

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

• نمایه کاربر آسیب دیده است
• حضور نرم افزارهای مخرب بر روی کامپیوتر؛
• مسدود کردن با یک فرمت خاص برای افزایش بهره وری (حتی ممکن است).

مشخصات کاربر آسیب دیده را اصلاح کنید

خلق كردن مشخصات جدیدشما باید یکی از قدیمی ها را از رایانه خود حذف کنید. برای انجام این کار، موارد زیر را انجام دهید:

1. بستن گوگل کروم و راه اندازی داخلی ویندوز مرورگر اکسپلورر
2. ما دستور زیر را به نوار آدرس وارد می کنیم:٪ localAppdata٪ \\ Google \\ Chrome \\ داده های کاربر \\.
3. هنگامی که دایرکتوری باز می شود، ما به دنبال پوشه "پیش فرض" هستیم و به نام آن «پشتیبان گیری» اضافه می کنیم تا موارد زیر عبارتند از: "پیش فرض پشتیبان".
4. در حال حاضر پس از راه اندازی جدید مرورگر Chrome، یک نمایه جدید ایجاد خواهد شد.

نرم افزار مخرب یا بقایای آن را حذف کنید

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

1. باز کن خط فرمان ویندوز ("اجرا") و دستور "CMD" را وارد کنید.
2. دستور زیر را در خط وارد کنید: RD / S / Q "٪ Windir٪ \\ System32 \\ GroupPolicyusers".
3. پس از تأیید این اقدام، این را رانندگی کنید: RD / S / Q "٪ Windir٪ \\ System32 \\ GroupPolicy".
4. در حال حاضر "GPUPDATE / FORCE" (بدون کوزه).

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