In Chrome DevTools is het netwerkpaneel , dat u waardevolle inzichten biedt in de netwerkactiviteit van een webpagina, een van de meest gebruikte tools.
Dit artikel deelt een reeks zeer gewenste verbeteringen aan het netwerkpanel die Ioana Forfota en Silvia Eremia tijdens hun STEP-stage hebben aangebracht. Er werd reikhalzend uitgekeken naar deze verbeteringen en ze zijn zorgvuldig geselecteerd uit de uitgebreide achterstand op Chromium's issue tracker en maken het paneel toegankelijker, intuïtiever en informatiever.
Met deze nieuwe functies biedt het Netwerkpaneel webontwikkelaars de mogelijkheid om:
- Focus alleen op relevante netwerkverzoeken.
- Begrijp HTTP-statuscodes zonder externe referenties.
- Identificeer en adresseer verzoekfouten snel.
- Begrijp JSON-subtypereacties.
Lees verder voor alle details!
Filter Chrome-extensieverzoeken
Chrome-extensies kunnen hun eigen netwerkverzoeken doen, die naast de paginaverzoeken in het netwerkpaneel verschijnen. Als u niet actief bezig bent met het ontwikkelen van een extensie, zijn deze verzoeken waarschijnlijk niet relevant voor u. Voorheen was de enige manier om ze te verbergen het gebruik van het filter -scheme:chrome-extension of het opsporen van fouten in de incognitomodus .
Vanaf Chrome 117 is dit eenvoudiger geworden. Om het netwerkpaneel overzichtelijker te maken, biedt DevTools nu een selectievakje om Chrome-extensieverzoeken uit te sluiten.
Er zijn discussies gaande over de standaardstatus van deze functie. In eerste instantie hebben we overwogen om dit standaard in te schakelen, met het idee dat het de ervaring voor de meerderheid van de gebruikers zou kunnen verbeteren. Deze aanpak kan ervoor zorgen dat sommige gebruikers zich er niet van bewust zijn dat URL's van Chrome-extensies verzoeken kunnen activeren. Dit kan ook uitdagingen opleveren voor ontwikkelaars van extensies. Daarom is de standaardstatus ingesteld op 'uitgeschakeld'.
Als dit selectievakje is ingeschakeld, wordt uw lijst met verzoeken overzichtelijker, minder afleidend en meer gericht op de verzoeken die er het meest toe doen, zodat u een veel aangenamere foutopsporingservaring kunt hebben!
Statusteksten van HTTP-reacties
Het begrijpen van HTTP-statuscodes is essentieel voor effectief foutopsporing. Het kan echter lastig zijn om voortdurend naar hun betekenissen te zoeken. DevTools heeft een nuttige verbetering geïntroduceerd: wanneer u de aanwijzer boven een statuscode in de lijst met verzoeken houdt, geeft een tooltip onmiddellijk de statustekst weer: een beschrijvende titel die de betekenis ervan verduidelijkt.
De statustekst is ook zichtbaar in de koptekstweergave direct naast de code. Hoewel deze functies voorheen alleen beschikbaar waren voor HTTP/1.1, zijn ze nu uitgebreid naar HTTP/2 en HTTP/3. Deze ogenschijnlijk kleine aanpassingen hebben een aanzienlijke impact, waardoor u tijd bespaart en u zich kunt concentreren op het opsporen van fouten in plaats van op het zoeken naar codebetekenissen.
Verbeterde zichtbaarheid van fouten
We hebben het eenvoudiger gemaakt om snel fouten op te sporen en op te lossen zonder diep in het paneel te graven. Om dit te bereiken hebben we, in plaats van foutmeldingen alleen maar te markeren met wijzigingen in de tekstkleur, indicatieve pictogrammen toegevoegd om de aandacht te vestigen op verzoekfouten, zoals fouten met de statuscode 404. Deze subtiele maar nuttige indicatoren zorgen ervoor dat fouten beter opvallen, zodat u belangrijke kwesties niet over het hoofd zien.
Mooi afdrukkende JSON-subtypen
Bij webontwikkeling gaat het vaak om het inspecteren van JSON-reacties, maar het lezen van onbewerkte, ongeformatteerde JSON's is erg lastig. Het omgaan met dergelijke reacties, vooral met subtypen als ld+json , hal+json of sparql-results+json , kan frustrerend zijn, bijvoorbeeld als deze op één regel verschijnen. Om het u gemakkelijker te maken, heeft DevTools een gebruiksvriendelijkere, inklapbare presentatie voor JSON-subtypen geïntroduceerd. Nu zijn deze antwoorden geformatteerd, waardoor ontwikkelaars niet meer op externe tools hoeven te vertrouwen. Dit herontwerp biedt een eenvoudige en zeer leesbare weergave.
Positieve feedback van de gemeenschap
Ook al bevinden deze functies zich nog maar in de beginfase van adoptie, de reactie van de gemeenschap is overweldigend positieve feedback. Hun succesvolle implementatie heeft veel gebruikers blij gemaakt met de verbeteringen, waardoor hun ervaring aanzienlijk is verbeterd. Enkele reacties kunt u lezen op X:
"Oh, dat is leuk! ChromeDevTools heeft zojuist een stap verder gezet door voor mensen leesbare HTTP-statuscodes weer te geven, waardoor het veel gemakkelijker wordt om te zien wat er mis is gegaan met een netwerkverzoek." - TribalIdeas op X
"Het is de laatste tijd super nuttig geweest. Vooral het omgaan met formulieren met adblockers en grammatica-extensies." - MrAhmadAwais op X
Klaar om deze nieuwe functies te verkennen? Ga naar Chrome DevTools en ervaar het verbeterde netwerkpaneel zelf. Veel plezier met debuggen!
Download de voorbeeldkanalen
Overweeg het gebruik van Chrome Canary , Dev of Beta als uw standaard ontwikkelingsbrowser. Deze preview-kanalen geven u toegang tot de nieuwste DevTools-functies, testen geavanceerde webplatform-API's en ontdekken problemen op uw site voordat uw gebruikers dat doen!
Neem contact op met het Chrome DevTools-team
Gebruik de volgende opties om de nieuwe functies en wijzigingen in het bericht te bespreken, of iets anders gerelateerd aan DevTools.
- Stuur ons een suggestie of feedback via crbug.com .
- Rapporteer een DevTools-probleem met behulp van de opties Meer
> Help > Rapporteer een DevTools-probleem in DevTools. - Tweet op @ChromeDevTools .
- Laat reacties achter op onze Wat is er nieuw in DevTools YouTube-video's of DevTools Tips YouTube-video's .