ابزارهای توسعه وب
ابزارهای توسعه وب (اغلب به اختصار ابزار توسعه ) به توسعه دهندگان وب اجازه می دهد تا وب سایت های خود را آزمایش، اصلاح و اشکال زدایی کنند . آنها با سازندگان وب سایت و محیط های توسعه یکپارچه (IDE) متفاوت هستند زیرا به ایجاد مستقیم یک صفحه وب کمک نمی کنند، بلکه ابزارهایی هستند که برای آزمایش رابط کاربری یک وب سایت یا برنامه وب استفاده می شوند..
ابزارهای توسعه وب به عنوان افزونه های مرورگر یا ویژگی های داخلی در مرورگرهای وب مدرن ارائه می شوند. مرورگرهایی مانند گوگل کروم ، فایرفاکس ، سافاری ، مایکروسافت اج و اپرا دارای ابزارهای داخلی برای کمک به توسعه دهندگان وب هستند و بسیاری از افزونه های اضافی را می توان در مراکز دانلود افزونه مربوطه آنها یافت.
ابزارهای توسعه وب به توسعه دهندگان اجازه می دهد تا با انواع فناوری های وب، از جمله HTML ، CSS ، DOM ، جاوا اسکریپت ، و سایر اجزایی که توسط مرورگر وب مدیریت می شوند، کار کنند.
تاریخچه و پشتیبانی
ویرایشتوسعه دهندگان اولیه وب به صورت دستی وب سایت های خود را با اظهار نظر کد و استفاده از توابع جاوا اسکریپت اشکال زدایی می کردند . یکی از اولین ابزارهای اشکال زدایی مرورگر که وجود داشت افزونه فایرباگ موزیلا بود که دارای بسیاری از ویژگی های اصلی کنونی ابزارهای توسعه دهنده امروزی بود که منجر به محبوبیت فایرفاکس در بین توسعه دهندگان آن زمان شد. موتور WebKit سافاری نیز ابزارهای توسعه‌دهنده یکپارچه خود را در آن دوره معرفی کرد، که در نهایت مبنایی برای ابزارهای کنونی سافاری و کروم شد.
یک نوار ابزار توسعه دهنده برای اینترنت اکسپلورر 6 و 7 منتشر کرد. و سپس آنها را از نسخه 8 به بعد در مرورگر ادغام کرد.در سال 2017، موزیلا Firebug را به نفع ابزارهای توسعه‌دهنده یکپارچه متوقف کرد.
امروزه همه مرورگرهای وب مدرن از ابزارهای توسعه دهنده وب پشتیبانی می کنند که به طراحان و توسعه دهندگان وب اجازه می دهد تا به آرایش صفحات خود نگاه کنند. اینها همه ابزارهایی هستند که در مرورگر تعبیه شده اند و نیازی به ماژول یا پیکربندی اضافی ندارند.
- فایرفاکس – F12ابزار توسعه دهنده فایرفاکس را باز می کند.
- گوگل کروم و اوپرا _ ابزارهای توسعه دهنده.
- ماکروسافت اج _ F12 ابزارهای توسعه دهنده وب را باز می کند.مایکروسافت دارای ویژگی های اضافی است که در کروم خط اصلی گنجانده نشده است.
- سافاری _ بازرس وب سافاری باید از قسمت تنظیمات آن فعال شود.
امکانات
ویرایشابزارهای توسعه‌دهنده وب داخلی در مرورگر معمولاً با نگه داشتن ماوس روی یک مورد در یک صفحه وب و انتخاب گزینه "Inspect Element" یا گزینه مشابه از منوی زمینه قابل دسترسی هستند. متناوباF12کلید یکی دیگر از میانبرهای رایج است.[۱]
HTML و DOM
ویرایشنمایشگر و ویرایشگر HTML و DOM معمولاً در ابزارهای توسعه وب داخلی گنجانده شده است. تفاوت بین نمایشگر HTML و DOM و ویژگی view source در مرورگرهای وب این است که نمایشگر HTML و DOM به شما اجازه می دهد تا DOM را همانطور که رندر شده است ببینید و همچنین به شما امکان می دهد تغییراتی در HTML و DOM ایجاد کنید و مشاهده کنید تغییر در صفحه پس از ایجاد تغییر منعکس می شود.[۲][۳][۴]
علاوه بر انتخاب و ویرایش، پنل‌های عناصر HTML معمولاً ویژگی‌های شی DOM مانند بعد نمایش و ویژگی‌های CSS را نیز نمایش می‌دهند. [۵]
فایرفاکس، سافاری، کروم و اج همگی به کاربران این امکان را می‌دهند که سند را در دستگاه تلفن همراه با تغییر ابعاد ویوپورت و تراکم پیکسل شبیه‌سازی کنند.[۶]علاوه بر این، کروم همچنین گزینه ای برای شبیه سازی کوررنگی برای صفحه دارد.[۷]
دارایی های صفحه وب، منابع و اطلاعات شبکه
ویرایشصفحات وب معمولاً بارگیری می شوند و به محتوای اضافی در قالب تصاویر، اسکریپت ها، فونت ها و سایر فایل های خارجی نیاز دارند. ابزارهای توسعه وب همچنین به توسعه دهندگان این امکان را می دهند که منابع بارگذاری شده و موجود در صفحه وب را در فهرستی از ساختار درختی بررسی کنند، و ظاهر شیوه نامه ها را می توان در زمان واقعی آزمایش کرد. [۸] [۹]
ابزارهای توسعه وب همچنین به توسعه دهندگان این امکان را می دهند که اطلاعات مربوط به استفاده از شبکه را مشاهده کنند، مانند مشاهده زمان بارگذاری و استفاده از پهنای باند و هدرهای HTTP که ارسال و دریافت می شوند. [۱۰] توسعه دهندگان می توانند درخواست های شبکه را دستکاری کرده و مجددا ارسال کنند.
پروفایل و حسابرسی
ویرایشنمایه سازی به توسعه دهندگان این امکان را می دهد که اطلاعات مربوط به عملکرد یک صفحه وب یا برنامه وب را دریافت کنند. با استفاده از این اطلاعات، توسعه دهندگان می توانند عملکرد اسکریپت های خود را بهبود بخشند. ویژگی‌های حسابرسی ممکن است پس از تجزیه و تحلیل یک صفحه، پیشنهاداتی را برای توسعه‌دهندگان برای بهینه‌سازی برای کاهش زمان بارگذاری صفحه و افزایش پاسخ‌دهی ارائه دهد. ابزارهای توسعه وب معمولاً همچنین سابقه ای از زمان لازم برای ارائه صفحه، میزان استفاده از حافظه و انواع رویدادهایی که در حال وقوع هستند را ارائه می دهند. [۱۱] [۱۲]
این ویژگی ها به توسعه دهندگان اجازه می دهد تا صفحه وب یا برنامه وب خود را بهینه کنند. [۱۳]
اشکال زدایی جاوا اسکریپت
ویرایشجاوا اسکریپت معمولا در مرورگرهای وب استفاده می شود.[۱۴]بزارهای توسعه وب معمولاً شامل یک پانل اشکال‌زدا برای اسکریپت‌ها می‌شوند که به توسعه‌دهندگان اجازه می‌دهد تا عبارات ساعت، نقاط شکست، پشته تماس را مشاهده کنند، و در حین اشکال‌زدایی جاوا اسکریپت، مکث، ادامه دهند و قدم بگذارند.
معمولاً یک کنسول نیز گنجانده شده است که به توسعه دهندگان اجازه می دهد تا دستورات جاوا اسکریپت و توابع فراخوانی را تایپ کنند یا خطاهایی را که ممکن است در حین اجرای یک اسکریپت با آن مواجه شده اند مشاهده کنند.[۱۴]
برنامه های افزودنی
ویرایشdevtools API به افزونه های مرورگر اجازه می دهد تا ویژگی های خود را به ابزارهای توسعه دهندگان اضافه کنند.
همچنین ببینید
ویرایشمنابع
ویرایش- ↑ "What are browser developer tools?". MDN. Mozilla Corporation. Retrieved 2023-07-05.
- ↑ Chinnathambi, Kirupa (6 July 2016). JavaScript Absolute Beginner's Guide. Pearson Education. ISBN 978-0-134-49862-1.
- ↑ Odell, Den (2014). "Browser Developer Tools". Pro JavaScript development: coding, capabilities, and tooling. New York, NY: Apress / Springer. pp. 423–437. ISBN 978-1-4302-6269-5.
- ↑ "What are browser developer tools?". MDN. Mozilla Corporation. Retrieved 2023-07-05
- ↑ "Inspect and Edit Pages and Styles | Tools for Web Developers". Google Developers (به انگلیسی). Retrieved 2018-09-06.
- ↑ "What are browser developer tools?". MDN. Mozilla Corporation. Retrieved 2023-07-05
- ↑ Lyles, Taylor (11 March 2020). "Google now allows devs to view visual limitations in its Chrome dev tools". The Verge. Retrieved 13 February 2024
- ↑ "Resources Panel - Google Chrome". Chrome Developers. Retrieved 2018-09-06.
- ↑ "Firefox Debuts New Developer Toolbar". The Mozilla Blog (به انگلیسی). Retrieved 2018-09-06.
- ↑ "Measure Resource Loading Times | Tools for Web Developers". Google Developers (به انگلیسی). Retrieved 2018-09-06.
- ↑ "Profiles Panel - Google Chrome". developers.google.com. Retrieved 2018-09-06.
- ↑ McCormick, Libby (3 March 2016). "F12 developer tools console error messages (Windows)". msdn.microsoft.com (به انگلیسی). Retrieved 2018-09-06.
- ↑ McCormick, Libby (3 March 2016). "Using the Profiler Tool to analyze the performance of your code (Windows)". msdn.microsoft.com (به انگلیسی). Retrieved 2018-09-06.
- ↑ ۱۴٫۰ ۱۴٫۱ Chinnathambi, Kirupa (6 July 2016). JavaScript Absolute Beginner's Guide. Pearson Education. ISBN 978-0-134-49862-1.