توسعه دهندگان مرورگر از راحتی کسانی که سایت هایی را ایجاد می کنند که در همین مرورگرها باز می شوند، یعنی مدیران وب، مراقبت کرده اند. آنها ابزارهای توسعه دهنده را به توابع استاندارد اضافه کرده اند که با آنها به راحتی می توانید باز کنید و کد منبع صفحه سایت را در مرورگر مشاهده کنید: HTML، CSS، جاوا اسکریپت (JS)، داده های مفید مختلف در مورد ساختار سایت را دریافت کنید، تجزیه و تحلیل فنی آن را انجام دهید. به طور کلی، برای دیدن بسیاری از چیزهای مفید.
البته این ابزارها نه تنها توسط سازندگان سایت برای کار، بلکه توسط کاربران عادی نیز استفاده می شود که می توانند داده های مفید مختلف را با کد منبع مشاهده کنند.
در این مقاله نحوه مشاهده کد منبع یک صفحه سایت در مرورگر (نحوه باز کردن کدهای سایت HTML, CSS, JavaScript) را خواهید آموخت.
نحوه باز کردن کد منبع یک صفحه در مرورگر
دو راه برای باز کردن کد منبع یک صفحه وب در مرورگر وجود دارد:
- استفاده از کلیدهای داغ؛
- از منوی زمینه باز کنید.
Ctrl + U- ترکیبی از کلیدهای داغ برای مشاهده کد منبع کل صفحه سایت در یک پنجره جدید جداگانه. استاندارد برای همه مرورگرها: Google Chrome، Opera، Mozilla Firefox، Yandex مرورگر، IE.
همچنین می توانید ابزارهای توسعه دهنده را به صورت زیر وارد کنید:
به منظور یافتن سریع کد، کلمه یا متن مورد نیاز در صفحه، می توانید از استاندارد ترکیب کلید میانبر جستجو برای همه مرورگرها استفاده کنید: Ctrl + G.
آموزش تصویری:
مشاهده کد کالا | کاوش مورد | یک مورد را بررسی کنید
اگر به طور ناگهانی نیاز دارید که نه کل کد منبع را مشاهده کنید، بلکه فقط یک بخش جداگانه از آن، بخشی از صفحه را نمایش دهید، ابزار قبلی کار نخواهد کرد. برای این کار، عملکرد دیگری در ابزارهای توسعه دهنده وجود دارد که در ادامه به آن پرداخته خواهد شد.
نحوه مشاهده کد یک عنصر در صفحه:
علاوه بر این، می توانید از میانبرهای صفحه کلید برای دسترسی سریع به بازرسی عناصر استفاده کنید.
کلیدهای داغ (دکمه):
گوگل کروم: Ctrl + Shift + I و Ctrl + Shift + C
Opera: Ctrl + Shift + I و Ctrl + Shift + C
موزیلا فایرفاکس: Ctrl + Shift + I و Ctrl + Shift + C
مرورگر Yandex: Ctrl + Shift + I و Ctrl + Shift + C
پس از اقدامات انجام شده، کد منبع صفحه وب در همان پنجره مرورگر باز می شود:
تمام کدهای HTML در ستون بزرگ سمت چپ قرار خواهند گرفت. و سبک های CSS در سمت راست قرار دارند.
مزیت این روش البته این است که کاربر امکان تغییر کد منبع، ویرایش سبک ها را دارد. یعنی می‌توانید استایل‌های سایت را ویرایش کنید و ببینید که با سبک‌های خاص چگونه به نظر می‌رسد، بدون اینکه نیازی به ایجاد تغییرات فوری در فایل‌هایی که در سرورهای میزبانی وجود دارد، باشد. برای تغییر یا افزودن کد برنامه، باید بر روی قطعه یا ناحیه مورد نظر دوبار کلیک کنید. البته رفع کد مرورگر روی سرورهای میزبان اعمال نخواهد شد. بنابراین در آینده در هر صورت باید این کد را کپی کرده و در فایل ها بنویسید.
این آموزش ویدیویی جزئیات و نحوه کار با ابزارهای توسعه دهنده را به شما نشان می دهد:
دقیقاً به همین صورت، به صورت آنلاین، مستقیماً در مرورگر، می توانید کد منبع صفحه سایت را مشاهده کنید، اطلاعات اولیه در مورد کدهای HTML و CSS را دریافت کنید، آنها را تغییر دهید و کپی کنید، بدون اینکه نیازی به دانلود فایل های این سایت در رایانه خود داشته باشید.
به هر حال، کاربران بی تجربه اینترنت که کد صفحه را تغییر داده اند و انتظار ذخیره آن را دارند، ناامید خواهند شد. از این گذشته، پس از رفرش کردن صفحه، تمام تغییرات روی آن ناپدید می شوند. این برای هک کردن سایت کافی نیست 🙂
نحوه مشاهده کد منبع در گوشی اندرویدی
همچنین می خواهم توجه داشته باشم که ابزارهای توسعه دهنده نه تنها در نسخه دسکتاپ مرورگرها، یعنی در رایانه ها و لپ تاپ ها در دسترس هستند. در تلفن‌ها و تبلت‌ها (اندروید، IOS)، می‌توانید کد منبع را نیز مشاهده کنید.
برای انجام این کار، پیشوند view-source را به URL صفحه بازرسی شده اضافه کنید:
مثلا:
منبع مشاهده: https: // سایت / turbo-rezhim-opera /
1 رای
روز بخیر، خوانندگان عزیز وبلاگ من. این اتفاق می افتد که ویژگی های زیبایی را در سایت پیدا می کنید و این سوال شروع به عذاب می کند که چگونه سازنده به چنین جلوه جالبی دست یافته است.
به نظر می رسد که یافتن پاسخ بسیار ساده است. و اگر مهارت هایی دارید، می توانید تعداد زیادی از این تراشه ها را جمع آوری کنید و وب سایت منحصر به فرد خود را در مدت زمان کوتاهی ایجاد کنید.
امروز در مورد نحوه باز کردن کد یک صفحه، یک عنصر خاص صحبت خواهیم کرد و یاد خواهیم گرفت که چگونه از این مهارت به نفع خود استفاده کنید.
دانش اولیه کد
سایت من برای مبتدیان در نظر گرفته شده است و ابتدا می خواهم به طور خلاصه در مورد سایت ها و به طور کلی کدها به شما بگویم.
به منظور ترسیم یک تصویر، سپس آن را به قطعات کوچک برش دهید، کد بنویسید، به لطف آن مرورگر همه عناصر را دوباره در یک کل واحد جمع می کند. همه چیز خیلی پیچیده به نظر می رسد؟ اصلا اینطور نیست و نباید بابت آن غصه بخورید.
به این ترتیب وب سایت های با کیفیت ایجاد می شوند. اگر می خواهید - در این تجارت شرکت کنید و مطالعه کنید، هیچ تمایلی وجود ندارد - هیچ کس نمی تواند شما را مجبور کند.
فقط می توانم یک چیز را بگویم ... هیچ چیز خوشایندتر از این نیست که ببینید چگونه کلمات نامفهوم نوشته شده توسط شما به یک کل تبدیل می شوند و زنده می شوند: پیوندها کار می کنند ، دکمه ها حرکت می کنند ، تصاویر حرکت می کنند ، متن می خزد. فکر می کنم می دانم ویکتور فرانکنشتاین چه احساسی داشت.
وقتی شروع به درک زبان مخفی می کنید و می بینید که همه چیز در واقع بسیار ساده تر از آن چیزی است که در ابتدا به نظر می رسید، نمی توانید به نقاط قوت خود و توانایی های مغز ایمان نداشته باشید. این خیلی باحاله
سایت ها چگونه ساخته می شوند؟ در حالت ایده آل، ابتدا. او فقط یک نقاشی می کشد. به عنوان مثال، همانطور که در تصویر زیر نشان داده شده است. در حالی که این فقط یک تصویر است، یک عکس. هیچ پیوندی کار نمی کند، وقتی کلیک می کنید جایی نمی روید، جستجو انجام نمی شود.
طبق این تصویر به اسکرین شات زیر نگاهی بیندازید. ممکن است فکر کنید که این مجموعه ای مضحک و بسیار پیچیده از نمادها است. در واقع، همه چیز چندان دشوار نیست، الگوریتم خاصی وجود دارد.
تنها حدود 150 تگ وجود دارد و هر کدام از آنها وظیفه خاصی را بر عهده دارند: پیوند، انتقال، پررنگ، رنگ، عنوان و غیره. اگر تمایلی وجود داشته باشد و به زمان اهمیت ندهید، درک آنها چندان دشوار نیست.
با آگاهی از این ویژگی ها، تقریباً هر کاری را می توان حل کرد. در اینجا فقط راه هایی برای دستیابی به هدف وجود دارد که هر توسعه دهنده راه خود را پیدا می کند.
سازندگان با تجربه بلافاصله نحوه رسیدن به نتیجه را می بینند، در حالی که دیگران باید فکر کنند، به دنبال پاسخ در مقالات یا کد منبع رقبا باشند. آنها فقط قسمت مورد نیاز خود را از یک سایت شخص ثالث می گیرند و برای خود ویرایش می کنند. این به طور قابل توجهی روند کار را کوتاه می کند.
بعداً یک مثال خاص را به شما نشان خواهم داد.
مشاهده کد
بنابراین، اجازه دهید ابتدا به شما نشان دهم که اگر نیاز به یادگیری html شخص دیگری دارید، چگونه ادامه دهید. سپس نگاهی دقیق تر به سایر مسائل خواهیم داشت.
بهترین راه
روشی که ابتدا توضیح خواهم داد برای مبتدیان کمی دشوار است، اما به عنوان مقدمه، این کار را انجام می دهد، ادامه مطلب را بخوانید. صفحه را باز کنید و روی دکمه سمت راست ماوس کلیک کنید. مورد "ذخیره به عنوان ..." را انتخاب کنید
کل صفحه وب را ذخیره کنید همانطور که در تصویر می بینید، من قبلاً همه چیز را دانلود کرده ام. ما در اینجا دو پوشه داریم.
هر چیزی که نیاز دارید اینجاست. هر مورد اگر این را درک کنید، می توانید به سرعت هر آنچه را که نیاز دارید به دست آورید. اما، چنین کاری به طور فزاینده ای غیرممکن می شود. دانلود در حال انجام نیست. در صورت ممنوعیت کپی کردن صفحه چه باید کرد؟
این گوگل کروم است
همانطور که قبلاً متوجه شده اید، من اغلب از Google Chrome استفاده می کنم و یافتن کد شخص دیگری در این مرورگر به آسانی پوست اندازی گلابی است. همانطور که در اصل، و در هر مورد دیگر. این طرح نه تنها مشابه، بلکه یکسان خواهد بود. صفحه ای را که می خواهیم کد آن را پیدا کنیم باز کنید و با دکمه سمت راست ماوس در هر جایی کلیک کنید. در پنجره ای که ظاهر می شود، روی "مشاهده کد صفحه" کلیک کنید.
یک صفحه کد در یک پنجره جدید باز می شود که درک آن برای یک مبتدی بسیار دشوار است. اما، از قبل نگران نباشید.
اگر نیاز به دانستن کد تنها یک عنصر دارید، کافی است با ماوس روی آن حرکت کرده و راست کلیک کنید. عملکرد دیگری از کروم را انتخاب می کنیم: "مشاهده کد عنصر".
به عنوان مثال، ممکن است به نحوه ساخت لوگو با استفاده از یک تصویر یا یک زبان برنامه نویسی علاقه مند باشم؟ پس از همه، شما می توانید یک مربع با استفاده از css رسم کنید. بسیاری از کارشناسان توصیه می کنند تا حد امکان اطلاعات را کدگذاری کنید. چگونه در سایت های محبوب کار می کنند؟
بنابراین اطلاعات لازم ظاهر شد. html بالا، css پایین. این دو زبان هستند. اولی مسئول مولفه متن و دومی برای طراحی است. اگر css وجود نداشت، باید هر بار رنگ، اندازه فونت را تجویز کنید. برای هر صفحه، زمان بسیار طولانی است. اما اگر html نبود متنی نداشتیم. به شدت توضیح داده شده است، اما به طور کلی، همه چیز اینطور است.
ضمناً، اگر علاقه مند به نحوه عملکرد آن در اینجا هستید، می توانید لینک تصویر زیر را مشاهده کنید. اینجا پاسخ شماست.
موزیلا فایرفاکس
اگر دوست دارید در ماف کار کنید، همه چیز دقیقاً یکسان خواهد بود. صفحه را باز کنید و روی دکمه سمت راست ماوس کلیک کنید. اگر می‌خواهید کل کد را به طور کامل ببینید، "کد منبع صفحه".
هنگامی که ماوس را روی هر عنصری نگه دارید، باز کردن کد آن امکان پذیر می شود.
در اینجا داده ها در پایین صفحه نمایش داده می شوند، اما در غیر این صورت همه چیز دقیقاً یکسان است.
مرورگر Yandex
در مرورگر Yandex، همه چیز دقیقاً مانند دو نسخه قبلی است، صفحه را باز کنید، راست کلیک کنید، کد صفحه را ببینید.
اگر می‌خواهیم دقیقاً کد آن را پیدا کنیم، مکان‌نما را روی یک عنصر نگه داریم.
همه چیز در اینجا مانند کروم نمایش داده می شود.
اپرا
و در نهایت اپرا.
به هر حال، ممکن است متوجه شده باشید که استفاده از ماوس ضروری نیست. یک میانبر صفحه کلید سریع برای باز کردن کد وجود دارد و برای همه مرورگرها یکسان است: CTRL + U.
برای موارد: Ctrl + Shift + C.
این چیزی است که نتیجه به نظر می رسد.
برای مبتدیان جالب خواهد بود
حالا ببینید همه چیز چگونه کار می کند. شما یک سایت پیدا می کنید و واقعاً برخی از عناصر را دوست دارید. مثلا این یکی شما قبلاً می دانید که چگونه کد عنصر را باز کنید.
حالا آن را کپی کنید.
من از این کد استفاده می کنم، این کد را در یک فایل html جدید، در تگ body (body در انگلیسی) قرار می دهم.
حالا بیایید ببینیم که همه چیز در مرورگر چگونه به نظر می رسد.
آماده. برای اینکه متن با لبه ها تراز شود و رنگ مایل به سبز پیدا کند، باید css را به این سند متصل کنید و کد دیگری را از سایتی که این کد را از آن تایپ کرده ایم کپی کنید.
حالا من این کار را نمی کنم. زمان بیشتری می برد، هم مال من و هم مال شما. فکر می کنم که تمام جزئیات را در انتشارات آینده خود شرح خواهم داد. در خبرنامه مشترک شوید و اولین کسی باشید که از مقاله مطلع می شود.
اگر نمی توانید تحمل کنید و می خواهید در حال حاضر بیشتر در مورد html و css بیاموزید، به طور سنتی می توانم دوره های آموزشی رایگان را به شما توصیه کنم.
در اینجا 33 آموزش برای تسلط شما بر html وجود دارد - "دوره رایگان HTML" .
و در اینجا اطلاعات کامل در مورد css وجود دارد - "دوره رایگان CSS (45 آموزش تصویری!)" .
حالا شما کمی بیشتر می دانید. برای شما آرزوی موفقیت روزافزون در تلاش دارم. تا دفعه بعد!
مهارت کد منبع صفحه را تغییر دهیدیک مهارت مفید برای یک کاربر پیشرفته اینترنت است. با جایگزینی کد HTML، می توانید صفحه وب باز را به دلخواه تغییر دهید. در این مقاله به شما خواهیم گفت، نحوه تغییر کد صفحهدر گوگل کروم با این حال، در سایر مرورگرها همه چیز به همین ترتیب انجام می شود، بنابراین نباید هیچ مشکلی وجود داشته باشد.
کد HTML یک صفحه چیست؟
هر صفحه ای که در مرورگر باز می کنید زبان نشانه گذاری HTML خاص خود را دارد. این کد برچسب و متن است. برچسب ها نوعی برچسب هستند که به مرورگر می گویند چگونه قسمت خاصی از سایت را نمایش دهد. متن محتوای صفحه است، چیزی که کاربر می بیند. همچنین، سبک های CSS را می توان به صفحه متصل کرد که ظاهر عناصر صفحه را تعیین می کند. به کد منبع سایت را تغییر دهیدشما نیازی به دانستن HTML و CSS ندارید و به زودی خودتان آن را خواهید دید.
چرا یک صفحه وب را تغییر دهید؟
می توانید داده های سایت را تغییر دهید، متن پیام را تغییر دهید، اسکرین شات جعلی بسازید. لطفاً توجه داشته باشید که همه تغییرات فقط برای شما قابل مشاهده است و با بارگذاری مجدد صفحه ناپدید می شوند. همچنین داده های تغییر یافته واقعی نخواهد بود. به عنوان مثال، اگر من 10 دلار نداشته باشم و به 100 تبدیل کنم، دیگر پولی نخواهم داشت. این فقط نمایش صفحه توسط مرورگر است. مثال:
بعد از:
به عنوان مثال، من همان سایت را انتخاب می کنم و اعلامیه قبلی مقاله "" باز کردن صفحه اصلی در گوگل کروم را اصلاح می کنم. روی عنصری که می خواهم تغییر دهم، مثلاً عنوان اعلامیه را کلیک راست کرده و "View Code" را انتخاب کنید.
در پنجره باز شده به تب Elements رفته و کد HTML صفحه را مشاهده کنید. در آن شما باید متن مورد علاقه ما را پیدا کنید. (خط قرمز شده)
حالا متن قبلی را حذف می کنم و متن جدید را وارد می کنم.
فقط همین، عنوان اطلاعیه تغییر کرده است. حالا خود اعلامیه، تگ ها و عنوان را تغییر می دهم.
با تغییر ویژگی src در تگ img می توانید تصویر دیگری را وارد کنید.
بنابراین، امروز قصد داریم چندین ابزار مفید برای یک استاد وب را بررسی کنیم که زندگی را برای طرح‌بندی وب‌سایت آسان‌تر می‌کند. بیایید با کنسول وب مستر در گوگل کروم شروع کنیم. و بیایید به سؤالاتی بپردازیم که اغلب در طول طرح بندی سایت از استاد وب ایجاد می شود.
برای دسترسی به کنسول، سایت خود را در Google Chrome باز کنید، در هر نقطه از صفحه وب کلیک راست کنید، و از منوی کشویی زمینه، مشاهده کد صفحه را انتخاب کنید، یا با انتخاب عنصر View Code، روی یک مورد خاص برای تحقیق انتخاب کنید. .
در بالا، چندین برگه فهرست شده خواهید داشت. امروز در مورد تب "Elements" صحبت خواهیم کرد , که عناصر یک صفحه وب را با برجسته کردن تگ ها، ویژگی ها، برجسته کردن تودرتو عناصر، نشان دهنده سلسله مراتب یک عنصر در درخت DOM (اشاره در پایین، از والد ریشه تا کاوش فعلی)، توانایی عناصر را ویرایش کنید، لیستی از خصوصیات آنها را بررسی کنید، جستجو بر اساس عناصر را در نظر بگیرید و بیایید با مشاهده سبک های css مرتبط با عناصر و غیره آشنا شویم.
چگونه می توانم تمام سبک هایی را که با یک عنصر خاص مرتبط هستند را ببینم؟ کدام یک در حال حاضر اعمال می شود؟ در کدام فایل ها قرار دارند؟
بنابراین، هیچ چیز نمی تواند آسان تر باشد! مرورگر گوگل کروم را باز می کنیم، سایت خود را باز می کنیم - منبع سوالات، روی عنصر مورد نظر کلیک راست می کنیم، در صورتی که در زمینه صفحه قابل مشاهده است، و "مشاهده کد عنصر" را از منوی زمینه انتخاب می کنیم.
در پایین، یک کنسول با یک برگه برجسته در سمت چپ "Elements" و تمام سبک های مرتبط با عنصر در سمت راست داریم، که در آن: سبک های محاسبه شده- اینها سبک های کلی "خلاصه" هستند که به عنصری از قوانین css و تنظیمات مرورگر کاربر (محیط او) اختصاص داده شده اند و برگه جمع می شود.
اما ما علاقه مند به برگه "Styles" هستیم که در زیر آن گسترش یافته است، که در آن تمام سبک های اختصاص داده شده به یک عنصر یک به یک لیست می شوند، همچنین فایل هایی که این قوانین برای این عنصر با نوع، شناسه، کلاس آن نشان داده شده اند، نام، ویژگی، صفت و غیره... در عین حال، اگر قانون css خط خورده باشد، آنگاه زودتر / دیرتر تعریف شده است (که ردیابی کدام یک از قوانین css اولویت دارد و در این مورد برای عنصر اعمال می شود).
در زیر کنسول خطی وجود دارد که یک عنصر را در سلسله مراتب سند نشان می دهد و به راحتی به شما امکان می دهد کل لیست عناصر والد را از ریشه تا عنصر انتخاب شده مشاهده کنید. چیزی شبیه خرده نان.
تگ Html در زمینه صفحه قابل مشاهده نیست؟ یا باید همه برچسب ها را پیدا کنید، مثلاً بر اساس یک کلاس، نام، ویژگی، نوع خاص؟
سایت را در گوگل کروم باز کنید، راست کلیک کنید، منوی زمینه را باز کنید، انتخاب کنید « مشاهده کد صفحه » ... کلید ترکیبی "CTRL + F" را همزمان فشار دهید، عبارت مورد نیاز خود را وارد کنید ( مثلا: کلاس =”لایه گذاری ") و در فهرست نتایج یافت شده، در طول مسیر، تمام سبک های مرتبط با عناصر مورد نظر را در سمت راست صفحه جستجو کنید.
نحوه مشاهده کد html عنصر (ها) که به صورت پویا بارگذاری شده است (به عنوان مثال: توسط Ajax)
منتظر بارگذاری صفحه در گوگل کروم هستیم. ما اقدامات لازم را برای عملکرد آژاکس انجام می دهیم. روی داده های بارگیری شده کلیک راست کنید، "View element code" را از منوی زمینه انتخاب کنید، نتیجه را در کنسول در تب "Elements" در سمت چپ بررسی کنید.
مشاهده تغییرات در سبک های css در زمان واقعی
به هر حال، در صورت لزوم، مشاهده سبک هایی که به یک عنصر در حال پرواز اختصاص داده می شود نیز راحت است، به عنوان مثال، هنگام پیمایش گالری و سایر رویدادها توسط تایمر. تمام سبک های اختصاص داده شده با جاوا اسکریپت در زمان واقعی در ویژگی نمایش داده می شود سبکعنصر انتخاب شده در پنجره برگه "Elements".
پیش نمایش زنده تأثیر قوانین css در ارائه تگ های html
Google Chrome یک کنسول تعاملی برای سبک های css ارائه می دهد. و این بدان معناست که شما نه تنها می‌توانید سبک‌های اعمال شده بر روی عنصر را مشاهده کنید، بلکه نشانگر ماوس را روی css مشخص‌شده از ویژگی‌ها حرکت دهید، آن را با استفاده از علامت بازشو در سمت راست فعال کنید، یا با برداشتن علامت پرچم، آن را غیرفعال کنید. و مشاهده نتیجه حاصل در صفحه.
تغییر ساختار ارائه عناصر html در حال پرواز (درست در مرورگر)
بنابراین، ما قبلاً یاد گرفته‌ایم که چگونه ساختار یک سند وب را در Google Chrome کاوش کنیم، اکنون به طور خلاصه به ویرایش عناصر در پرواز خواهیم پرداخت. ما به هر شکلی که برایمان مناسب باشد به سراغ کنسول می رویم. ما عنصر مورد نیاز را در برگه "Elements" پیدا می کنیم، روی آن کلیک راست کرده و از این طریق منوی زمینه پاپ آپ را فراخوانی می کنیم:
- افزودن ویژگی- یک ویژگی برای عنصر مشخص شده اضافه می کند. به محض فعال شدن مکان نما، شروع به تنظیم ویژگی مورد نظر می کنیم. مثلا: بیایید نام = ”itemImage” را بنویسیم که بلافاصله به آیتم ما اضافه می شود.
- ویرایش ویژگی- اگر روی یک ویژگی عنصر کلیک راست کنید، مورد در دسترس قرار می گیرد ویرایش کنیدصفت... کلیک کنید، ویرایش کنید.
مثال استفاده:ما رمز عبور ذخیره شده در زیر ستاره در Google Chrome را فراموش کرده ایم (اگر رمز عبور در این مرورگر ذخیره شده باشد). روی مورد دارای رمز عبور راست کلیک کنید، روی "مشاهده کد مورد" کلیک کنید. , در کنسول سمت چپ در برگه عناصربا دکمه سمت راست ماوس روی ویژگی type = ”password” کلیک کنید، روی آن کلیک چپ کنید ویرایش کنیدصفت،تغییر ویژگی نوع =”کلمه عبور "بر نوع =”متن "و اکنون به جای ستاره، همان رمز عبور به صورت متن نمایش داده می شود.
- ویرایش کنیدhtml- روی یک آیتم در کنسول کلیک راست کنید عناصر، انتخاب کنید ویرایش کنیدhtmlکد را به دلخواه تغییر دهید
- کپی 🀄مانندHtml- بخش HTML را که برای تحقیقات بیشتر نیاز داریم، مثلاً در یک دفترچه یادداشت، یا برای اهداف دیگری که دقیقاً همان طرح‌بندی را باید اعمال کنیم، کپی کنید. ما در زمان صرفه جویی می کنیم.
- کپی 🀄XPATH- نمایش XPATH ساختار را از ریشه عنصر والد به عنصر انتخاب شده کپی می کند.
- حذفگره- اگر لازم است عنصر انتخاب شده فعلی و همه فرزندان آن را از متن صفحه وب حذف کنید و نتیجه را مشاهده کنید.
- کلمهبسته بندی کردن- نمای صفحه وب را در زمینه کنسول نمایش می دهد عناصرخواندنی تر
در مقالات بعدی به بررسی ابزارهای وب مستر ادامه می دهیم و به طور خاص با بقیه تب های ابزار برای مدیر سایت آشنا می شویم. گوگل کرومو همچنین اشکال زدایی خطاهای جاوا اسکریپت را با استفاده از مرورگرهای مختلف در نظر بگیرید
