کلیدهای راه اندازی کنسول Yandex. نحوه باز کردن کنسول در مرورگر Yandex و سایر مرورگرها

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

چرا به کنسول در مرورگر نیاز دارید؟

سه دلیل برای ایجاد کنسول در مرورگر وجود دارد:

1. برای رفع اشکال خود مرورگر در مرحله طراحی.
2. برای آموزش متخصصان جوان در عملکردهای یک مرورگر خاص.
3. برای حرفه ای ها برای رفع اشکال صفحات اینترنتی خود در زمان واقعی.

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

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

نحوه باز کردن کنسول توسعه دهنده در Yandex

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

دستورالعمل نحوه باز کردن کنسول در مرورگر Yandex:

1. مرورگر را از Yandex راه اندازی کنید و سپس منتظر بمانید تا به طور کامل در آن بارگیری شود RAM، فقط چند ثانیه طول می کشد.
2. اکنون هر صفحه اینترنتی را باز کنید، به عنوان مثال، گوگل، اما اصلاً مهم نیست، هر کدام این کار را انجام خواهند داد.
3. برای باز کردن ابزار Yandex، کلیدهای زیر را فشار دهید: "Ctrl + Shift + I"
4. اگر می خواهید به طور خاص با جاوا اسکریپت کار کنید - این یک زبان برنامه نویسی است، باید کلیدهای زیر را نگه دارید: "Ctrl + Shift + J"

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

باز کردن کنسول در سایر مرورگرها

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

1. گوگل کروم. دو گزینه وجود دارد: به تنظیمات بروید، جایی که یک دکمه برای باز کردن کنسول وجود دارد، یا کلید ترکیبی "Ctrl + Shift + I" را فشار دهید.
2. اپرا. در منوی "ابزارهای توسعه" یک دکمه وجود خواهد داشت " کد منبع"، یا کلید ترکیبی "Ctrl + U".
3. فایرفاکس. در تنظیمات مرورگر، "Ctrl + Shift + J" را انتخاب کنید.
4. سافاری. F12، یا به "افزونه ها" بروید، جایی که "نمایش منو برای توسعه دهنده" وجود دارد.

در نتیجه

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

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

چرا به کنسول در مرورگر نیاز دارید؟

سه دلیل برای ایجاد کنسول در مرورگر وجود دارد:

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

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

نحوه باز کردن کنسول توسعه دهنده در Yandex

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

دستورالعمل نحوه باز کردن کنسول در مرورگر Yandex:

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

باز کردن کنسول در سایر مرورگرها

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

در نتیجه

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

تصمیم گرفتم این مقاله را تحت تأثیر برخی از کاربرانی که مدیر چندین سایت هستند بنویسم، اما هیچ ایده ای در مورد کنسول مرورگر ندارند و به همین دلیل دائماً سؤالاتی مانند "چگونه می توانم رنگ دکمه را تغییر دهم" یا "پیام های خصوصی من" برایم پیش می آید. کار نمیکنه، چیکار کنم؟" و به سؤالات "چه خطاهایی در کنسول نمایش داده می شود؟" یا "سرور چه چیزی را برمی گرداند؟" آنها فقط شما را دعوت می کنند تا خودتان ببینید.

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

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

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

اطلاعات به دست آمده از پانل اغلب برای نشان دادن علت تقریباً هر مشکلی در سایت کافی است.

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

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

پس بیایید نگاهی به این پنل بیندازیم.

کلید F12 را فشار دهید تا پنل توسعه دهنده ظاهر شود.

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

به طور پیش فرض، اولین تب "Elements" باز است.

این تب کد html صفحه فعلی را نمایش می دهد.

در داخل تب نه تنها می توانید اطلاعات کاملی در مورد محل بلوک های html دریافت کنید، بلکه می توانید هنگام بارگذاری فایل های js و css را مشاهده کنید و حتی با کلیک بر روی لینک مربوطه با محتوای این فایل ها آشنا شوید. در کد صفحه

در سمت راست کد صفحه، ستونی با سبک‌ها و قوانین CSS برای صفحه فعلی یا بلوک html که انتخاب می‌کنید، نمایش داده می‌شود.

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

