مجموعه ابزارهای مجتمع برای طراحان وب، توسعه دهندگان و آزمایشکنندگان
علاوه بر بسیاری از سازندگان مرورگر که با استفاده از ابزارهای روزمره به دنبال مرور وب هستند، آنها به توسعه دهندگان وب، طراحان و متخصصان اطمینان کیفیت نیز کمک می کنند که به ایجاد برنامه ها و سایت هایی که کاربران از طریق ادغام ابزار قدرتمند به درستی در مرورگر ها کمک می کنند خودشان
روزهایی هستند که تنها ابزارهای برنامه نویسی و تست موجود در یک مرورگر اجازه می دهد یک کد منبع صفحه را مشاهده کنید و هیچ چیز دیگر. مرورگرهای امروز به شما اجازه می دهد تا از طریق انجام کارهایی مانند اجرای و اشکال زدن جملات جاوا اسکریپت، بازرسی و ویرایش عناصر DOM، نظارت بر ترافیک شبکه در زمان واقعی به عنوان بارگذاری برنامه یا صفحه خود برای شناسایی تنگناها، تجزیه و تحلیل عملکرد CSS، اطمینان از اینکه کد شما استفاده از حافظه بیش از حد و یا چرخه CPU بیش از حد و خیلی بیشتر. از دیدگاه تست، شما می توانید یک برنامه یا صفحه وب را در مرورگرهای مختلف و همچنین در دستگاه ها و سیستم عامل های مختلف از طریق جادوی طراحی پاسخگو و شبیه سازهای داخلی ارائه دهید. بهترین بخش این است که شما می توانید تمام این کار را بدون نیاز به ترک مرورگر خود!
آموزش های زیر به شما کمک می کند از طریق چگونگی دسترسی به این ابزار توسعه دهنده در چندین مرورگر وب محبوب.
گوگل کروم
ابزار توسعهدهنده Chrome به شما امکان میدهد کد را ویرایش و اشکال زدایی کنید، جزء اجزای حسابرسی را به نمایش گذاشتن مسائل مربوط به عملکرد، شبیه سازی صفحه نمایش دستگاههای مختلف از جمله آنهایی که در Android یا iOS اجرا میشوند، و چند عمل مفید دیگر انجام دهید.
- روی دکمه منوی اصلی Chrome کلیک کنید، با سه خط افقی مشخص شده و در گوشه سمت راست بالای مرورگر قرار دارد.
- وقتی منوی کشویی ظاهر می شود، نشانگر ماوس خود را بر روی گزینه ابزارهای بیشتر قرار دهید .
- منوی زیر باید اکنون ظاهر شود. گزینه ای با عنوان Tools Developer را انتخاب کنید. شما همچنین می توانید از این میانبر صفحهکلید زیر استفاده کنید: Chrome OS / Windows ( CTRL + SHIFT + I )، Mac OS X ( ALT (OPTION) + COMMAND + I )
- رابط ابزار برنامهنویسان Chrome اکنون باید نمایش داده شود، همانطور که در این تصویر مثال نشان داده شده است. بسته به نسخه کروم شما، طرح اولیه که می بینید ممکن است کمی متفاوت از آنچه در اینجا ارائه شده متفاوت باشد. مرکز اصلی ابزار توسعه دهنده، که معمولا در قسمت پایین یا سمت راست صفحه قرار دارد، شامل زبانه های زیر است.
عناصر: امکان بررسی CSS و کد HTML و همچنین ویرایش CSS در پرواز را فراهم می کند، و اثرات تغییرات خود را در زمان واقعی مشاهده می کند.
کنسول: کنسول جاوا اسکریپت کروم اجازه می دهد تا به طور مستقیم ورود به سیستم و همچنین اشکالزدایی تشخیصی.
منابع: به شما امکان می دهد کد جاوا اسکریپتی را با استفاده از یک رابط کاربری گرافیکی قدرتمند اشکالزدایی کنید.
شبکه: طبقه بندی و نمایش اطلاعات دقیق در مورد هر یک از عملیات مربوط به برنامه فعال یا صفحه، از جمله درخواست های کل و عنوان های پاسخ و همچنین معیارهای زمان بندی پیشرفته.
گاهشمار: به تجزیه و تحلیل عمیق هر فعالیتی که در مرورگر رخ می دهد، به محض شروع یک درخواست بارگذاری برنامه یا صفحه، امکان می دهد. - علاوه بر این بخش ها، می توانید از طریق نماد >> در سمت راست برگه Timeline نیز به ابزار زیر دسترسی پیدا کنید.
مشخصات: در قسمت پروفایل profileer CPU و profiler profiles شکسته شده است، استفاده جامع از حافظه و زمان اجرای کلی برنامه فعال یا صفحه را فراهم می کند.
امنیت: مهمترین مسائل مربوط به گواهی و سایر مسائل مربوط به امنیت با صفحه فعال یا برنامه است.
منابع: این جایی است که شما می توانید کوکی ها، ذخیره سازی محلی، حافظه پنهان برنامه و سایر منابع داده محلی مورد استفاده در صفحه وب یا برنامه فعلی را بررسی کنید.
حسابرسی: ارائه راه هایی برای بهینه سازی زمان بارگذاری صفحه یا برنامه و عملکرد کلی. - حالت دستگاه به شما امکان می دهد صفحه فعال را در یک شبیه ساز مشاهده کنید که تقریبا دقیقا همانطور که در یکی از دوازده دستگاه ظاهر می شود، از جمله چندین مدل Android و iOS شناخته شده مانند iPad، iPhone و Galaxy سامسونگ. شما همچنین توانایی تقلید از قطعنامه های صفحه نمایش سفارشی را به متناسب با نیاز خاص خود را توسعه و یا تست داده شده است. برای روشن و خاموش کردن حالت دستگاه ، نماد تلفن همراه واقع در سمت چپ برگه عناصر را انتخاب کنید.
- شما همچنین می توانید ظاهر و احساس ابزار توسعه دهنده خود را با اولین کلیک روی دکمه منو نشان داده شده توسط سه نقطه عمودی قرار داده و در سمت راست از زبانه های فوق نشان داده شده سفارشی کنید. از داخل این منوی کشویی، میتوانید اسکله را تغییر دهید، ابزارهای مختلف را نشان دهید یا پنهان کنید و همچنین موارد پیشرفته تر مانند بازرس دستگاه را راه اندازی کنید. شما خواهید دید که رابط کاربری Dev ابزار بسیار قابل تنظیم از طریق تنظیمات موجود در این بخش است.
موزیلا فایرفاکس
بخش وب سازنده فایرفاکس شامل ابزارهایی برای طراحان، توسعه دهندگان و آزمایشکنندگان به طور یکسان از جمله ویرایشگر سبک و eyedropper برای پیکسل هدف قرار دادن است.
توصیه می شود خواندن: Top 25 Greasemonkey و Tampermonkey کاربر اسکریپت
- روی دکمه منو اصلی فایرفاکس کلیک کنید، توسط سه خط افقی نشان داده شده و در گوشه سمت راست بالای پنجره مرورگر قرار دارد.
- هنگامی که منوی کشویی ظاهر می شود، آیکون با نام Developer را انتخاب کنید. منوی Web Developer اکنون باید نمایش داده شود که حاوی گزینه های زیر باشد. متوجه خواهید شد که اکثر آیتم های منو دارای کلید های میانبر در ارتباط با آنها هستند.
Toggle Tools: رابط ابزار توسعه دهنده را نشان می دهد یا پنهان می کند، معمولا در پایین پنجره مرورگر قرار دارد. کلید میانبر: Mac OS X ( ALT (OPTION) + COMMAND + I )، ویندوز ( CTRL + SHIFT + I )
Inspector: به شما اجازه می دهد تا از طریق اشکال زدایی از راه دور بازرسی و یا تغییر تنظیمات CSS و کد HTML در صفحه فعال و همچنین در دستگاه قابل حمل. میانبر صفحه کلید: Mac OS X ( ALT (OPTION) + COMMAND + C )، ویندوز ( CTRL + SHIFT + C )
کنسول وب: به شما امکان می دهد تا عبارت های جاوااسکریپت را درون صفحه فعال اجرا کنید و همچنین مجموعه ای متنوع از داده های ورودی را شامل هشدارهای امنیتی، درخواست های شبکه، پیام های CSS و موارد دیگر را مرور کنید. میانبر صفحه کلید: Mac OS X ( ALT (OPTION) + COMMAND + K )، ویندوز ( CTRL + SHIFT + K )
Debugger: Debugger جاوا اسکریپت به شما امکان می دهد با تنظیم نقطه های شکستن، بازرسی گره های DOM، منابع خارجی سیاه جعبه سیاه و غیره به نقص ها و نقص های آن بپردازید. همانطور که در مورد بازرس هم هست ، این ویژگی همچنین از اشکالزدایی از راه دور پشتیبانی می کند. میانبر صفحه کلید: Mac OS X ( ALT (OPTION) + COMMAND + S )، ویندوز ( CTRL + SHIFT + S)
سبک ویرایشگر: به شما اجازه می دهد که شیوه های جدید ایجاد کنید و آنها را با صفحه وب فعال ترکیب کنید یا برگه های موجود را ویرایش کنید و تست کنید که چگونه تغییرات شما در یک مرورگر با یک کلیک انجام می شود. میانبر صفحه کلید: Mac OS X، ویندوز ( SHIFT + F7 )
عملکرد: تجزیه و تحلیل دقیق عملکرد شبکه صفحه فعال، داده های فریم، زمان اجرای جاوا اسکریپت و وضعیت، رنگ چشمک زدن، و خیلی بیشتر فراهم می کند. میانبر صفحه کلید: Mac OS X، ویندوز ( SHIFT + F5 )
شبکه: هر درخواست شبکه ای که توسط مرورگر به همراه روش متناظر، دامنه محدوده، نوع، اندازه و زمان سپری شده آغاز شده است. میانبر صفحه کلید: Mac OS X ( ALT (OPTION) + COMMAND + Q )، ویندوز ( CTRL + SHIFT + Q )
نوار ابزار برنامه نویس: یک مترجم فرمان خط تعاملی را باز می کند. برای لیستی از تمام دستورات موجود و نحو مناسب آنها، به مترجم کمک کنید. میانبر صفحه کلید: Mac OS X، ویندوز ( SHIFT + F2 )
WebIDE: توانایی ایجاد و اجرای برنامه های وب را از طریق یک دستگاه واقعی که در حال اجرا در سیستم عامل فایرفاکس یا از طریق سیستم شبیه ساز فایرفاکس می باشد، فراهم می کند. میانبر صفحه کلید: Mac OS X، ویندوز ( SHIFT + F8 )
کنسول مرورگر: عملکرد مشابهی را به عنوان کنسول وب ارائه می دهد (نگاه کنید به بالا). با این حال، تمام داده ها برای تمام برنامه های فایرفاکس (از جمله پسوند ها و توابع سطح مرورگر) در مقایسه با فقط صفحه وب فعال است. میانبر صفحه کلید: Mac OS X ( SHIFT + COMMAND + J )، ویندوز ( CTRL + SHIFT + J )
Responsive Design View: به شما اجازه می دهد تا بلافاصله یک صفحه وب را در قطعنامه های مختلف، پوسته ها و اندازه صفحه نمایش به منظور تقلید چندین دستگاه از جمله قرص ها و گوشی های هوشمند مشاهده کنید. میانبر صفحه کلید: Mac OS X ( ALT (OPTION) + COMMAND + M )، ویندوز ( CTRL + SHIFT + M )
Eyedropper: کد رنگ شش رنگ را برای پیکسل های انتخاب شده به صورت جداگانه نشان می دهد.
Scratchpad : امکان ارسال، نقاشی، ادغام و اجرای قطعه کد جاوا اسکریپت را از داخل فایرفاکس پاپ آپ می دهد. میانبر صفحه کلید: Mac OS X، ویندوز ( SHIFT + F4 )
منبع صفحه: ابزار اصلی مبتنی بر مرورگر مبتنی بر این گزینه به سادگی کد منبع موجود برای صفحه فعال را نمایش می دهد. میانبر صفحه کلید: Mac OS X ( COMMAND + U )، ویندوز ( CTRL + U )
دریافت ابزارهای بیشتر: مجموعه ابزار جعبه ابزار Web Developer را در سایت رسمی افزونه های موزیلا باز می کند، شامل دوازده افزونه های محبوب مانند Firebug و Greasemonkey است.
مایکروسافت لبه / اینترنت اکسپلورر
به طور معمول به عنوان ابزار توسعه دهنده F12 ، به عنوان میانجی از میانبر صفحه کلید که رابط کاربری را از نسخه های قبلی اینترنت اکسپلورر راه اندازی کرده اید، مجموعه ابزار dev در IE11 و مایکروسافت Edge از زمان آغاز به کار خود با ارائه یک گروه بسیار مفید مانیتور، debuggers، شبیه ساز، و کامپایلر در پرواز.
- روی منوی Action های بیشتر کلیک کنید، توسط سه نقطه نشان داده شده و در گوشه سمت راست بالای پنجره مرورگر قرار دارد. هنگامی که منوی کشویی ظاهر می شود، گزینه گزینه F12 Developer Tools را انتخاب کنید . همانطور که قبلا هم ذکر شد، شما می توانید از طریق میانبر صفحه کلید F12 به ابزارها دسترسی پیدا کنید.
- اکنون رابط کاربری توسعه باید به طور معمول در پایین پنجره مرورگر نمایش داده شود. ابزارهای زیر در دسترس هستند، هر کدام با کلیک روی برگه مربوطه یا با استفاده از میانبر میانبر همراه می شوند.
DOM Explorer: به شما اجازه می دهد که شیوه نامه ها و HTML را در صفحه فعال ویرایش کنید و نتیجه های اصلاح شده را به همان ترتیب انجام دهید. با استفاده از قابلیت IntelliSense برای تکمیل خودکار کد که در آن قابل اجرا است. میانبر صفحه کلید: (CTRL + 1)
کنسول: توانایی ارائه اطلاعات خطایابی از جمله شمارنده، تایمر، ردیابی و پیام های سفارشی را از طریق یک API یکپارچه فراهم می کند. همچنین، به شما اجازه می دهد کد را به یک صفحه وب فعال و مقادیر اختصاص داده شده به متغیرهای خاص در زمان واقعی تغییر دهید. میانبر صفحه کلید: (CTRL + 2)
اشکال زدایی : به شما اجازه می دهد نقطه توقف و کد خود را اشکال زدایی در حالی که آن را اجرا، خط به خط در صورت لزوم. میانبر صفحه کلید: (CTRL + 3)
شبکه: لیست هر درخواست شبکه ای که توسط مرورگر در طول بارگذاری و اجرای صفحه از جمله جزئیات پروتکل، نوع محتوا، استفاده از پهنای باند و خیلی موارد دیگر آغاز شده است. میانبر صفحه کلید: (CTRL + 4)
عملکرد: جزئیات فریم نرخ، استفاده از CPU، و دیگر معیارهای مربوط به عملکرد به شما کمک کند سرعت بار بار صفحه و فعالیت های دیگر را افزایش دهد. میانبر صفحه کلید: (CTRL + 5)
حافظه: با نمایش یک جدول زمانی مصرف حافظه همراه با عکسهای فوری از فواصل زمانی مختلف، به شما امکان می دهد نشت حافظه احتمالی را در صفحه وب فعلی جدا و اصلاح کنید. میانبر صفحه کلید: (CTRL + 6)
شبیه سازی: نشان می دهد که چگونه صفحه فعال در قطعنامه های مختلف و اندازه صفحه نمایش، تقلید از گوشی های هوشمند، قرص و سایر دستگاه ها. همچنین توانایی تغییر عامل کاربر و جهت گیری صفحه را فراهم می کند، همچنین شبیه سازی geolocations های مختلف با وارد کردن عرض و طول و عرض جغرافیایی. میانبر صفحه کلید: (CTRL + 7) - برای نمایش کنسول در حالی که در هر یک از ابزارهای دیگر با کلیک بر روی دکمه مربع با براکت راست در داخل آن، در گوشه بالا سمت راست ابزار رابط توسعه است.
- برای جدا کردن، رابط ابزار توسعه، بنابراین آن را به یک پنجره جداگانه، بر روی دکمه نشان داده شده توسط دو مستطیل آبشار است و یا از میانبر صفحه کلید زیر استفاده کنید: CTRL + P. با فشار دادن CTRL + P یک بار دیگر می توانید ابزارها را در مکان اصلی خود قرار دهید.
اپل سافاری (فقط OS X)
مجموعه ابزارهای مختلف dev وسیع از جامعه برنامه نویس بزرگ است که از طراحی مک و مکینتاش برای آنها استفاده می کند. علاوه بر کنسول قدرتمند و ویژگی های ورود و خروج سنتی، یک حالت طراحی پاسخگو و ابزار برای ایجاد پسوندهای مرورگر خود نیز ارائه شده است.
- روی مرورگر Safari در منوی مرورگر، واقع در بالای صفحه خود کلیک کنید. هنگامی که منوی کشویی ظاهر می شود، تنظیمات را انتخاب کنید. همچنین می توانید از میان میانبرهای صفحه کلید زیر استفاده کنید: COMMAND + COMMA (،)
- رابط کاربری Preferences Safari در حال حاضر باید نمایش داده شود، پنجره مرورگر شما را پوشانده است. با کلیک بر روی آیکون پیشرفته ، واقع در سمت راست سمت چپ هدر قرار دارد.
- تنظیمات پیشرفته اکنون باید قابل مشاهده باشد. در پایین این صفحه یک گزینه با نام Show Develop منو در نوار منو همراه با جعبه چک است. اگر علامت چک در کادر نمایش داده نشود، روی آن یکبار کلیک کنید تا جای دیگری را جایگزین کنید.
- با کلیک کردن روی قرمز "x" که در گوشه سمت چپ بالا قرار دارد، رابط کاربری تنظیمات را ببندید.
- اکنون باید یک گزینه جدید در منوی مرورگر به نام Develop ایجاد کنید که بین میانبرها و پنجره قرار دارد . روی این آیتم منو کلیک کنید منوی کشویی باید اکنون نمایش داده شود که شامل گزینه های زیر است.
باز کردن صفحه با: به شما اجازه می دهد که صفحه وب فعال را در یکی از مرورگرهای دیگر که در حال حاضر در Mac نصب شده اند باز کنید.
عامل کاربر: به شما اجازه می دهد تا از بیش از 12 مقدار از مقادیر عامل کاربر از پیش تعریف شده، از جمله چندین نسخه از Chrome، Firefox و Internet Explorer انتخاب کنید و رشته سفارشی خود را نیز تعریف کنید.
حالت Responsive Design را وارد کنید: صفحه فعلی را نشان می دهد همانطور که در دستگاه های مختلف و در قطعنامه های مختلف صفحه نمایش ظاهر می شود.
Show Web Inspector: رابط کاربری اصلی برای ابزار Dev Safari را که معمولا در پایین صفحه مرورگر شما قرار دارد قرار می دهد و شامل بخش های زیر است: Elements ، Network ، Resources ، Timelines ، Debugger ، Storage ، Console .
نمایش کنسول خطا: همچنین ابزار رابط ابزار Dev را به طور مستقیم به زبانه کنسول که خطاهای، هشدارها و دیگر دادههای ورودی قابل جستجو را نمایش میدهد، راهاندازی میکند.
نمایش منبع صفحه: برگه منابع را باز می کند که کد منبع را برای صفحه فعال طبقه بندی شده توسط سند نمایش می دهد.
نمایش منابع صفحه: عملکرد مشابه با گزینه گزینه نمایش صفحه را انجام می دهد.
Show Snippet Editor: پنجره جدیدی باز می شود که می توانید کد CSS و کد HTML را وارد کنید، پیش نمایش خروجی آن را در پرواز کنید.
Show Extension Builder: توانایی ایجاد یا ویرایش پسوندهای سافاری با CSS، HTML و JavaScript را فراهم می کند.
نمایش جدول زمانی ضبط: برگه جدول زمانی را باز می کند و شروع به نمایش درخواست های شبکه، طرح بندی و رندر اطلاعات و همچنین اجرای جاوا اسکریپت در زمان واقعی می کند.
مخازن خالی: تمام حافظه پنهان که در حال حاضر در هارد دیسک شما ذخیره می شود را حذف می کند.
غیرفعال کردن مخازن ذخیره شده: توقف از Safari از ذخیره سازی به طوری که تمام محتوا از سرور بارگیری بر اساس هر بار.
غیرفعال کردن تصاویر: جلوگیری از رندر کردن تصاویر در تمام صفحات وب.
غیرفعال کردن استایلها: هنگامی که یک صفحه بارگذاری می شود، ویژگی های CSS را نادیده می گیرد.
غیرفعال کردن جاوا اسکریپت: محدود کردن اجرای جاوا اسکریپت در تمام صفحات.
غیر فعال کردن برنامه های افزودنی: تمام پسوندهای نصب شده را در حال اجرا در مرورگر ممنوع می کند.
هک های اختصاصی سایت غیرفعال: اگر سافاری اصلاح شده باشد تا به صراحت موضوع (ها) مربوط به صفحه وب فعال را حل کند، این گزینه این تغییرات را مسدود خواهد کرد تا بارگذاری صفحه به همان ترتیب قبل از این تغییرات ایجاد شود.
غیر فعال کردن محدودیت های فایل محلی: به مرورگر اجازه می دهد فایل های موجود بر روی دیسک های محلی شما را داشته باشد، که به دلایل امنیتی به دلایل امنیتی به طور پیش فرض محدود شده است.
غیر فعال کردن محدودیت های متقابل: این محدودیت ها به طور پیش فرض برای جلوگیری از XSS و دیگر خطرات بالقوه قرار می گیرد. با این حال، آنها اغلب باید به طور موقت برای اهداف توسعه غیر فعال شوند.
جاوا اسکریپت را از فیلد جستجوی هوشمند به جا بگذارید: هنگامی که فعال شود، امکان وارد کردن URL با جاوا اسکریپت را فراهم می کند : مستقیما به نوار آدرس وارد شده است.
گواهینامه های SHA-1 را به عنوان ناامن تلقی کنید: گواهینامه های SSL با استفاده از الگوریتم SHA-1 به طور گسترده ای در نظر گرفته شده اند که از نظر تاریخی و آسیب پذیری هستند.