Cześć, w poprzednim wydaniu DevTools Digest omówiliśmy potężne asynkroniczne zestawy wywołań oraz kilka innych tematów. W tej edycji znajdziesz m.in. ulepszone filtrowanie panelu sieci (z autouzupełnianiem), możliwości edycji treści Shadow DOM oraz aktualizacje CodeMirror 4.
Filtrowanie w panelu Sieć
Możesz teraz filtrować zasoby według określonych pól, na przykład domeny. Jeden z formatów filtra: Domain:website.com. Oprócz filtrowania możesz też otrzymywać sugestie autouzupełniania dla prawidłowych wartości filtrów, które są aktualizowane w czasie rzeczywistym w miarę wpisywania zapytania. Może się to okazać przydatne, gdy chcesz znaleźć wszystkie zasoby udostępniane przez określoną domenę. [crbubg.com/258421]
Edytowanie treści Shadow DOM
W narzędziu DevTools zawsze można było edytować zwykły kod HTML w panelu Elementy, a teraz te możliwości obejmują też elementy należące do modelu DOM cienia. [crbug.com/348991]
Uaktualnij do CodeMirror 4.0
CodeMirror, edytor tekstu oparty na JavaScript, który jest używany w ramach panelu źródeł, został zaktualizowany do wersji 4. W efekcie dodaliśmy wiele nowych funkcji. crbug.com/356878]
Szybkie wyszukiwanie usługi CSS
Możesz teraz wyszukiwać nazwy właściwości, wartości i selektory reguł w nowym polu wyszukiwania w panelu Style. Wyniki są wyróżniane w czasie rzeczywistym podczas wpisywania zapytania. [crbug.com/278852]
Sygnatury czasowe obok komunikatów w konsoli
Gdy rejestrujesz wiadomości w krótkim odstępie czasu, przydatne może być wyświetlanie dokładnego czasu ich rejestrowania. Możesz to włączyć za pomocą eksperymentów w Narzędziach deweloperskich. [crbug.com/131714]
Szczegóły dotyczące statystyk pamięci w przypadku zrzutów stosu
Podczas wyświetlania zarejestrowanego migawka stosu zwróć uwagę na wykres kołowy stastics, który wizualizuje za pomocą kolorów, który aspekt JavaScriptu zużywa najwięcej pamięci. Obecnie jest to funkcja eksperymentalna. Aby ją wypróbować, włącz „Statystyki zrzutu stosu”. [crbug.com/346335]
Wyświetl oryginalne źródło pliku Console.log, a nie wersji opakowanej
Prawdopodobnie masz funkcję opakowania console.log, ale w konsoli wszystkie komunikaty pochodzą z pliku util.js:46. Teraz możesz poprosić Narzędzia deweloperskie o rozwiązanie oryginalnych lokalizacji. Wpisz plik, który zawiera komunikaty dziennika konsoli, w polu wprowadzania „Pomiń przechodzenie przez źródła o określonych nazwach”, aby DevTools traktował go jako czarną skrzynkę, a następnie wyświetlał prawdziwe źródło komunikatu dziennika. [crbug.com/231007]
Kilka mniejszych, ale bardzo przydatnych funkcji.
Odśwież panel Detektory zdarzeń w panelu Elementy po dynamicznym dodaniu lub usunięciu detektorów zdarzeń JavaScript. [crbug.com/341044]
Aby skupić się na wprowadzaniu danych w konsoli, możesz użyć
Ctrl+. Może to być przydatne w przypadku przepływu pracy, który wymaga tylko klawiatury w Narzędziach deweloperskich. [crbug.com/144943]Podpowiedzi autouzupełniania w stylu obramowania dla wartości (punktowane, przerywane, podwójne, rowkowane) zostały zaktualizowane zgodnie ze specyfikacją. [crbug.com/349998]
Do panelu ustawień dodaliśmy przycisk Przywróć domyślne i załaduj ponownie, który robi dokładnie to, co mówi. [crbug.com/135451]
Obecnie jest to funkcja eksperymentalna, ale możesz wypróbować dokowanie po lewej stronie, aby sprawdzić, czy pasuje do Twojego procesu pracy. Pozostałe tryby układu to dokowanie do okna głównego (po prawej lub dole) oraz oddzielenie od okna głównego. [crbug.com/134282]
„wheel” jest teraz oferowane jako punkt przerwania detektora zdarzeń. Jest to uzupełnienie zwykłych zdarzeń takich jak click, mousemove, mousedown itp. [crbug.com/347562]
To wszystko na razie. Dziękujemy za przeczytanie tej wiadomości.