بلوک html مورد نظر را انتخاب کنید، آن را انتخاب کنید و سبک های css آن در ستون سمت راست نمایش داده می شود. بر روی این بلوک کلیک راست کرده و یکی از اقدامات پیشنهادی "Edit as HTML" را انتخاب کنید تا بتوانید کد html این بلوک را ویرایش کنید. نتیجه این ویرایش را بلافاصله پس از اتمام خواهید دید، تمام ویرایش ها اتفاق می افتد، به اصطلاح آنلاین، نتیجه بلافاصله در صفحه نمایش داده می شود.

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

نباید فکر کنید که تغییرات html و css در این تب به نحوی بر وضعیت واقعی سرور شما تأثیر می گذارد و در واقع در حال ویرایش فایل های html و css سایت خود هستید. همه اینها فقط در مرورگر اتفاق می افتد و شما باید خودتان تمام تغییرات را به این فایل ها منتقل کنید.

اگر به نظر می رسد همه چیز با فایل های html واضح است، یک فایل یک صفحه است، پس سبک های صفحه می تواند از فایل های css زیادی تشکیل شود و شما باید دقیقا بدانید که کدام فایل ها باید ویرایش شوند.

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

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

بیایید به تب بعدی برویم - "شبکه".

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

صفحات سایت های مدرن دیگر مانند قبل خالی از HTML نیستند.

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

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

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

سرور ممکن است یک متن خطایی مانند "هشدار..." یا "خطای مرگبار..." را برگرداند، یا یک شماره خطای سرور، مانند 404 یا 500 را برگرداند، یا ممکن است اتفاق بیفتد که برگه پاسخ خالی باشد - هیچ پاسخی داده نشد. دریافت کرد. این اطلاعات برای حل مشکلی که در سرویس پشتیبانی که با آن تماس می گیرید بسیار مفید خواهد بود، نشان می دهد دلایل احتمالیوقوع آن، و اغلب به وضوح نشان می دهد که در آن به حفاری.

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

گاهی اوقات پیش می‌آید که به نظر می‌رسد روی دکمه رتبه‌بندی کلیک کرده‌اید یا در یک چت شخصی پیامی ارسال کرده‌اید، اما هیچ اتفاقی نمی‌افتد، به برگه «شبکه» پانل مرورگر نگاه کرده‌اید، اما درخواست‌ها به سرور به سادگی ارسال نمی‌شوند. به احتمال زیاد، درگیری در اسکریپت های js سایت ایجاد شده است، بنابراین وقت آن است که به تب "کنسول" بروید.

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

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

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

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

مرورگرهای وب دارای امکانات بسیار بیشتری نسبت به وب گردی معمولی هستند. ویژگی‌هایی برای آسان‌تر کردن اطلاعات، فضای ذخیره‌سازی، ابزارهایی برای مدیریت داده‌ها و حتی ابزارهایی برای آزمایش و توسعه وب‌سایت‌ها وجود دارد. کنسول مرورگر Yandex شامل ابزارهای مختلفی برای کار با قسمت نامرئی سایت ها است: کد جاوا اسکریپت، داده ها و دستگاه های متصل، کوکی ها، حافظه پنهان، گواهی های امنیتی و غیره. کنسول توسعه دهنده یک ابزار فوق العاده مفید است که نه تنها در دست یک برنامه نویس، گاهی اوقات حتی یک فرد غیرمتخصص نیز مجبور به استفاده از این پنل است.

پنل توسعه دهنده برای حل پنج وظیفه اصلی پیاده سازی شده است:

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

چگونه کنسول را در مرورگر Yandex باز کنیم؟

چندین راه برای تماس با کنسول در مرورگر Yandex وجود دارد:

• از طریق "تنظیمات مرورگر Yandex"؛
• از منوی زمینهصفحات؛
• استفاده از کلیدهای میانبر

از طریق منوی مرورگر

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

نحوه باز کردن کنسول توسعه دهنده در مرورگر Yandex:

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

از منوی زمینه

این یکی از بیشترین است راه های سادهباز کردن بخش مورد نیاز، برای اجرای آن فقط باید 3 کلیک انجام دهیم:

از طریق کلیدهای داغ

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

نحوه روشن کردن کنسول با استفاده از میانبرهای صفحه کلید:

