Google I/O 2016 یک بسته بندی است. DevTools حضور پررنگی در I/O داشت، از جمله سخنرانی Paul Bakaus، Paul Irish و Seth Thompson که آینده DevTools را ترسیم می‌کرد. برای کسب اطلاعات بیشتر در مورد اینکه DevTools در سال 2016 و بعد از آن به کجا می رود، ویدیوی زیر را ببینید یا ادامه دهید.
تالیف
DevTools قصد دارد هر مرحله از چرخه عمر توسعه وب را آسان تر کند. احتمالاً می‌دانید که DevTools می‌تواند به شما در اشکال‌زدایی یا نمایه کردن یک وب‌سایت کمک کند، اما ممکن است ندانید چگونه از آن برای کمک به نوشتن یک سایت استفاده کنید. منظور ما از "تألیف" عمل ایجاد سایت است. یکی از اهداف در آینده قابل پیش‌بینی این است که تکرار، آزمایش و شبیه‌سازی سایت خود را در چندین دستگاه برای شما آسان‌تر کند.
حالت دستگاه
تیم DevTools به تکرار تجربه Device Mode، که اولین ارتقای عمده خود را در Chrome 49 دریافت کرد، ادامه می‌دهد. برای مرور کلی به‌روزرسانی‌ها، پست ماه مارس ( یک حالت جدید دستگاه برای اولین دنیای موبایل ) را بررسی کنید. هدف کلی این است که یک گردش کار یکپارچه برای مشاهده و شبیه سازی سایت شما در تمام عوامل شکل ارائه دهد.
در اینجا خلاصه‌ای سریع از برخی به‌روزرسانی‌های Device Mode است که از زمان ارسال مقاله در ماه مارس در Canary منتشر شده است.
هنگامی که یک صفحه را به عنوان یک دستگاه خاص مشاهده می کنید، می توانید با نشان دادن سخت افزار دستگاه در اطراف صفحه خود، بیشتر در این تجربه غوطه ور شوید.
منوی جهت گیری دستگاه به شما امکان می دهد صفحه خود را هنگامی که عناصر مختلف رابط کاربری سیستم، مانند نوار پیمایش و صفحه کلید فعال هستند، مشاهده کنید.
داستان دسکتاپ نیز بهبود یافته است. به لطف ویژگی زوم حالت دستگاه، می‌توانید صفحه‌های دسکتاپ بزرگ‌تر از صفحه‌ای که واقعاً روی آن کار می‌کنید، مانند صفحه‌نمایش 4K (3840 پیکسل در 2160 پیکسل) شبیه‌سازی کنید.
می‌توانید مستقیماً از رابط کاربری حالت دستگاه، به جای اینکه به پنل شبکه بروید، شبکه را کنترل کنید.
منبع تفاوت دارد
وقتی سبک یک سایت را تکرار می کنید، به راحتی می توانید تغییرات خود را از دست بدهید. برای رفع این مشکل، DevTools از نشانه‌های بصری در ناودان شماره خط پانل Sources استفاده می‌کند تا به شما کمک کند تغییرات خود را پیگیری کنید. خطوط حذف شده با خط قرمز مشخص می شوند، خطوط اصلاح شده با رنگ بنفش و خطوط جدید با رنگ سبز مشخص می شوند.
همچنین می‌توانید تغییرات خود را در برگه کشوی Quick Source جدید پیگیری کنید:
برای اولین بار، زبانه Quick Source به شما امکان می دهد همزمان با قوانین CSS خود، روی کد منبع HTML یا جاوا اسکریپت خود تمرکز کنید. همچنین، هنگامی که روی یک ویژگی CSS در پانل Styles کلیک می‌کنید، تب Quick Source به طور خودکار به تعریف منبع می‌پرد و آن را برجسته می‌کند.
آزمایش تفاوت منابع را در Chrome Canary فعال کنید تا امروز آن را امتحان کنید.
ویرایش زنده Sass
در اینجا نگاهی اجمالی به برخی از پیشرفت‌های عمده آینده در گردش کار ویرایش Sass آورده شده است. این ویژگی ها خیلی زود در مرحله آزمایشی هستند. هنگامی که آنها برای امتحان کردن شما آماده شدند، در پست بعدی پیگیری خواهیم کرد.
اساساً، DevTools به شما اجازه می دهد تا متغیرهای Sass را همانطور که همیشه امیدوار بودید مشاهده و ویرایش کنید. روی مقداری که از یک متغیر Sass کامپایل شده است کلیک کنید، تب جدید Quick Sources به تعریف متغیر می‌رود.
هنگام ویرایش مقداری که از یک متغیر Sass کامپایل شده است، ویرایش شما متغیر Sass را به روز می کند، نه فقط ویژگی فردی را که انتخاب کرده اید.
برنامه های وب پیشرفته
به فهرست گفتگوهای وب و کروم در Google I/O 2016 نگاه کنید و موضوع بزرگی را در دنیای توسعه وب مشاهده خواهید کرد: برنامه های وب پیشرو .
با ظهور مدل برنامه وب پیشرفته، DevTools به سرعت در حال تکرار است تا ابزارهای مورد نیاز توسعه دهندگان را برای ایجاد برنامه های وب پیشرفته پیشرفته فراهم کند. ما متوجه شدیم که ساختن و اشکال زدایی این برنامه های کاربردی مدرن اغلب با الزامات منحصر به فردی همراه است، بنابراین DevTools یک پانل کامل را به توسعه برنامه های وب پیشرفته اختصاص داده است. Chrome Canary را باز کنید و خواهید دید که پنل Resources با پنل Application جایگزین شده است. همه عملکردهای قبلی از پنل منابع هنوز وجود دارد. فقط چند صفحه جدید وجود دارد که به طور خاص برای توسعه برنامه وب پیشرو طراحی شده اند:
صفحه Manifest یک نمایش بصری از فایل مانیفست برنامه را به شما می دهد. از اینجا می‌توانید گردش کار «افزودن به صفحه اصلی» را به صورت دستی فعال کنید.
بخش Service Workers به شما امکان می دهد سرویس کار ثبت شده برای صفحه فعلی را بررسی کرده و با آن تعامل داشته باشید.
و پنجره Clear Storage به شما امکان می دهد انواع داده ها را پاک کنید تا بتوانید صفحه ای را با یک صفحه تمیز مشاهده کنید.
جاوا اسکریپت
عبور از مرز بین frontend و backend بخش دشواری از توسعه وب Fullstack است. اگر در حین اشکال‌زدایی یک برنامه وب، متوجه شدید که باطن شما کد وضعیت 500 را برمی‌گرداند، عملاً به حد فایده DevTools رسیده‌اید، که از شما می‌خواهد زمینه‌ها را تغییر دهید و محیط توسعه باطن خود را برای رفع اشکال فعال کنید.
با این حال، با Backendهایی که در Node.js نوشته شده اند، مرزهای بین frontend و backend در حال محو شدن هستند. از آنجایی که Node.js روی موتور جاوا اسکریپت V8 (همان موتوری که Google Chrome را تامین می‌کند) اجرا می‌شود، می‌خواهیم اشکال زدایی Node.js را از DevTools ممکن کنیم. به لطف تیم‌های V8، DevTools و Google Cloud Platform برای Node.js، اکنون می‌توانید از تمام ویژگی‌های اشکال‌زدایی قدرتمند DevTools برای بررسی درونی یک برنامه Node.js استفاده کنید. این عملکرد قبلاً به ساخت‌های شبانه Node.js رسیده است، اگرچه ادغام DevTools هنوز قبل از گنجاندن در نسخه اصلی در حال صیقل دادن است. اشکال زدایی برنامه Node.js از DevTools روزی به سادگی عبور از node --inspect app.js و اتصال از DevTools در هر پنجره کروم خواهد بود.
اگرچه ابزارهای موجود مانند Node Inspector تجربیات اشکال‌زدایی مبتنی بر رابط کاربری گرافیکی را ارائه می‌کنند، ادغام Node.js DevTools جدید با آخرین ویژگی‌های اشکال‌زدایی DevTools مانند اشکال‌زدایی async stack، blackboxing و پشتیبانی ES6 به‌روز خواهد ماند.