Podsumowanie narzędzi deweloperskich – Chrome 35

Cześć, w ostatnim wydaniu DevTools Digest znajdziesz informacje o potężnych ścieżkach wywołań asynchronicznych oraz kilka innych. 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, np. 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]

Filtrowanie w panelu Sieć.

Edytowanie treści Shadow DOM

W narzędziach dla programistów 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 Shadow DOM. [crbug.com/348991]

Edytowanie treści Shadow DOM.

Przechodzenie na 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 porównywania cen

Możesz teraz wyszukiwać nazwy właściwości, wartości lub selektory reguł w nowym polu wyszukiwania w panelu Styl. Wyniki są wyróżniane w czasie rzeczywistym podczas wpisywania zapytania. [crbug.com/278852]

Szybkie wyszukiwanie właściwości CSS.

sygnatur czasowych obok wiadomości 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ć w Narzędziach deweloperskich w sekcji Eksperymenty. [crbug.com/131714]

sygnatury czasowe obok wiadomości w konsoli,

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. Ta funkcja jest obecnie eksperymentalna. Aby ją wypróbować, włącz „Statystyki podsumowania Heap”. [crbug.com/346335]

Szczegóły dotyczące statystyk pamięci dla zrzutów sterty.

Wyświetlanie oryginalnego źródła pliku console.log, a nie zapakowanej wersji

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 pierwotnych lokalizacji. Wpisz plik, który zawiera komunikaty dziennika konsoli, w polu tekstowym „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 przydatnych dodatków

  • 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 pracy z klawiaturą w Narzędziach deweloperskich. [crbug.com/144943]

  • Podpowiedzi autouzupełniania w stylu obramowania dla wartości (kropka, kreska przerywana, podwójna kreska, rowek) 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]

  • Zdarzenie „wheel” jest teraz dostępne jako punkt przerwania detektora zdarzeń. Dostępny jest on oprócz zwykłych zdarzeń takich jak click, mousemove, mousedown itp. [crbug.com/347562]

To wszystko na razie. Dziękujemy za przeczytanie tej wiadomości.