DevTools Digest - Efficiënte elementbewerkingen, foutopsporing door servicemedewerkers en kleurschakeringen van materiaalontwerp

Gebruik het nieuwe contextmenu van het DOM-paneel om knooppunten efficiënt te bewerken. Debug servicewerknemers rechtstreeks via het paneel Bronnen. Kies uit alle Material Design-tinten in de kleurenkiezer. Blackbox JS-bibliotheken gemakkelijker.

Het nieuwe, verbeterde contextmenu van het DOM-paneel

Het nieuwe DOM-contextmenu.

We hebben de meest gebruikte acties in het DOM-paneel geanalyseerd en geconcludeerd dat het contextmenu met de rechtermuisknop overzichtelijk en opnieuw ingedeeld moet zijn.

Het is nu veel eenvoudiger om een ​​element snel te verbergen of te verwijderen, een bepaalde status te activeren zoals :active of :hover, of de HTML ervan te bewerken. En als u een trackpad gebruikt en geen zin hebt om met de rechtermuisknop te klikken, klik dan op de drie kleine puntjes naast het geselecteerde element.

Debug servicemedewerkers via het paneel Bronnen

Servicemedewerkers zijn fantastisch als je ze eenmaal hebt ingesteld, maar het kan lastig zijn om er al vroeg over na te denken. Dit werd nog verergerd door het feit dat voor het debuggen ervan de DevTools moesten worden verlaten en chrome://serviceworker-internals/ in een nieuw browservenster moest worden geopend.

Servicemedewerkers in hulpbronnen

Niet meer! U kunt nu rechtstreeks vanuit het paneel Bronnen fouten opsporen in servicewerknemers voor het huidige domein. Het is nog steeds een work-in-progress, maar al een zware verbetering ten opzichte van de vorige status quo.

Alle kleuren: materiaalontwerptinten in de kleurenkiezer

Een paar weken geleden hebben we het Material Design-palet aan de kleurenkiezer toegevoegd, zodat u kant-en-klaar primaire, krachtige kleuren krijgt. Om daadwerkelijk een volledige pagina te ontwerpen, heb je onvermijdelijk volledige toegang nodig tot alle Material Design-kleuren, dus hebben we ze ingebakken.

Om de tinten zichtbaar te maken, drukt u lang op een van de primaire kleuren en klikt u in plaats daarvan op een tint.

Blackbox JavaScript-bibliotheken gemakkelijker in instellingen

JavaScript Blackboxing bestaat al een tijdje, maar was niet zo eenvoudig te ontdekken. Het is een functie waarmee u een script op een pagina kunt blackboxen, zodat u zich alleen op uw geschreven code kunt concentreren (en alle inpakcode kunt verbergen).

We hebben het nu verplaatst naar Instellingen. Probeer het eens:

Blackboxen

Het beste van de rest

  • Ontbreekt de toegang tot weergaveschakelaars? Renderinginstellingen zijn verplaatst naar het DevTools-hoofdmenu (onder "Meer tools"). Naast de gebruikelijke verdachten (zoals de FPS-meter) hebben we ook 'Emuleer gedrukte media' daarheen verplaatst.
  • Ben je het beu om chrome://inspect in de omnibox te typen? Inspect Devices is nu ook te vinden in het nieuwe hoofdmenu onder ‘Meer Tools’.
  • Heeft u per ongeluk een van deze afsluitbare ladetabbladen gesloten, zoals Rendering of Zoeken? Je kunt ze nu opnieuw openen via het nieuwe menu aan de linkerkant.

Laat ons zoals altijd weten wat je ervan vindt via Twitter of de reacties hieronder, en stuur bugs naar crbug.com/new .

Tot volgende maand!
Paul Bakaus en het DevTools-team