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

2024 نویسنده: Abigail Brown | [email protected]. آخرین اصلاح شده: 2023-12-17 06:46

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

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

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

آموزش های زیر نحوه دسترسی به این ابزارهای توسعه دهنده در چندین مرورگر وب محبوب را به شما آموزش می دهد.

Google Chrome

ابزارهای برنامه‌نویس Chrome به شما امکان می‌دهند کد را ویرایش و اشکال‌زدایی کنید، اجزای جداگانه را بررسی کنید تا مشکلات عملکرد را آشکار کنید، صفحه‌های مختلف دستگاه از جمله صفحه‌های دارای Android یا iOS را شبیه‌سازی کنید، و چندین عملکرد مفید دیگر را انجام دهید.

1. منوی اصلیChrome را انتخاب کنید که با سه خط افقی مشخص شده و در گوشه سمت راست بالای مرورگر قرار دارد.

2. وقتی منوی کشویی ظاهر شد، نشانگر ماوس خود را روی گزینه More tools ببرید.

   

3. اکنون باید یک منوی فرعی ظاهر شود. گزینه ای با برچسب Developer tools را انتخاب کنید. همچنین می توانید از میانبر صفحه کلید زیر به جای این آیتم منو استفاده کنید: سیستم عامل Chrome/Windows (CTRL+SHIFT+I)، Mac OS X (ALT(OPTION) +COMMAND+I)

   

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

5. علاوه بر این بخش‌ها، می‌توانید از طریق نماد >> که در سمت راست Performance قرار دارد به ابزارهای زیر نیز دسترسی داشته باشید. برگه.

   • Memory: میزان مصرف حافظه را در یک صفحه وب نظارت و ضبط کنید. می توانید ببینید که جاوا اسکریپت در سایت شما چقدر سنگین است.
   • امنیت: مشکلات گواهی و سایر مسائل مربوط به امنیت را در صفحه یا برنامه فعال برجسته می کند.
   • Application: منابعی را که توسط یک برنامه وب استفاده می شود بررسی کنید. یک تفکیک کامل از موارد استفاده شده دریافت کنید.
   • Audits: راه‌هایی برای بهینه‌سازی زمان بارگذاری صفحه یا برنامه و عملکرد کلی ارائه می‌دهد.

   

6. حالت دستگاه به شما امکان می دهد صفحه فعال را در یک شبیه ساز مشاهده کنید که آن را تقریباً دقیقاً همانطور که در یکی از بیش از ده ها دستگاه ظاهر می شود، از جمله چندین اندروید معروف، نمایش می دهد. و مدل های iOS مانند iPad، iPhone و Samsung Galaxy. همچنین به شما این امکان داده می شود که وضوح صفحه نمایش سفارشی را مطابق با نیازهای توسعه یا آزمایش خاص خود تقلید کنید.

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

   

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

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

   

Mozilla Firefox

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

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

