DevTools Digest - Chrome 35

سلام به همه، در آخرین نسخه DevTools Digest باید پشته های تماس قدرتمند Asynchronous و چند مورد دیگر را بررسی کنیم. در این نسخه، ما شاهد فیلترینگ پنل شبکه (با تکمیل خودکار)، قابلیت‌های ویرایش با محتوای Shadow DOM، به‌روزرسانی‌های CodeMirror 4 و موارد دیگر خواهیم بود.

فیلتر کردن پنل شبکه

اکنون می توانید منابع را بر اساس فیلدهای خاصی مانند Domain فیلتر کنید. یک فرمت فیلتر این است: Domain:website.com . علاوه بر فیلتر کردن، پیشنهادات تکمیل خودکار مقادیر فیلتر معتبر را نیز دریافت می‌کنید که در زمان تایپ درخواست خود به‌روز می‌شوند. ممکن است زمانی که نیاز به یافتن تمام منابع ارائه شده توسط یک دامنه خاص داشته باشید، این برای شما مفید باشد. [ crbubg.com/258421 ]

فیلتر کردن پنل شبکه

محتوای Shadow DOM را ویرایش کنید

DevTools همیشه قادر به ویرایش HTML معمولی در پنل Elements بوده است، این قابلیت‌ها اکنون به عناصر بخشی از Shadow DOM گسترش می‌یابد. [ crbug.com/348991 ]

محتوای Shadow DOM را ویرایش کنید.

به CodeMirror 4.0 ارتقا دهید

CodeMirror، ویرایشگر متنی مبتنی بر جاوا اسکریپت که به عنوان بخشی از پنل منابع استفاده می شود، به نسخه 4 ارتقا یافته است. در نتیجه این کار، یکسری عملکرد جدید اضافه شده است. crbug.com/356878 ]

جستجوی سریع برای یک ویژگی CSS

اکنون می‌توانید نام‌های دارایی، مقادیر یا انتخابگرهای قانون را از کادر جستجوی جدید در پانل Styles جستجو کنید. نتایج در زمان واقعی با تایپ درخواست خود برجسته می شوند. [ crbug.com/278852 ]

جستجوی سریع برای یک ویژگی CSS.

مهر زمان در کنار پیام های کنسول

هنگامی که پیام‌ها را به صورت متوالی ثبت می‌کنید، دیدن زمان دقیق ثبت پیام ممکن است مفید باشد. شما می توانید این را از طریق DevTools Experiments فعال کنید. [ crbug.com/131714 ]

مهر زمان در کنار پیام های کنسول.

تجزیه آمار حافظه برای عکس‌های فوری پشته‌ای

هنگام مشاهده یک عکس فوری پشته ای ضبط شده، به نمودار دایره ای استاتیک توجه کنید که نمای کلی بصری و کد رنگی را نشان می دهد که چه جنبه ای از جاوا اسکریپت بیشترین حافظه را مصرف می کند. در حال حاضر یک ویژگی آزمایشی است، "آمار عکس لحظه ای Heap" را فعال کنید تا آن را امتحان کنید. [ crbug.com/346335 ]

تجزیه آمار حافظه برای عکس‌های فوری پشته‌ای.

منبع اصلی یک console.log را مشاهده کنید، نه نسخه پیچیده شده

شما احتمالاً یک تابع wrapper console.log دارید، اما متأسفانه در کنسول همه پیام‌های شما از چیزی مانند util.js:46 می‌آیند. اکنون می توانید از DevTools بخواهید مکان های اصلی شما را حل کند. فایلی را که پیام‌های لاگ کنسول را در کادر ورودی «Skip stepping through sources with specific names» می‌پیچد، وارد کنید تا DevTools آن را جعبه سیاه کند و سپس منبع واقعی یک عبارت گزارش را نشان دهد. [ crbug.com/231007 ]

چند افزودنی کوچک، اما قدرتمند دیگر

  • پس از افزودن یا حذف شنوندگان رویداد جاوا اسکریپت به صورت پویا، قاب شنوندگان رویداد را در پنل عناصر بازخوانی کنید . [ crbug.com/341044 ]

  • می‌توانید از Ctrl+ برای تمرکز روی ورودی کنسول استفاده کنید، ممکن است این برای یک گردش کار فقط صفحه‌کلید در DevTools مفید باشد. [ crbug.com/144943 ]

  • پیشنهادات تکمیل خودکار به سبک حاشیه برای مقادیر (نقطه‌دار، چین‌دار، دوتایی، شیار) برای مطابقت با مشخصات به‌روزرسانی شده‌اند. [ crbug.com/349998 ]

  • دکمه بازیابی تنظیمات پیش‌فرض و بارگیری مجدد **به پنل تنظیمات اضافه شده است که دقیقاً همان کاری را انجام می‌دهد که روی قلع می‌گوید. [ crbug.com/135451 ]

  • در حال حاضر یک ویژگی آزمایشی است، می‌توانید داک را به سمت چپ امتحان کنید تا مناسب بودن آن را برای گردش کار خود پیدا کنید. حالت های طرح بندی دیگر، اتصال به پنجره اصلی (راست یا پایین) و باز کردن در یک پنجره جداگانه است. [ crbug.com/134282 ]

  • " چرخ " اکنون به عنوان نقطه شکست شنونده رویداد ارائه می شود، این علاوه بر رویدادهای معمول کلیک، جابجایی ماوس، ماوس و غیره است. [ crbug.com/347562 ]

فعلاً همین است، ممنون که خواندید!