راه دیگر برای رفتن به پنل مورد نظر فشار دادن کلید است F12.

شرح عناصر پنل توسعه دهنده

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

برگه های پنل برنامه نویس:

• "Elements" کد HTML ساخت یافته را نمایش می دهد. این ساختار کد دقیق و قوانین تودرتو را حفظ می کند. علاوه بر کد HTML، سبک های CSS را برای هر بلوک یا عنصر نمایش می دهد. به شما امکان می دهد ساختار را درک کنید، کلاس های عناصر و سبک های اختصاص داده شده به آنها را ببینید.
  
• "کنسول" خطاها را در کد صفحه نمایش می دهد و به شما امکان می دهد کد جاوا اسکریپت خود را اجرا کنید که فوراً در مرورگر پردازش می شود.
  
• "منابع" یک برگه است که شامل تمام فایل های دارای کد جاوا اسکریپت و CSS است که به منبع متصل هستند. به شما امکان می دهد هم کدهای متصل محلی و هم فایل های میزبانی شده در منابع دیگر را مشاهده کنید (این می تواند JQuery، متریک های Google، Yandex و سایر فایل های موضوعی، اسکریپت ها) باشد.
  
• "شبکه" یک تب بسیار مهم است، زیرا می توانیم از اطلاعات آن برای افزایش عملکرد سایت استفاده کنیم. این زمان بارگیری محتوای رسانه و فایل‌های JS خارجی را نشان می‌دهد. اگر سایت از تصاویر با وضوح بالا استفاده می کند یا آنها از یک منبع خارجی بارگیری می شوند، بارگذاری سایت بیشتر طول می کشد. این برگه نشان می دهد که کدام محتوا باعث کاهش سرعت منبع وب می شود.
  
• "عملکرد" ​​صفحه ای برای بررسی دقیق عملکرد یک منبع است. پس از مراحل تست وب سایت، آمار برای هر عنصر صفحه ظاهر می شود اطلاعات کاملبا سرعت دانلود؛
  
• "حافظه" شبیه به برگه قبلی است، اما اطلاعات مربوط به وزن صفحه را نمایش می دهد. ما می توانیم داده ها را گسترش دهیم و وزن تمام عناصر صفحه را با جزئیات مطالعه کنیم. نه تنها وزن تصاویر یا متن در نظر گرفته می شود، بلکه تمام اشیاء، عناصر HTML و CSS و غیره نیز در نظر گرفته می شود.
  
• "برنامه" دسترسی به تمام فضای ذخیره سازی را فراهم می کند: کوکی ها، حافظه پنهان، حافظه محلی، جلسات، فونت ها، اسکریپت ها و موارد دیگر. همچنین یک ابزار مفید "Clear Storage" وجود دارد که برای پاک کردن تمام فضای ذخیره سازی طراحی شده است.
  
• "امنیت" اطلاعاتی در مورد گواهینامه های امنیتی و قابلیت اطمینان اتصال ارائه می دهد.
  
• "Audits" ابزاری برای ممیزی سریع یک وب سایت است. در پایان کار، نتیجه در 5 دسته نشان داده شده است: "عملکرد"، "پیشرفت برنامه وب"، "سهولت استفاده"، " بهترین تمرین"(نکاتی برای بهبود صفحه) و "SEO".
  

یکی دو نکته دیگر:

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

سلام خدمت دوستان عزیز. پنل توسعه دهنده (کنسول) در مرورگر ابزاری ضروری برای هر صاحب وب سایتی است که با آن می توانید کد html صفحه را به سرعت مشاهده کنید و سبک های css. و همچنین از خطاهای رخ داده در هنگام بارگذاری سایت مطلع شوید و سایت را از نظر سازگاری بررسی کنید.

امروز کار با کد html، سبک های css و سازگاری را در پنل توسعه دهنده در نظر خواهیم گرفت. اینها ابزارهایی هستند که برای حل اکثر مشکلات مورد نیاز هستند.

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

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

سپس از طریق پنل توسعه دهنده در مرورگر به عنصر مورد نظر نگاه می کنید، جایی که می توانید کد html و سبک های css آن را مشاهده کنید.

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

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