2. وقتی منوی کشویی ظاهر شد، Web Developer را انتخاب کنید.

   

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

   • Toggle Tools: رابط ابزارهای توسعه دهنده را که معمولاً در پایین پنجره مرورگر قرار دارد نمایش می دهد یا پنهان می کند. میانبر صفحه کلید: Mac OS X (ALT(OPTION)+COMMAND+I)، Windows (CTRL+SHIFT+I)
   • Inspector: به شما امکان می دهد کدهای CSS و HTML را در صفحه فعال و همچنین در یک دستگاه قابل حمل از طریق اشکال زدایی از راه دور بازرسی و/یا تغییر دهید. میانبر صفحه کلید: Mac OS X (ALT(OPTION)+COMMAND+C)، Windows (CTRL+SHIFT+C)
   • کنسول وب: به شما امکان می دهد عبارات جاوا اسکریپت را در صفحه فعال اجرا کنید و همچنین مجموعه متنوعی از داده های ثبت شده از جمله هشدارهای امنیتی، درخواست های شبکه، پیام های CSS و موارد دیگر را مرور کنید.. میانبر صفحه کلید: Mac OS X (ALT(OPTION)+COMMAND+K)، Windows (CTRL+SHIFT+K)
   • Debugger: اشکال‌زدای جاوا اسکریپت به شما امکان می‌دهد با تنظیم نقاط شکست، بازرسی گره‌های DOM، منابع خارجی جعبه سیاه و موارد دیگر، نقص‌ها را مشخص و برطرف کنید. همانطور که در مورد Inspector وجود دارد، این ویژگی از اشکال زدایی از راه دور نیز پشتیبانی می کند. میانبر صفحه کلید: Mac OS X (ALT(OPTION)+COMMAND+S)، Windows (CTRL+SHIFT+S)
   • ویرایشگر سبک: به شما امکان می دهد شیوه نامه های جدیدی ایجاد کنید و آنها را با صفحه وب فعال ترکیب کنید، یا برگه های موجود را ویرایش کنید و نحوه نمایش تغییرات خود را در مرورگر تنها با یک کلیک آزمایش کنید.. میانبر صفحه کلید: Mac OS X، Windows (SHIFT+F7)
   • Performance: تفکیک دقیقی از عملکرد شبکه صفحه فعال، داده‌های نرخ فریم، زمان و وضعیت اجرای جاوا اسکریپت، چشمک زدن رنگ و موارد دیگر ارائه می‌کند. میانبر صفحه کلید: Mac OS X، Windows (SHIFT+F5)
   • شبکه: هر درخواست شبکه آغاز شده توسط مرورگر را همراه با روش مربوطه، دامنه مبدا، نوع، اندازه و زمان سپری شده فهرست می کند. میانبر صفحه کلید: Mac OS X (ALT(OPTION)+COMMAND+Q)، Windows (CTRL+SHIFT+Q)
   • بازرس ذخیره‌سازی: به حافظه پنهان و کوکی‌هایی که توسط یک وب‌سایت ذخیره می‌شوند نگاهی بیندازید. میانبر صفحه کلید: (SHIFT+F9)
   • Developer Toolbar: یک مفسر خط فرمان تعاملی را باز می کند. help را در مفسر برای فهرستی از تمام دستورات موجود و نحو مناسب آنها وارد کنید. میانبر صفحه کلید: Mac OS X، Windows (SHIFT+F2)
   • WebIDE: امکان ایجاد و اجرای برنامه های وب را از طریق یک دستگاه واقعی دارای سیستم عامل فایرفاکس یا از طریق شبیه ساز سیستم عامل فایرفاکس فراهم می کند. میانبر صفحه کلید: Mac OS X، Windows (SHIFT+F8)
   • Browser Console: عملکردی مشابه کنسول وب را ارائه می دهد (به بالا مراجعه کنید).با این حال، تمام داده‌های بازگردانده شده برای کل برنامه فایرفاکس (از جمله برنامه‌های افزودنی و عملکردهای سطح مرورگر) است، نه فقط صفحه وب فعال. میانبر صفحه کلید: Mac OS X (SHIFT+COMMAND+J)، Windows (CTRL+SHIFT+J)
   • نمایش طراحی واکنش‌گرا: به شما امکان می‌دهد فوراً یک صفحه وب را در وضوح‌ها، طرح‌بندی‌ها و اندازه‌های مختلف صفحه مشاهده کنید تا چندین دستگاه از جمله تبلت‌ها و تلفن‌های هوشمند را تقلید کنید. میانبر صفحه کلید: Mac OS X (ALT(OPTION)+COMMAND+M)، Windows (CTRL+SHIFT+M)
   • Eyedropper: کد رنگ هگزا را برای پیکسل های انتخاب شده به صورت جداگانه نمایش می دهد.
   • Scratchpad: Scratchpad به شما امکان می دهد قطعه هایی از کد جاوا اسکریپت را از داخل پنجره بازشوی فایرفاکس بنویسید، ویرایش کنید، یکپارچه کنید و اجرا کنید. یک سند جاوا اسکریپت تعاملی را باز کنید که به شما امکان می دهد کد بنویسید و آن را در برابر یک وب سایت آزمایش کنید. میانبر صفحه کلید: (SHIFT+F4)
   • Service Workers: سرویس‌دهندگان برنامه وب خود را اشکال‌زدایی کنید. اطلاعات دقیقی در مورد عملکرد و خطاهای آنها دریافت کنید.
   • منبع صفحه: ابزار اصلی توسعه دهنده مبتنی بر مرورگر، این گزینه به سادگی کد منبع موجود را برای صفحه فعال نمایش می دهد. میانبر صفحه کلید: Mac OS X (COMMAND+U)، Windows (CTRL+U)
   • دریافت ابزارهای بیشتر: مجموعه جعبه ابزار توسعه دهندگان وب را در سایت افزونه های رسمی موزیلا باز می کند که دارای حدود ۱۲ افزونه محبوب مانند به عنوان Firebug و Greasemonkey.

   

