Chrome DevTools به سرعت حرکت می‌کند و ما می‌خواهیم توجه شما را به برخی عملکردها و بهبودهایی که برای چند مؤلفه معرفی کرده‌ایم جلب کنیم. یعنی، ما در مورد برخی تغییرات UI، پروفایل JS با وضوح بالا و ویژگی‌های جدید Workspace صحبت خواهیم کرد.
- اکنون پروفایل با وضوح بالا به دقت 0.1 میلی ثانیه می رسد
- نوار ابزار به بالای Devtools و Overrides به کشوی کنسول منتقل شد
- فضاهای کاری چندین ویژگی را برای پشتیبانی از افزودن/حذف/جستجوی فایل ها اضافه کردند
پروفایل با وضوح بالا
پروفایل CPU یک ویژگی بسیار مفید برای مشاهده میزان کارآمدی جاوا اسکریپت شما است. علاوه بر نمای سنتی نمایه، ما در تابستان امسال یک نمودار شعله را معرفی کردیم که به صورت بصری پردازش جاوا اسکریپت صفحه را در طول زمان نشان می‌دهد. با استفاده از آن می توان به راحتی مشاهده کرد که پشته تماس شما چقدر عمیق است و همچنین مدت زمان پردازش عملکردهای جداگانه چقدر طول می کشد.
تا همین اواخر، هر دو نمایش سنتی سنگین (از پایین به بالا) و درخت (از بالا به پایین) و همچنین نمودار شعله، فرآیندها را فقط با دقت 1 میلی ثانیه نشان می دادند. برای اکثر برنامه ها، این خوب است. با این حال، اگر روی چیزی کار می‌کنید که سرعت در آن واقعاً در رابط کاربری مهم است، مانند یک بازی - وضوح 1 میلی‌ثانیه ممکن است برای اینکه چه چیزی باعث کندی سایت شما می‌شود یا اینکه رابط کاربری شما تأخیر به نظر می‌رسد، برای به دست آوردن نتایج معنی‌دار خیلی بزرگ باشد. برای فعال کردن پروفایل با وضوح بالا (در حال حاضر فقط قناری):
- DevTools Settings را باز کنید.
- در برگه عمومی ، در قسمت Profiler ، پروفایل CPU با وضوح بالا را روشن کنید.
در اینجا نمونه‌ای از نمودار شعله‌ای است که در نمایه‌سازی معمولی و با وضوح بالا مشاهده می‌شود، جایی که نمایه‌ای را در حال بارگیری صفحه اصلی HTML5Rocks.com می‌کنیم:
با وضوح معمولی پروفایل، زمان پردازش همیشه به میلی‌ثانیه بعدی گرد می‌شود، بنابراین فرآیندی که فقط 0.1 میلی‌ثانیه یا کمتر طول می‌کشد، همچنان به‌عنوان 1.0 میلی‌ثانیه گزارش می‌شود، و سایر فرآیندها ممکن است اصلاً در پشته تماس نشان داده نشوند.
نمایه سازی با وضوح بالا هزینه زیادی در جاوا اسکریپت VM دارد، به همین دلیل است که به طور پیش فرض خاموش است. در حالی که مطمئناً از وضوح نمایه معمولی خنک تر به نظر می رسد، توصیه می کنیم فقط در صورتی از آن استفاده کنید که واقعاً به دقت نیاز دارید.
بهبود رابط کاربری Devtools
در حالی که همیشه چیزهای جدیدی در Canary ارائه می شود، ما می خواهیم توجه شما را به چند تغییر عمده در رابط کاربری جلب کنیم: دکمه هایی که به طور کلی به بالای رابط کاربری افزایش می یابند، صفحه های ناوبری و اطلاعات Timeline، و جابجایی Overrides به کشوی کنسول.
ابتدا بیایید نگاهی بیندازیم که از کجا آمده ایم. از آنجا که به هر حال ما در مورد Timeline صحبت می کنیم، سعی می کنم دو پرنده اول را با یک جفت اسکرین شات بکشم. در اینجا جدول زمانی در Chrome (پایدار) در حال حاضر چگونه به نظر می رسد:
و در اینجا جدول زمانی به نظر می رسد در حال حاضر.
به موارد زیر توجه کنید:
- اکنون نوار ابزارها و دکمه‌ها همگی در بالای صفحه هستند، هم برای Timeline خاص در سمت چپ و هم برای DevTools عمومی در سمت راست.
- رکوردهای Timeline اکنون ساختار تودرتو در پانل سمت چپ دارند و حتی می توانید از صفحه کلید برای پیمایش در آنها استفاده کنید. علاوه بر استفاده از کلیدهای بالا و پایین برای اسکرول بالا و پایین، می توانید از کلیدهای چپ و راست برای باز و بسته کردن رکوردهای تودرتو نیز استفاده کنید.
- جزئیات زمان اکنون در پانل سمت راست برای هر ورودی که انتخاب کرده اید نمایش داده می شود. (همچنین می توانید ماوس را روی سایر ورودی ها نگه دارید تا اطلاعات آنها را دریافت کنید.)
حالا بیایید نگاهی به کشوی کنسول بیندازیم. برای باز کردن کشوی کنسول، Escape از داخل DevTools را فشار دهید یا دکمه کشوی کنسول را فشار دهید 
و کشو از پایین بالا می رود.
به‌طور پیش‌فرض، تب‌های Console و Search را در آنجا خواهید داشت. برای دسترسی به عملکردی که قبلاً به عنوان Overrides شناخته می‌شد، تنظیمات DevTools را باز کنید و کادر کنار «نمایش نمای شبیه‌سازی در کشوی کنسول» را علامت بزنید. کادر تنظیمات را ببندید و یک تب Emulation در کشوی کنسول مانند تصویر اینجا خواهید داشت:
و شما می توانید تمام شبیه سازی خود را در آنجا انجام دهید.
دلیل این تغییر این است که قبل از این، برای تغییر موارد شبیه‌سازی، باید به تنظیمات وارد و خارج شوید و سپس به عقب برگردید و صفحه خود را مشاهده کنید. اکنون می‌توانید در حین دستکاری استایل‌ها، تغییراتی را در مورد نادیده‌گیری‌های شبیه‌سازی خود انجام دهید.
فضاهای کاری بهبود یافته
فضاهای کاری مخصوصاً ویژگی‌ای است که می‌تواند گردش کار نویسندگی شما را تا حدی ساده‌تر کند، و با این حال، تقریباً آنقدر که شایسته است، مورد علاقه قرار نمی‌گیرد. با Workspaces، به جای آزمایش و ایجاد تغییرات در DevTools و نیاز به کپی و پیست کردن تغییرات خود در فایل های منبع خود، می توانید تغییراتی را در DevTools ایجاد کنید، آنها را در مرورگر مشاهده کنید و آنها را در نسخه محلی دائمی فایل های خود ذخیره کنید. -- همه بدون خروج از Chrome.
اگر هنوز مقاله ابزارهای توسعه‌دهنده کروم انقلاب‌های 2013 را نخوانده‌اید، ادامه دهید و نگاهی به آن بیندازید و سپس به اینجا برگردید تا بدانید که چگونه در چند ماه گذشته این ویژگی‌ها را بهبود بخشیده‌ایم.
افزودن فایل ها آسان تر
در زمان انتشار مقاله Revolutions 2013، ایجاد یک فضای کاری جدید نیاز به افزودن پوشه به فضاهای کاری خود و سپس نگاشت پوشه به یک منبع شبکه داشت. ما این فرآیند را به یک مرحله ساده کرده‌ایم: به سادگی در پانل سمت چپ Sources کلیک راست کرده و Add Folder to Workspace را انتخاب کنید. این شما را وارد یک گفتگوی فایل می کند که در آن می توانید پوشه جدیدی را برای افزودن به Workspaces خود انتخاب کنید. (پوشه برجسته شده فعلی را به Workspaces شما اضافه نمی کند.)
ایجاد و حذف فایل ها
اکنون می‌توانید فایل‌های جدیدی را به فهرست محلی که برای Workspaceها در خود Workspace استفاده می‌کنید، اضافه کنید. به سادگی روی یک پوشه در پنل منابع سمت چپ کلیک راست کرده و New File را انتخاب کنید.
همچنین می توانید فایل ها را از داخل Workspace ها حذف کنید. روی یک فایل در پنل منابع سمت چپ کلیک راست کرده و Delete File را انتخاب کنید.
همچنین می توانید با انتخاب فایل تکراری یک فایل را کپی کنید.
تازه کردن
اکنون که می‌توانید فایل‌های جدید ایجاد کنید (یا فایل‌ها را حذف کنید) مستقیماً در فضاهای کاری، دایرکتوری Sources نیز به‌طور خودکار این فایل‌های جدید را بازخوانی و نمایش می‌دهد. اگر نه، همیشه می‌توانید روی یک پوشه کلیک راست کرده و Refresh را از منوی پاپ‌آپ انتخاب کنید تا اجباری به‌روزرسانی شود.
این همچنین در صورتی مفید است که فایل های باز شده خود را در ویرایشگر دیگری تغییر دهید و بخواهید تغییرات در DevTools نشان داده شوند.
جستجو در میان فایل ها
ما رابط کاربری را برای جستجو در بین فایل‌ها کمی اصلاح کرده‌ایم، و اکنون می‌توانید رشته‌ها را در تمام فایل‌های فضای کاری خود و همچنین همه فایل‌های بارگذاری شده در DevTools جستجو کنید. شما می توانید یک رشته یا یک عبارت معمولی را جستجو کنید، و ما همه موارد را در هر فایل یا صفحه مطابقت می دهیم. برای جستجوی چندین فایل در Workspaces (در حال حاضر در Canary):
- کشوی کنسول را با فشار دادن کلید Escape باز کنید و روی تب Search در کنار کنسول کلیک کنید تا پنجره جستجو باز شود.
یا
Ctrl + Shift + F ( Cmd + Opt + F در Mac) را فشار دهید تا پنجره جستجو باز شود.
- درخواست خود را در کادر Search Sources تایپ کنید و Enter را بزنید. اگر درخواست شما یک عبارت معمولی است یا باید به حروف بزرگ و کوچک حساس باشد، روی کادر مربوطه کلیک کنید.
نادیده گرفتن لیست ها
اگر تعداد زیادی فایل .git یا فایل های README.md داشته باشید که نتایج شما را به هم ریخته است، جستجو در متن فایل ها یا فیلتر کردن نام فایل ها می تواند بسیار خسته کننده باشد.
بنابراین، ما یک ویژگی فهرست نادیده گرفتن را به Workspaces اضافه کرده‌ایم تا بتوانید انواع فایل یا پوشه‌های خاصی را هنگام مشاهده و جستجوی فضای کاری خود حذف کنید.
در اینجا نحوه مشاهده و تغییر فهرست نادیده گرفته شده فعلی در Workspaces آمده است:
- DevTools Settings را باز کنید.
- روی Workspace کلیک کنید.
- در قسمت مشترک ، در کادر الگوی حذف پوشه، می‌توانید الگوها را مشاهده و/یا ویرایش کنید.
ما با این الگوهای حذف جهانی پیش‌فرض ارسال می‌کنیم:
این regex متادیتا را از Git، SVN، Mercurial، فایل‌های پروژه از Eclipse و IntelliJ، OS X DS_Store و فایل‌های Trash و چند مورد دیگر که ارزش نادیده گرفتن دارند مانند حافظه پنهان از Sass را حذف می‌کند. کل پوشه آنها، از جمله کودکان، از رابط کاربری حذف می‌شوند تا در رابط کاربری نشان داده نشوند و هنگام جستجو در فایل‌ها نشان داده نشوند.
فهرست‌های نادیده گرفته مخصوص فضای کاری
برای دقیق تر شدن، همچنین می توانید انتخاب کنید که فایل ها و پوشه ها در فضای کاری خاص خود حذف شوند تا درهم ریختگی در جستجوها کاهش یابد. پوشه های حذف شده نیز در فهرست منابع نمایش داده نمی شوند.
برای حذف کل یک پوشه از فضای کاری خود، روی پوشه در پنل منابع سمت چپ کلیک راست کرده و Exclude Folder را انتخاب کنید. برای دیدن نگاشت ها و پوشه های حذف شده برای یک پوشه فضای کاری معین:
- DevTools Settings را باز کنید.
- روی Workspace کلیک کنید.
- پوشه مورد علاقه خود را برجسته کنید.
- روی Edit کلیک کنید و پنجره "Edit file system" ظاهر می شود. می توانید نگاشت ها و/یا پوشه های حذف شده را از این پنجره اضافه یا حذف کنید.