باز کردن پنل مدیر وب سایت و آشنایی با رابط کاربری

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

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

من پنل را در مرورگر فایرفاکس ترجیح می دهم.

پانل خود به دو نیمه تقسیم می شود و شامل زبانه ها و ابزارهایی برای کار است.

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

برای کار با استایل‌ها، باید به قسمت پنل CSS بروید، جایی که می‌توانید استایل‌ها را اضافه کنید یا با حذف چک باکس کنار آن‌ها، استایل‌های موجود را غیرفعال کنید. همه چیز قابل تغییر است.

در اینجا می توانید دریابید که سبک ها در کدام فایل و در چه خطی قرار دارند.

چگونه یک عنصر html را در یک وب سایت تجزیه و تحلیل کنیم و به سبک های css آن پی ببریم

بیایید به مثال من که در هر مقاله قرار دارد نگاه کنیم.

برای تجزیه و تحلیل عنصر مورد نظر، باید روی آن کلیک راست کرده و آیتم منو را انتخاب کنید .

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

و اگر همه چیز با سبک ها بسیار ساده است، هنگام کار با کد html باید یکپارچگی آن را درک کنید. یعنی هر عنصر دارای برچسب هایی است که در آنها قرار دارد. اینها می توانند پاراگراف ها، پیوندها، تصاویر و غیره باشند. اغلب این بلوک‌های DIV هستند که دارای یک تگ باز هستند < div>و بسته شدن div>. و این همه به وضوح در پانل قابل مشاهده است.

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

در فیلم آموزشی به جزئیات این موضوع خواهم پرداخت. و اگر می خواهید به سرعت به دانش اولیه html و css مسلط شوید، به شما توصیه می کنم به صفحه بروید "به صورت رایگان"و دانلود دوره های آموزشی توسط Evgeniy Popov.

نحوه کپی کد html از پنل به فایل های سایت

ایده های زیادی برای استفاده از پنل توسعه دهنده وجود دارد. پس از آزمایش در پنل، نتیجه باید به فایل های سایت منتقل شود. و در اینجا کمی مشکل وجود دارد. واقعیت این است که پنل کدهای html را نمایش می‌دهد و اکثر سایت‌های مدرن، از جمله سایت‌های روی پلتفرم وردپرس، با استفاده از زبان برنامه‌نویسی PHP ایجاد می‌شوند. و این مانند آسمان و زمین است.

بنابراین، بیایید نمونه ای از کپی کردن یک بنر از وبلاگ من و انتقال آن به سایت دیگری را بررسی کنیم.

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

کد در کلیپ بورد کپی شده است و اکنون باید آن را در جایی که می خواهید این بنر را ببینید جایگذاری کنید.

توصیف این فرآیند بسیار دشوار است، بنابراین من پیشنهاد می کنم یک آموزش ویدیویی را تماشا کنید که در آن همه چیز با جزئیات توضیح داده شده و نشان داده شده است.

نحوه انتقال استایل ها از پنل برنامه نویس به فایل های سایت

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

، برای من راحت تر است. از آنجایی که هنگام کار در Notepad ++، برجسته کردن کد و شماره گذاری خطوط وجود دارد. و زمانی که فقط نیازی به کپی کردن سبک ها نیستید، بلکه تغییراتی در سبک های موجود ایجاد کنید، بسیار کمک می کند. این سبک ها به راحتی با شماره خط پیدا می شوند.

نحوه بررسی پاسخگویی قالب در پنل توسعه دهنده

برای تغییر پنل به حالت تطبیقی، باید کلید ترکیبی CTRL+SHIFT+M یا دکمه موجود در پنل توسعه دهنده را فشار دهید که در مرورگرهای مختلف به طور متفاوتی قرار دارد.

نتیجه گیری

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

استفاده از پنل و مهارت در کار با کد و سبک هنگام کار با وب سایت ها و برنامه های وابسته ضروری است.

ابزار را به خدمت بگیرید، چندین بار برای شما مفید خواهد بود.

اگر سوالی دارید، خوشحال می شوم در نظرات به آنها پاسخ دهم.

دوستان برای شما آرزوی موفقیت دارم. شما را در مقالات جدید می بینیم.

با احترام، ماکسیم زایتسف.