Microsoft Edge/Internet Explorer

معمولاً به عنوان F12 Developer Toolsنامیده می شود، ادای احترامی به میانبر صفحه کلید که رابط را از نسخه های قبلی اینترنت اکسپلورر، مجموعه ابزار توسعه در IE11 و Microsoft Edge راه اندازی کرده است. با ارائه گروه بسیار مفیدی از مانیتورها، اشکال‌زداها، شبیه‌سازها و کامپایلرهای در حال پرواز، از زمان آغاز به کار، راه طولانی را پیموده است.

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

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

   

2. هنگامی که منوی کشویی ظاهر می شود، گزینه ای با برچسب Developer Tools را انتخاب کنید.

   

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

   

   • DOM Explorer: به شما امکان می دهد شیوه نامه ها و HTML را در صفحه فعال ویرایش کنید و نتایج اصلاح شده را در حین حرکت ارائه دهید. از عملکرد IntelliSense برای تکمیل خودکار کد در صورت لزوم استفاده می کند. میانبر صفحه کلید: (CTRL+1)
   • کنسول: امکان ارسال اطلاعات رفع اشکال از جمله شمارنده ها، تایمرها، ردیابی ها و پیام های سفارشی شده را از طریق یک API یکپارچه فراهم می کند. همچنین، به شما امکان می دهد کد را به یک صفحه وب فعال تزریق کنید و مقادیر اختصاص داده شده به متغیرهای فردی را در زمان واقعی تغییر دهید. میانبر صفحه کلید: (CTRL+2)
   • Debugger: به شما امکان می دهد نقاط شکست را تنظیم کنید و کد خود را هنگام اجرا، در صورت لزوم خط به خط، اشکال زدایی کنید. میانبر صفحه کلید: (CTRL+3)
   • شبکه: هر درخواست شبکه ای را که توسط مرورگر در حین بارگذاری و اجرای صفحه آغاز شده است شامل جزئیات پروتکل، نوع محتوا، استفاده از پهنای باند و موارد دیگر فهرست می کند. میانبر صفحه کلید: (CTRL+4)
   • عملکرد: جزئیات نرخ فریم، استفاده از CPU و سایر معیارهای مربوط به عملکرد را برای کمک به افزایش سرعت بارگذاری صفحه و سایر فعالیت‌ها بیان می‌کند. میانبر صفحه کلید: (CTRL+5)
   • Memory: به شما کمک می کند نشت حافظه احتمالی در صفحه وب فعلی را با نمایش جدول زمانی استفاده از حافظه همراه با عکس های فوری از بازه های زمانی مختلف جداسازی و تصحیح کنید. میانبر صفحه کلید: (CTRL+6)
   • Emulation: به شما نشان می دهد که چگونه صفحه فعال در وضوح و اندازه های مختلف صفحه نمایش، شبیه سازی تلفن های هوشمند، تبلت ها و سایر دستگاه ها ارائه می شود. همچنین امکان تغییر عامل کاربر و جهت گیری صفحه و همچنین شبیه سازی موقعیت های جغرافیایی مختلف با وارد کردن طول و عرض جغرافیایی را فراهم می کند. میانبر صفحه کلید: (CTRL+7)

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

   

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

   

Apple Safari (فقط Mac)

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

1. Safari را در منوی مرورگر، واقع در بالای صفحه خود انتخاب کنید. وقتی منوی کشویی ظاهر شد، Preferences را انتخاب کنید. همچنین می توانید از میانبر صفحه کلید زیر به جای این آیتم منو استفاده کنید: COMMAND+COMMA(,)

   

2. رابط

   Safari Preferences اکنون باید نمایش داده شود و پنجره مرورگر شما را پوشش دهد. نماد Advanced را که در سمت راست انتهای هدر قرار دارد، انتخاب کنید.

   

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

   

4. Preferences را ببندید.

5. اکنون باید متوجه گزینه جدیدی در منوی مرورگر با نام Develop شوید که بین نشانک ها و Window قرار دارد. روی این آیتم منو کلیک کنید. اکنون باید یک منوی کشویی حاوی گزینه های زیر نمایش داده شود.

   • باز کردن صفحه با: به شما امکان می دهد صفحه وب فعال را در یکی از مرورگرهای دیگری که در حال حاضر در مک شما نصب شده است باز کنید.
   • User Agent: به شما امکان می دهد از بین بیش از دوجین مقدار عامل از پیش تعریف شده کاربر از جمله چندین نسخه کروم، فایرفاکس و اینترنت اکسپلورر انتخاب کنید، و همچنین سفارشی خود را تعریف کنید. رشته.
   • ورود به حالت طراحی واکنش‌گرا: صفحه فعلی را همانطور که در دستگاه‌های مختلف و با وضوح‌های مختلف صفحه نمایش داده می‌شود رندر می‌کند.
   • نمایش بازرس وب: رابط اصلی ابزارهای توسعه دهنده Safari را راه اندازی می کند که معمولاً در پایین صفحه مرورگر شما قرار می گیرد و شامل بخش های زیر است: عناصر، شبکه، منابع، جدول زمانی, Debugger, Storage, Console.
   • نمایش کنسول خطا: همچنین رابط ابزارهای توسعه دهنده را مستقیماً در تب کنسولراه اندازی می کند که خطاها، هشدارها و سایر موارد قابل جستجو را نمایش می دهد. داده‌های گزارش.
   • نمایش منبع صفحه: برگه منابع را باز می کند که کد منبع صفحه فعال را که بر اساس سند طبقه بندی شده است نمایش می دهد.
   • نمایش منابع صفحه: عملکرد مشابه گزینه Show Page Source را انجام می دهد.
   • Show Snippet Editor: پنجره جدیدی را باز می کند که در آن می توانید کد CSS و HTML را وارد کنید و خروجی آن را در لحظه پیش نمایش کنید.
   • Show Extension Builder: امکان ایجاد یا ویرایش پسوندهای سافاری را با CSS، HTML و جاوا اسکریپت فراهم می کند.
   • نمایش ضبط خط زمانی: برگه Timelines را باز می کند و شروع به نمایش درخواست های شبکه، طرح بندی و اطلاعات رندر و همچنین اجرای جاوا اسکریپت در زمان واقعی می کند.
   • کشهای خالی: کل کشی که در حال حاضر روی هارد دیسک شما ذخیره شده را حذف می کند.
   • غیرفعال کردن کش: Safari را از کش جلوگیری می کند به طوری که پس از بارگیری هر صفحه، تمام محتوا از سرور بازیابی می شود.
   • غیرفعال کردن تصاویر: از رندر شدن تصاویر در همه صفحات وب جلوگیری می کند.
   • غیرفعال کردن سبک‌ها: ویژگی‌های CSS را هنگام بارگیری صفحه نادیده می‌گیرد.
   • غیرفعال کردن جاوا اسکریپت: اجرای جاوا اسکریپت را در همه صفحات محدود می کند.
   • غیرفعال کردن برنامه‌های افزودنی: اجرای همه برنامه‌های افزودنی نصب شده در مرورگر را ممنوع می‌کند.
   • غیرفعال کردن هک‌های خاص سایت: اگر سافاری برای رسیدگی صریح به مسائل مربوط به صفحه وب فعال اصلاح شده باشد، این گزینه آن تغییرات را مسدود می‌کند تا صفحه همانطور که قبل از معرفی این تغییرات وجود داشت، بارگیری می شود.
   • غیرفعال کردن محدودیت‌های فایل محلی: به مرورگر اجازه می‌دهد به فایل‌های موجود در دیسک‌های محلی شما دسترسی داشته باشد، اقدامی که به‌طور پیش‌فرض به دلایل امنیتی محدود شده است.
   • غیرفعال کردن محدودیت‌های Cross-Origin: این محدودیت‌ها به طور پیش‌فرض برای جلوگیری از XSS و سایر خطرات احتمالی اعمال می‌شوند. با این حال، اغلب برای اهداف توسعه باید به طور موقت غیرفعال شوند.
   • اجازه دادن جاوا اسکریپت از فیلد جستجوی هوشمند: وقتی فعال باشد، امکان وارد کردن URL ها با جاوا اسکریپت را فراهم می کند: مستقیماً در نوار آدرس گنجانده شده است.
   • در نظر گرفتن گواهینامه های SHA-1 به عنوان ناامن: گواهی های SSL با استفاده از الگوریتم SHA-1 به طور گسترده ای قدیمی و آسیب پذیر در نظر گرفته می شوند.