Configureer het uiterlijk en gedrag van DevTools en de bijbehorende panelen met behulp van 
Instellingen > Voorkeuren . Op dit tabblad worden zowel algemene aanpassingsopties als paneelspecifieke opties vermeld.
Open om voorkeuren in te stellen 
Instellingen > Voorkeuren en blader naar een van de hierna beschreven secties.
Om erachter te komen wat elke instelling doet, zoekt u op deze pagina naar de naam van de instelling en voegt toe aan de beschrijving ervan.
Deze referentie geeft verschillende instellingen aan met de volgende pictogrammen:
Selectievakjes- Vervolgkeuzelijsten
Afgekeurd
Om de standaardvoorkeuren te herstellen, scrollt u naar het einde van het tabblad Voorkeuren en klikt u op Standaardinstellingen herstellen en opnieuw laden .
Verschijning
In deze sectie vindt u opties waarmee u het uiterlijk van DevTools kunt aanpassen.
Thema's 
stelt een kleurenthema in voor de gebruikersinterface van DevTools.
Paneelindeling 
rangschikt ruiten in panelen.
Heeft invloed op Elementen > Stijlen en zustertabbladen, en op het deelvenster Bronnen > Debugger . De automatische optie zorgt ervoor dat de lay-out afhankelijk is van de breedte van DevTools.
Taal 
stelt de landinstelling in voor de gebruikersinterface van DevTools.
Om deze instelling toe te passen, laadt u DevTools opnieuw.
Schakel de sneltoets Ctrl/Cmd + 0 - 9 in om tussen panelen te schakelen . Hiermee kunt u panelen openen met het toetsenbord.
Deze video laat zien hoe u tussen de tabbladen kunt schakelen met behulp van de bijbehorende sneltoetsen.
Overlay met gepauzeerde status uitschakelen verbergt de foutopsporing Gepauzeerd in 
overlay in de viewport wanneer de uitvoering van de code wordt gepauzeerd.
Met 'Toon wat er nieuw is na elke update' wordt na elke Chrome-update automatisch het tabblad ' Wat is er nieuw' geopend.
Bronnen
In deze sectie worden opties vermeld waarmee u het paneel Bronnen kunt aanpassen.
Met Zoeken in anonieme en inhoudsscripts kunt u alle geladen JavaScript-bestanden doorzoeken, inclusief die in Chrome-extensies, met behulp van het tabblad Zoeken .
Deze video laat zien hoe u naar tekst kunt zoeken in een extensiebronbestand.
Bestanden automatisch weergeven in de zijbalk selecteert bestanden in het deelvenster Bronnen > Pagina wanneer u schakelt tussen tabbladen in de Editor .
Deze video laat zien hoe, als deze optie is ingeschakeld, het paneel Bronnen bestanden in de navigatiestructuur selecteert terwijl u tussen tabbladen schakelt.
Door JavaScript-bronkaarten in te schakelen, kan DevTools bronnen van gegenereerde of verkleinde JavaScript-bestanden vinden.
Tabbladverplaatsingen inschakelen focus maakt de 
De Tab -toets verplaatst de focus binnen DevTools in plaats van een Tab-teken in te voegen in de Editor .
Vereist om DevTools opnieuw te laden.
In deze video ziet u eerst Tab-tekens die zijn ingevoegd met de Tab-toets. Wanneer u deze optie vervolgens inschakelt en DevTools opnieuw laadt, verplaatst de Tab-toets de focus.
Inspringing detecteren stelt de inspringing in op die in het bronbestand dat in de Editor is geopend.
Vereist om DevTools opnieuw te laden.
Deze video toont eerst de standaardinspringing van acht spaties. Wanneer u deze optie vervolgens inschakelt, wordt de standaardinspringing vervangen door die van het bronbestand.
Automatisch aanvullen maakt handige suggesties in de Editor mogelijk.
Deze video toont eerst geen suggesties. Wanneer u deze optie vervolgens inschakelt, toont de Editor suggesties voor het voltooien van opdrachten.
Automatisch sluiten van haakjes voegt automatisch een haakje sluiten of een tag toe wanneer u een openingshaakje typt.
Deze video toont het typen van haakjes openen voor en na het inschakelen van het automatisch sluiten van haakjes.
Bijpassende haakjes onderstreept en markeert in lichtrood in de Editor een vierkant haakje, accolade of haakje zonder paar.
Met codevouwen kunt u codeblokken tussen accolades in de Editor in- en uitvouwen.
Vereist om DevTools opnieuw te laden.
Deze video laat zien hoe u codeblokken vouwt wanneer u deze optie inschakelt.
Toon witruimtetekens 
geeft witruimtetekens weer in de Editor .
Vereist om DevTools opnieuw te laden. Opties doen het volgende:
- Met Alles worden alle witruimtetekens aangegeven als punten (
...). Bovendien geeft de Editor het Tab -teken aan als een regel (—). - Aan het einde worden de witruimtetekens aan het einde van de regels lichtrood gemarkeerd.
Variabelewaarden inline weergeven tijdens het debuggen toont u de variabelewaarden naast toewijzingsinstructies terwijl de uitvoering is gepauzeerd.
Het paneel Bronnen focussen wanneer een breekpunt wordt geactiveerd, opent Bronnen > Editor op de regel met het breekpunt dat de uitvoering heeft onderbroken.
In deze video wordt eerst het deelvenster Bronnen onscherp weergegeven wanneer het op een onderbrekingspunt wordt gepauzeerd. Wanneer u deze optie vervolgens inschakelt, opent DevTools de Editor in het paneel Bronnen en wordt de coderegel met het breekpunt weergegeven.
Automatisch mooi afgedrukte verkleinde bronnen maken die bronnen leesbaar.
Als het mooi afgedrukt is , kan de Editor een enkele lange coderegel in meerdere regels weergeven, voorafgegaan door - om aan te geven dat het om een regelvoortzetting gaat.
Door CSS-brontoewijzingen in te schakelen, kan DevTools de bronnen van gegenereerde CSS-bestanden vinden, bijvoorbeeld .scss , en deze aan u tonen.
Met Sta scrollen voorbij het einde van het bestand toe kunt u verder scrollen dan de laatste regel in de Editor .
In deze video ziet u hoe u voorbij het einde van het bestand kunt scrollen wanneer u deze optie inschakelt.
Sta DevTools toe bronnen, zoals brontoewijzingen, te laden vanuit externe bestandspaden . Standaard uitgeschakeld vanwege veiligheidsredenen.
Indien uitgeschakeld, logt DevTools in op de Console -berichten die lijken op het volgende:
Standaard inspringing 
laat je het aantal spaties kiezen 
Tab -toets wordt ingevoegd in de Editor .
Dit voorbeeld laat zien hoe u de standaardinspringing eerst instelt op acht spaties en vervolgens op een Tab-teken.
Elementen
In deze sectie vindt u opties waarmee u het paneel Elementen kunt aanpassen.
Schaduw-DOM van user-agent weergeven geeft schaduw-DOM-knooppunten in de DOM-boom weer.
Woordomloop breekt lange regels in de DOM-structuur af en loopt over naar de volgende regel.
HTML-opmerkingen weergeven toont HTML-opmerkingen in de DOM-structuur.
DOM-knooppunt onthullen bij zweven selecteert het corresponderende knooppunt in de DOM-structuur terwijl u over een element in de viewport zweeft 
inspecteer modus.
Deze video laat eerst zien dat DOM-knooppunten niet zijn geselecteerd in de DOM-structuur. Wanneer u deze optie vervolgens inschakelt, selecteert het paneel Elementen de knooppunten tijdens het zweven.
Gedetailleerde inspectietooltip tonen toont de tooltip in het venster in 
inspecteermodus terwijl u over een element zweeft.
Linialen weergeven bij zweven toont de linialen in het venster terwijl u over elementen in de DOM-structuur zweeft.
Tooltip voor CSS-documentatie tonen geeft tooltip weer met een korte beschrijving wanneer u de muisaanwijzer op een eigenschap in het deelvenster Stijlen plaatst.
Via de link Meer informatie krijgt u een MDN CSS-referentie over het onroerend goed.
Netwerk
In dit gedeelte worden opties vermeld waarmee u het netwerkpaneel kunt aanpassen. De meeste opties zijn hetzelfde als in de paneelinstellingen.
Logboek behouden is hetzelfde als Logboek behouden in het netwerkpaneel . Slaat verzoeken op tijdens het laden van pagina's.
In deze video ziet u eerst dat het verzoeklogboek wordt vernieuwd bij het opnieuw laden van de pagina en vervolgens blijft bestaan wanneer u deze optie inschakelt.
Netwerklogboek opnemen is hetzelfde als 
Neem het netwerklogboek op in het netwerkpaneel . Start of stopt het opnemen van verzoeken in het netwerklogboek.
Schakel het blokkeren van netwerkverzoeken in om verzoeken te blokkeren die overeenkomen met patronen in de lade voor het blokkeren van netwerkverzoeken .
Deze video laat eerst zien dat de verzoeken niet worden geblokkeerd. Nadat u deze optie hebt ingeschakeld, blokkeert een patroon in de lade Netwerkverzoekblokkering deze.
Cache uitschakelen (terwijl DevTools geopend is) is hetzelfde als Cache uitschakelen in het netwerkpaneel . Schakelt browsercache uit.
Toestaan om HAR te genereren met gevoelige gegevens voegt opties toe aan de HAR exporteren waarmee u kunt exporteren met of zonder gevoelige gegevens (opgeschoond).
Gevoelige gegevens zijn de gegevens in de headers Cookie , Set-Cookie en Authorization .
Brontypen met kleurcodes markeren verzoeken in verschillende kleuren, afhankelijk van hun type, in de Waterval -kolom van het netwerklogboek.
Netwerklogboek per frame groeperen is hetzelfde als Groeperen per frame in het paneel Netwerk . Met deze optie worden verzoeken gegroepeerd die zijn geïnitieerd door inline frames.
Door advertentieblokkering op deze site te forceren, worden gedetecteerde advertenties op de pagina geblokkeerd terwijl DevTools geopend is.
Prestatie
In deze sectie vindt u opties waarmee u het paneel Prestaties kunt aanpassen.
Flamechart-muiswielactie 
wijst scroll- of zoomactie toe aan uw muiswiel wanneer u door de vlammenkaart navigeert.
Dit voorbeeld toont zowel scroll- als zoommuiswielacties op een vlammendiagram in het paneel Prestaties .
Troosten
In dit gedeelte worden opties vermeld waarmee u de console kunt aanpassen. De meeste opties zijn hetzelfde als in Console-instellingen .
Netwerkberichten verbergen verbergt netwerkberichten in de console .
Deze video laat zien hoe u netwerkberichten kunt verbergen met deze optie in beide 
Instellingen en in Console-instellingen .
Geselecteerde context zorgt er alleen voor dat de console alleen berichten weergeeft voor de geselecteerde context: top, iframe, worker of extensie.
Deze video laat zien hoe u deze optie in beide inschakelt 
Instellingen en in Console > Instellingen en selecteer de context in de Console .
Log XMLHttpRequests zorgt ervoor dat de console XHR registreert en verzoeken ophaalt.
Deze video laat zien hoe u deze optie in beide inschakelt 
Instellingen en console > Instellingen en log de XHR finished loading berichten naar de console .
Tijdstempels weergeven zorgt ervoor dat de console tijdstempels naast berichten weergeeft.
Automatisch aanvullen vanuit de geschiedenis zorgt ervoor dat de console opdrachten voorstelt die u eerder hebt uitgevoerd terwijl u typt.
Je vindt dezelfde optie in Console > Instellingen .
Suggestie voor automatisch aanvullen op Enter accepteren zorgt ervoor dat de console de geselecteerde suggestie uit de vervolgkeuzelijst voor automatisch aanvullen accepteert wanneer u op Enter drukt.
Deze video laat zien wat er gebeurt als u op Enter drukt voor en na het inschakelen van deze optie.
Groepeer gelijksoortige berichten in de console zorgt ervoor dat de console gelijksoortige berichten groepeert.
Je vindt dezelfde optie in Console > Instellingen .
CORS-fouten weergeven in console zorgt ervoor dat de console de CORS-fouten weergeeft die zijn geregistreerd.
Je vindt dezelfde optie in Console > Instellingen .
Door de enthousiaste evaluatie laat de console een voorbeeld van de uitvoer zien terwijl u een opdracht typt.
Je vindt dezelfde optie in Console > Instellingen .
Deze video toont verschillende uitvoervoorbeelden.
Beschouw code-evaluatie als een gebruikersactie die elke opdracht die u in de console uitvoert, omzet in gebruikersinteractie.
Met andere woorden, het stelt navigator.userActivation.isActive bij evaluatie in op true . Je vindt dezelfde optie in Console > Instellingen .
Deze video toont het evaluatieresultaat van navigator.userActivation.isActive voor en na het inschakelen van deze optie.
Console.trace()-berichten automatisch uitvouwen zorgt ervoor dat de console uitgebreide console.trace() berichten weergeeft wanneer deze worden geregistreerd.
Logboek behouden bij navigatie zorgt ervoor dat de console bij elke navigatie een bericht Navigated to ' logt en logboeken op alle pagina's opslaat.
Je vindt dezelfde optie in Console > Instellingen .
Verlenging
In dit gedeelte vindt u opties waarmee u de koppelingsverwerking voor Chrome DevTools-extensies kunt aanpassen.
Afhandeling van koppelingen 
stelt een optie in waarmee bestanden worden geopend wanneer u op een koppeling naar een bronbestand klikt, bijvoorbeeld in het deelvenster Elementen > Stijlen .
Vasthoudendheid
In deze sectie worden opties vermeld die bepalen hoe DevTools de wijzigingen opslaat die u aanbrengt.
Als u lokale overschrijvingen inschakelt, blijven de wijzigingen die u in bronnen aanbrengt bij het laden van pagina's in DevTools behouden.
Zie Lokale overschrijvingen voor meer informatie.
Debugger
In deze sectie worden opties vermeld die het gedrag van Debugger bepalen.
JavaScript uitschakelen laat u zien hoe uw webpagina eruitziet en zich gedraagt wanneer JavaScript is uitgeschakeld .
Laad de pagina opnieuw om te zien of en hoe de pagina tijdens het laden afhankelijk is van JavaScript.
Wanneer JavaScript is uitgeschakeld, toont Chrome het bijbehorende 
pictogram in de adresbalk en DevTools toont een waarschuwing 
pictogram naast Bronnen .
Asynchrone stapelsporen uitschakelen verbergt het "volledige verhaal" van de asynchrone bewerking in de Call Stack .
Standaard probeert de Debugger asynchrone bewerkingen te traceren als het raamwerk dat u gebruikt dergelijke tracering ondersteunt.
Zie Asynchrone stapeltraceringen bekijken voor meer informatie.
Globaal
In deze sectie worden opties vermeld die globale effecten hebben in DevTools.
DevTools automatisch openen voor pop-ups opent DevTools wanneer u op koppelingen klikt die nieuwe tabbladen openen. Dat wil zeggen, alle links met target=_blank .
Deze video laat eerst zien hoe u op een link klikt en een nieuw tabblad opent *zonder* DevTools. Wanneer u deze optie vervolgens inschakelt, wordt een nieuw tabblad geopend *met* DevTools.
Zoeken terwijl u typt zorgt ervoor dat DevTools naar het eerste zoekresultaat springt terwijl u uw zoekopdracht typt. Indien uitgeschakeld, brengt DevTools u alleen naar het resultaat wanneer u op Enter drukt.
Deze video laat eerst zien hoe DevTools "springt" terwijl u een zoekopdracht typt. Wanneer u deze optie vervolgens inschakelt, brengt DevTools u naar het eerste resultaat wanneer u op Enter drukt.
Synchroniseren
In dit gedeelte kunt u de synchronisatie van instellingen tussen apparaten instellen.
Met Instellingensynchronisatie inschakelen kunt u DevTools-instellingen op meerdere apparaten synchroniseren.
Als u deze instelling wilt gebruiken, schakelt u eerst Chrome Sync in . Zie Synchronisatie-instellingen voor meer informatie.
Configureer het uiterlijk en gedrag van DevTools en de bijbehorende panelen met behulp van Instellingen > Voorkeuren . Op dit tabblad worden zowel algemene aanpassingsopties als paneelspecifieke opties vermeld.
Open om voorkeuren in te stellen Instellingen > Voorkeuren en blader naar een van de hierna beschreven secties.
Om erachter te komen wat elke instelling doet, zoekt u op deze pagina naar de naam van de instelling en voegt toe aan de beschrijving ervan.
Deze referentie geeft verschillende instellingen aan met de volgende pictogrammen:
- Selectievakjes
- Vervolgkeuzelijsten
- Afgekeurd
Om de standaardvoorkeuren te herstellen, scrollt u naar het einde van het tabblad Voorkeuren en klikt u op Standaardinstellingen herstellen en opnieuw laden .
Verschijning
In deze sectie vindt u opties waarmee u het uiterlijk van DevTools kunt aanpassen.
Thema's stelt een kleurenthema in voor de gebruikersinterface van DevTools.
Paneelindeling rangschikt ruiten in panelen.
Heeft invloed op Elementen > Stijlen en zustertabbladen, en op het deelvenster Bronnen > Debugger . De automatische optie zorgt ervoor dat de lay-out afhankelijk is van de breedte van DevTools.
Taal stelt de landinstelling in voor de gebruikersinterface van DevTools.
Om deze instelling toe te passen, laadt u DevTools opnieuw.
Schakel de sneltoets Ctrl/Cmd + 0 - 9 in om tussen panelen te schakelen . Hiermee kunt u panelen openen met het toetsenbord.
Deze video laat zien hoe u tussen de tabbladen kunt schakelen met behulp van de bijbehorende sneltoetsen.
Overlay met gepauzeerde status uitschakelen verbergt de foutopsporing Gepauzeerd in overlay in de viewport wanneer de uitvoering van de code wordt gepauzeerd.
Met 'Toon wat er nieuw is na elke update' wordt na elke Chrome-update automatisch het tabblad ' Wat is er nieuw' geopend.
Bronnen
In deze sectie worden opties vermeld waarmee u het paneel Bronnen kunt aanpassen.
Met Zoeken in anonieme en inhoudsscripts kunt u alle geladen JavaScript-bestanden doorzoeken, inclusief die in Chrome-extensies, met behulp van het tabblad Zoeken .
Deze video laat zien hoe u naar tekst kunt zoeken in een extensiebronbestand.
Bestanden automatisch weergeven in de zijbalk selecteert bestanden in het deelvenster Bronnen > Pagina wanneer u schakelt tussen tabbladen in de Editor .
Deze video laat zien hoe, als deze optie is ingeschakeld, het paneel Bronnen bestanden in de navigatiestructuur selecteert terwijl u tussen tabbladen schakelt.
Door JavaScript-bronkaarten in te schakelen, kan DevTools bronnen van gegenereerde of verkleinde JavaScript-bestanden vinden.
Tabbladverplaatsingen inschakelen focus maakt de De Tab -toets verplaatst de focus binnen DevTools in plaats van een Tab-teken in te voegen in de Editor .
Vereist om DevTools opnieuw te laden.
In deze video ziet u eerst Tab-tekens die zijn ingevoegd met de Tab-toets. Wanneer u deze optie vervolgens inschakelt en DevTools opnieuw laadt, verplaatst de Tab-toets de focus.
Inspringing detecteren stelt de inspringing in op die in het bronbestand dat in de Editor is geopend.
Vereist om DevTools opnieuw te laden.
Deze video toont eerst de standaardinspringing van acht spaties. Wanneer u deze optie vervolgens inschakelt, wordt de standaardinspringing vervangen door die van het bronbestand.
Automatisch aanvullen maakt handige suggesties in de Editor mogelijk.
Deze video toont eerst geen suggesties. Wanneer u deze optie vervolgens inschakelt, toont de Editor suggesties voor het voltooien van opdrachten.
Automatisch sluiten van haakjes voegt automatisch een haakje sluiten of een tag toe wanneer u een openingshaakje typt.
Deze video toont het typen van haakjes openen voor en na het inschakelen van het automatisch sluiten van haakjes.
Bijpassende haakjes onderstreept en markeert in lichtrood in de Editor een vierkant haakje, accolade of haakje zonder paar.
Met codevouwen kunt u codeblokken tussen accolades in de Editor in- en uitvouwen.
Vereist om DevTools opnieuw te laden.
Deze video laat zien hoe u codeblokken vouwt wanneer u deze optie inschakelt.
Toon witruimtetekens geeft witruimtetekens weer in de Editor .
Vereist om DevTools opnieuw te laden. Opties doen het volgende:
- Met Alles worden alle witruimtetekens aangegeven als punten (
...). Bovendien geeft de Editor het Tab -teken aan als een regel (—). - Aan het einde worden de witruimtetekens aan het einde van de regels lichtrood gemarkeerd.
Variabelewaarden inline weergeven tijdens het debuggen toont u de variabelewaarden naast toewijzingsinstructies terwijl de uitvoering is gepauzeerd.
Het paneel Bronnen focussen wanneer een breekpunt wordt geactiveerd, opent Bronnen > Editor op de regel met het breekpunt dat de uitvoering heeft onderbroken.
In deze video wordt eerst het deelvenster Bronnen onscherp weergegeven wanneer het op een onderbrekingspunt wordt gepauzeerd. Wanneer u deze optie vervolgens inschakelt, opent DevTools de Editor in het paneel Bronnen en wordt de coderegel met het breekpunt weergegeven.
Automatisch mooi afgedrukte verkleinde bronnen maken die bronnen leesbaar.
Als het mooi afgedrukt is , kan de Editor een enkele lange coderegel in meerdere regels weergeven, voorafgegaan door - om aan te geven dat het om een regelvoortzetting gaat.
Door CSS-brontoewijzingen in te schakelen, kan DevTools de bronnen van gegenereerde CSS-bestanden vinden, bijvoorbeeld .scss , en deze aan u tonen.
Met Sta scrollen voorbij het einde van het bestand toe kunt u verder scrollen dan de laatste regel in de Editor .
In deze video ziet u hoe u voorbij het einde van het bestand kunt scrollen wanneer u deze optie inschakelt.
Sta DevTools toe bronnen, zoals brontoewijzingen, te laden vanuit externe bestandspaden . Standaard uitgeschakeld vanwege veiligheidsredenen.
Indien uitgeschakeld, logt DevTools in op de Console -berichten die lijken op het volgende:
Standaard inspringing laat je het aantal spaties kiezen Tab -toets wordt ingevoegd in de Editor .
Dit voorbeeld laat zien hoe u de standaardinspringing eerst instelt op acht spaties en vervolgens op een Tab-teken.
Elementen
In deze sectie vindt u opties waarmee u het paneel Elementen kunt aanpassen.
Schaduw-DOM van user-agent weergeven geeft schaduw-DOM-knooppunten in de DOM-boom weer.
Woordomloop breekt lange regels in de DOM-structuur af en loopt over naar de volgende regel.
HTML-opmerkingen weergeven toont HTML-opmerkingen in de DOM-structuur.
DOM-knooppunt onthullen bij zweven selecteert het corresponderende knooppunt in de DOM-structuur terwijl u over een element in de viewport zweeft inspecteer modus.
Deze video laat eerst zien dat DOM-knooppunten niet zijn geselecteerd in de DOM-structuur. Wanneer u deze optie vervolgens inschakelt, selecteert het paneel Elementen de knooppunten tijdens het zweven.
Gedetailleerde inspectietooltip tonen toont de tooltip in het venster in inspecteermodus terwijl u over een element zweeft.
Linialen weergeven bij zweven geeft de linialen in het venster weer terwijl u over elementen in de DOM-structuur zweeft.
Tooltip voor CSS-documentatie tonen geeft tooltip weer met een korte beschrijving wanneer u de muisaanwijzer op een eigenschap in het deelvenster Stijlen plaatst.
Via de link Meer informatie krijgt u een MDN CSS-referentie over het onroerend goed.
Netwerk
In dit gedeelte worden opties vermeld waarmee u het netwerkpaneel kunt aanpassen. De meeste opties zijn hetzelfde als in de paneelinstellingen.
Logboek behouden is hetzelfde als Logboek behouden in het netwerkpaneel . Slaat verzoeken op tijdens het laden van pagina's.
In deze video ziet u eerst dat het verzoekenlogboek wordt vernieuwd bij het opnieuw laden van de pagina en vervolgens blijft bestaan wanneer u deze optie inschakelt.
Netwerklogboek opnemen is hetzelfde als Neem het netwerklogboek op in het netwerkpaneel . Start of stopt het opnemen van verzoeken in het netwerklogboek.
Schakel het blokkeren van netwerkverzoeken in om verzoeken te blokkeren die overeenkomen met patronen in de lade voor het blokkeren van netwerkverzoeken .
Deze video laat eerst zien dat de verzoeken niet worden geblokkeerd. Nadat u deze optie hebt ingeschakeld, blokkeert een patroon in de lade Netwerkverzoekblokkering deze.
Cache uitschakelen (terwijl DevTools geopend is) is hetzelfde als Cache uitschakelen in het netwerkpaneel . Schakelt browsercache uit.
Toestaan om HAR te genereren met gevoelige gegevens voegt opties toe aan de HAR exporteren waarmee u kunt exporteren met of zonder gevoelige gegevens (opgeschoond).
Gevoelige gegevens zijn de gegevens in de headers Cookie , Set-Cookie en Authorization .
Brontypen met kleurcodes markeren verzoeken in verschillende kleuren, afhankelijk van hun type, in de Waterval -kolom van het netwerklogboek.
Netwerklogboek per frame groeperen is hetzelfde als Groeperen per frame in het paneel Netwerk . Met deze optie worden verzoeken gegroepeerd die zijn geïnitieerd door inline frames.
Door advertentieblokkering op deze site te forceren, worden gedetecteerde advertenties op de pagina geblokkeerd terwijl DevTools geopend is.
Prestatie
In deze sectie worden opties vermeld waarmee u het paneel Prestaties kunt aanpassen.
Flamechart-muiswielactie wijst scroll- of zoomactie toe aan uw muiswiel wanneer u door de vlammenkaart navigeert.
Dit voorbeeld toont zowel scroll- als zoommuiswielacties op een vlammendiagram in het paneel Prestaties .
Troosten
In dit gedeelte worden opties vermeld waarmee u de console kunt aanpassen. De meeste opties zijn hetzelfde als in Console-instellingen .
Netwerkberichten verbergen verbergt netwerkberichten in de console .
Deze video laat zien hoe u netwerkberichten kunt verbergen met deze optie in beide Instellingen en in Console-instellingen .
Geselecteerde context zorgt er alleen voor dat de console alleen berichten weergeeft voor de geselecteerde context: top, iframe, worker of extensie.
Deze video laat zien hoe u deze optie in beide inschakelt Instellingen en in Console > Instellingen en selecteer de context in de Console .
Log XMLHttpRequests zorgt ervoor dat de console XHR logt en verzoeken ophaalt.
Deze video laat zien hoe u deze optie in beide inschakelt Instellingen en console > Instellingen en log de XHR finished loading berichten naar de console .
Tijdstempels weergeven zorgt ervoor dat de console tijdstempels naast berichten weergeeft.
Automatisch aanvullen vanuit de geschiedenis zorgt ervoor dat de console opdrachten voorstelt die u eerder hebt uitgevoerd terwijl u typt.
Je vindt dezelfde optie in Console > Instellingen .
Suggestie voor automatisch aanvullen op Enter accepteren zorgt ervoor dat de console de geselecteerde suggestie uit de vervolgkeuzelijst voor automatisch aanvullen accepteert wanneer u op Enter drukt.
Deze video laat zien wat er gebeurt als u op Enter drukt voor en na het inschakelen van deze optie.
Groepeer gelijksoortige berichten in de console zorgt ervoor dat de console gelijksoortige berichten groepeert.
Je vindt dezelfde optie in Console > Instellingen .
CORS-fouten weergeven in console zorgt ervoor dat de console de CORS-fouten weergeeft die zijn geregistreerd.
Je vindt dezelfde optie in Console > Instellingen .
Door de enthousiaste evaluatie laat de console een voorbeeld van de uitvoer zien terwijl u een opdracht typt.
Je vindt dezelfde optie in Console > Instellingen .
Deze video toont verschillende uitvoervoorbeelden.
Beschouw code-evaluatie als een gebruikersactie die elke opdracht die u in de console uitvoert, omzet in gebruikersinteractie.
Met andere woorden, het stelt navigator.userActivation.isActive bij evaluatie in op true . Je vindt dezelfde optie in Console > Instellingen .
Deze video toont het evaluatieresultaat van navigator.userActivation.isActive voor en na het inschakelen van deze optie.
Console.trace()-berichten automatisch uitvouwen zorgt ervoor dat de console uitgebreide console.trace() berichten weergeeft wanneer deze worden geregistreerd.
Logboek behouden bij navigatie zorgt ervoor dat de console bij elke navigatie een bericht Navigated to ' logt en logboeken op alle pagina's opslaat.
Je vindt dezelfde optie in Console > Instellingen .
Verlenging
In dit gedeelte vindt u opties waarmee u de koppelingsverwerking voor Chrome DevTools-extensies kunt aanpassen.
Afhandeling van koppelingen stelt een optie in waarmee bestanden worden geopend wanneer u op een koppeling naar een bronbestand klikt, bijvoorbeeld in het deelvenster Elementen > Stijlen .
Vasthoudendheid
In deze sectie worden opties vermeld die bepalen hoe DevTools de wijzigingen opslaat die u aanbrengt.
Als u lokale overschrijvingen inschakelt, blijven de wijzigingen die u in bronnen aanbrengt bij het laden van pagina's in DevTools behouden.
Zie lokale overbruggen voor meer informatie.
Debugger
In dit gedeelte worden opties weergegeven die het debugger -gedrag regelen.
Met Disable JavaScript kunt u zien hoe uw webpagina eruit ziet en zich gedraagt wanneer JavaScript is uitgeschakeld .
Laad de pagina opnieuw om te zien of en hoe de pagina afhankelijk is van JavaScript tijdens het laden.
Wanneer JavaScript is uitgeschakeld, toont Chrome de overeenkomstige Icon in de adresbalk en Devtools toont een waarschuwing Icon naast bronnen .
Schakel async -stack -sporen uit en verbergt het "volledige verhaal" van de async -operatie in de call -stack .
Standaard probeert de debugger async -bewerkingen te traceren als het framework dat u gebruikt dergelijke tracering ondersteunt.
Zie Async Stack -sporen bekijken voor meer informatie.
Globaal
Deze sectie bevat opties met globale effecten in Devtools.
Auto-open devtools voor pop-ups opent DevTools wanneer u op Links klikt die nieuwe tabbladen openen. Dat wil zeggen, alle links met target=_blank .
Deze video laat eerst zien hoe je op een link kunt klikken en een nieuw tabblad * zonder * devTools kunt openen. Wanneer u deze optie inschakelt, wordt een nieuw tabblad geopend * met * devTools.
Zoeken zoals u typt, maakt Devtools "springt" naar het eerste zoekresultaat terwijl u uw zoekopdracht typt. Indien uitgeschakeld, neemt Devtools u alleen naar het resultaat wanneer u op Enter drukt.
Deze video laat eerst zien hoe Devtools "springt" terwijl u een zoekopdracht typt. Wanneer u deze optie vervolgens inschakelt, neemt DevTools u mee naar het eerste resultaat wanneer u op Enter drukt.
Synchroniseren
Met deze sectie kunt u de synchronisatie van instellingen tussen apparaten instellen.
Met Sync instellingen kunt u DevTools -instellingen synchroniseren op meerdere apparaten.
Om deze instelling te gebruiken, schakelt u eerst Chrome Sync in . Zie Sync -instellingen voor meer informatie.
Configureer het uiterlijk en het gedrag van devtools en zijn panelen met behulp van Instellingen > Voorkeuren . Dit tabblad bevat zowel algemene aanpassingsopties als paneelspecifieke.
Om voorkeuren in te stellen, openen Instellingen > Voorkeuren en scrol naar een van de volgende secties.
Om erachter te komen wat elke instelling doet, zoekt u deze pagina naar de naam van de instelling en breidt de beschrijving uit.
Deze referentie geeft verschillende instellingen aan met de volgende pictogrammen:
- Selectievakjes
- Vervolgkeuzelijsten
- Afgekeurd
Om de standaardvoorkeuren te herstellen, bladert u naar het einde van het tabblad Voorkeuren en klikt u op Standaardwaarden herstellen en herladen .
Verschijning
Dit gedeelte geeft een overzicht van opties die het uiterlijk van Devtools aanpassen.
Thema's Stelt een kleurenthema in voor DevTools UI.
Lay -out rangschikt ruiten in panelen.
Beïnvloedt elementen > stijlen en zustertabs en de bronnen > debugger -paneel. De Auto -optie zorgt ervoor dat de lay -out afhankelijk is van de breedte van Devtools.
Taal Stelt de locatie in voor DevTools UI.
Om deze instelling toe te passen, herlaad Devtools.
Schakel CTRL/CMD + 0 - 9 snelkoppeling in om van panelen te schakelen, kunt u openen met het toetsenbord.
Deze video laat zien hoe je tussen de tabbladen kunt schakelen met behulp van de bijbehorende sneltoetsen.
Uitschakeling Pauzus overlay verbergt de gepauzeerde in debugger Overlay in de viewport wanneer code -uitvoering wordt gepauzeerd.
Laat zien wat er nieuw is na elke update opent automatisch het tabblad What's New Lade na elke Chrome -update.
Bronnen
In dit gedeelte worden opties weergegeven die het paneel Bronnen aanpassen.
Zoek in anonieme en content scripts kunt u door alle geladen JavaScript -bestanden zoeken, inclusief die in Chrome -extensies, met behulp van het tabblad Zoeken .
Deze video laat zien hoe u naar tekst kunt zoeken in een uitbreidingsbronbestand.
Beweken bestanden automatisch in zijbalk Selecteert bestanden op het source > Paginakaneel wanneer u tussen tabbladen in de editor schakelt.
Deze video laat zien hoe, met deze optie ingeschakeld, het paneel Bronnen selecteert bestanden in de navigatieboom als u tussen tabbladen schakelt.
Door JavaScript Source Maps in te schakelen, kunnen Devtools bronnen van gegenereerde of geminificeerde JavaScript -bestanden vinden.
Inschakelen tabbladbewegingen focus maakt het Tableutel Verplaatsfocus in DevTools in plaats van een TAB -teken in de editor in te voegen.
Vereist om Devtools opnieuw te laden.
Deze video toont eerst Tab -tekens die zijn ingevoegd met de TAB -toets. Wanneer u deze optie inschakelt en Devtools opnieuw laadt, wordt de TAB -toets gericht.
Detecteren inspringen inspringen in het bronbestand dat in de editor is geopend.
Vereist om Devtools opnieuw te laden.
Deze video toont eerst de standaard inspringing van acht spaties. Wanneer u deze optie vervolgens inschakelt, overschrijft deze de standaardingspringing van het bronbestand.
Autocompletie maakt handige suggesties mogelijk in de redacteur .
Deze video toont eerst geen suggesties. Wanneer u deze optie inschakelt, toont de editor suggesties voor het voltooien van de opdracht.
Auto Bracket Sluiten voegt automatisch een slotbeugel of tag toe wanneer u een opening typt.
Deze video toont het typen van de openingsbeugels voor en na het inschakelen van automatische bracket -sluiting.
Bracket matching onderstreept en hoogtepunten in licht rood in de redacteur een vierkante beugel, krullende beugel of haakjes zonder een paar.
Met code vouwen kunt u codeblokken vouwen en ontvouwen in krullende beugels in de editor .
Vereist om Devtools opnieuw te laden.
Deze video laat zien hoe u codeblokken kunt opvouwen wanneer u deze optie inschakelt.
Toon witruimte -personages Toont witruimte -tekens in de editor .
Vereist om Devtools opnieuw te laden. Opties doen het volgende:
- Allen duiden alle witruimtekens aan als stippen (
...). Bovendien geeft de editor het tab -teken aan als een regel (—). - Hoogtepunten achtervolgende witruimtekens aan het einde van de lijnen in lichtrood .
Variabele waarden inline weergeven tijdens het debuggen toont u de variabele waarden naast toewijzingsverklaringen terwijl de uitvoering wordt gepauzeerd.
Focusbronnen paneel bij het activeren van een breekpunt opent bronnen > Editor aan de lijn met het breekpunt dat de uitvoering pauzeerde.
Deze video toont eerst het bronnenpaneel onscherp wanneer ze op een breekpunt zijn gepauzeerd. Wanneer u deze optie inschakelt, opent Devtools de editor in het paneel Bronnen en toont u de codelijn met het breekpunt.
Automatisch mooie gedrukte geminifieerde bronnen maken die bronnen leesbaar.
Wanneer deze mooi wordt gedrukt , kan de editor een enkele lange codelijn in meerdere regels weergeven, voorafgegaan door - om aan te geven dat het een lijnuitgifte is.
Met behulp van CSS -bronnenkaarten kunnen Devtools de bronnen van gegenereerde CSS -bestanden vinden, bijvoorbeeld .scss , en ze aan u laten zien.
Met scrollen voorbij het einde van het bestand kunt u verder scrollen dan de laatste regel in de editor .
Deze video laat zien hoe je voorbij het einde van het bestand kunt scrollen wanneer je deze optie inschakelt.
Laat Devtools bronnen, zoals brongaarten, uit externe bestandspaden laden . Standaard uitgeschakeld om veiligheidsredenen.
Indien uitgeschakeld gelaten, logt Devtools aan op de console -berichten vergelijkbaar met het volgende:
Standaard inspringing Hiermee kunt u het aantal spaties kiezen TAB -toets voegt in de editor in.
Dit voorbeeld laat zien hoe je de standaard inspringing eerst op acht ruimtes kunt instellen en vervolgens op een TAB -teken.
Elementen
In dit gedeelte worden opties weergegeven die het elementenpaneel aanpassen.
Show User Agent Shadow Dom geeft Shadow Dom -knooppunten weer in de DOM -boom.
Woordwikkel breekt lange lijnen in de DOM -boom en wikkelt ze naar de volgende lijn.
HTML -opmerkingen tonen Toont HTML -opmerkingen in de DOM -boom.
Onthul DOM -knooppunt op Hover selecteert het overeenkomstige knooppunt in de DOM -boom terwijl u over een element in de Viewport in zweeft Inspecteermodus.
Deze video laat eerst zien dat DOM -knooppunten niet worden geselecteerd in de DOM -boom. Wanneer u deze optie inschakelt, selecteert het elementenpaneel de knooppunten op Hover.
Toon gedetailleerde inspectietool geeft de tooltip weer in het viewport in Inspecteer de modus terwijl u over een element zweeft.
Toon heersers op Hover toont de heersers in het Viewport terwijl u over elementen in de DOM -boom zweeft.
Toon CSS -documentatie Tooltip geeft een tooltip weer met een korte beschrijving wanneer u over een eigenschap in het Styles -deelvenster zweeft.
De meer Link Meer Link brengt u een MDN CSS -referentie op de eigenschap.
Netwerk
In dit gedeelte worden opties weergegeven die het netwerkpaneel aanpassen. De meeste opties zijn hetzelfde als in de instellingen van het paneel.
Het logboek van het behouden is hetzelfde als het behouden van log in het netwerkpaneel . Slaat verzoeken op over pagina -laden.
Deze video toont eerst de aanvragen van de aanvragen die vernieuwd zijn op pagina opnieuw laden en bleef bestaan wanneer u deze optie inschakelt.
Record Network Log is hetzelfde als Netwerk inloggen in het netwerkpaneel . Start of stopt met het opnemen van verzoeken in het netwerklogboek.
Netwerkaanvraag blokkeren blokkeerblokkenverzoeken die overeenkomen met patronen in de netwerkaanvraagblokkeerlade .
Deze video laat eerst zien dat de verzoeken niet worden geblokkeerd. Nadat u deze optie hebt ingeschakeld, blokkeert een patroon in het netwerkverzoek dat de lade blokkeert .
Uitschakelen Cache (terwijl DevTools open is) is hetzelfde als het uitschakelen van cache in het netwerkpaneel . Schakelt de browsercache uit.
Laat HAR genereren met gevoelige gegevens, voegt opties toe aan de Export HAR -knop waarmee u kunt exporteren met of zonder gevoelige gegevens (gesaniteerd).
Gevoelige gegevens zijn de gegevens in Cookie , Set-Cookie en Authorization .
Kleurcode resource types markeert verzoeken in verschillende kleuren, afhankelijk van hun type in de watervalkolom van het netwerklogboek.
Groepsnetwerklogboek voor frame is hetzelfde als groep door frames in het netwerkpaneel . Deze optie groeit verzoeken om geïnitieerd door inline frames.
Force AD -blokkering op deze site blokkeert gedetecteerde advertenties op de pagina terwijl DevTools open is.
Prestatie
Dit gedeelte geeft een overzicht van opties die het prestatiepaneel aanpassen.
Flamechart muiswielactie wijst scroll- of zoomactie toe aan uw muiswiel wanneer u door de vlamgrafiek navigeert.
Dit voorbeeld toont zowel scroll- als zoommuiswielacties op een vlamgrafiek in het prestatiepaneel .
Troosten
In dit gedeelte worden opties weergegeven die de console aanpassen. De meeste opties zijn hetzelfde als in console -instellingen .
Netwerkberichten verbergen verbergt netwerkberichten in de console .
Deze video laat zien hoe u netwerkberichten kunt verbergen met deze optie beide in Instellingen en in console -instellingen .
Geselecteerde context laat de console alleen berichten weergeven voor de geselecteerde context: top, iframe, werknemer of extensie.
Deze video laat zien hoe deze optie beide in te schakelen Instellingen en in console> Instellingen en selecteer de context in de console .
Log XMLHTTPRequests maakt de console -log XHR en haalt aanvragen op.
Deze video laat zien hoe deze optie beide in te schakelen Instellingen en console> Instellingen en log de XHR finished loading berichten naar de console .
Toon tijdstempels laat de console tijdstempels zien naast berichten.
Autocomplete uit de geschiedenis zorgt ervoor dat de console opdrachten suggereren die u eerder liep terwijl u typt.
U kunt dezelfde optie vinden in Console> Instellingen .
Accepteer autocomplete suggestie op Enter maakt de console de geselecteerde suggestie van de autocomplete vervolgkeuzelijst wanneer u op Enter drukt.
Deze video laat zien wat er gebeurt wanneer u voor en na het inschakelen van deze optie op Enter drukt.
Groep vergelijkbare berichten in console maakt de consolegroep vergelijkbare berichten samen.
U kunt dezelfde optie vinden in Console> Instellingen .
Toon CORS -fouten in de console laat de console de CORS -fouten laten zien die het heeft vastgelegd.
U kunt dezelfde optie vinden in Console> Instellingen .
Grote evaluatie zorgt ervoor dat de console een preview van een uitvoer weergeeft terwijl u een opdracht A typt.
U kunt dezelfde optie vinden in Console> Instellingen .
Deze video toont verschillende uitvoervoorbeelden.
Behandel code -evaluatie als gebruikersactie omzet elke opdracht die u in de console uitvoert in gebruikersinteractie.
Met andere woorden, het stelt navigator.userActivation.isActive in. ISACTIVE TO true Bij evaluatie. U kunt dezelfde optie vinden in Console> Instellingen .
Deze video toont het evaluatieresultaat van navigator.userActivation.isActive voor en na het inschakelen van deze optie.
Console.trace () -berichten automatisch uitbreiden, maakt het Console Display Expanded console.trace() -berichten wanneer het ze logt.
Het behouden van log op navigatie maakt het console -logboek een Navigated to bericht bij elke navigatie en bewaar logboeken op alle pagina's.
U kunt dezelfde optie vinden in Console> Instellingen .
Verlenging
Dit gedeelte geeft een overzicht van opties die linkverwerking aanpassen voor Chrome DevTools -extensies.
Linkafhandeling Stelt een optie in om bestanden te openen wanneer u op een link naar een bronbestand klikt, bijvoorbeeld in het deelvenster Elements > Styles .
Vasthoudendheid
In dit gedeelte worden opties weergegeven die bepalen hoe Devtools de wijzigingen die u aanbrengt, opslaat.
Lokale overschrijvingen inschakelen maakt Devtools aanhouden wijzigingen die u aanbrengt in bronnen over pagina -laden.
Zie lokale overbruggen voor meer informatie.
Debugger
In dit gedeelte worden opties weergegeven die het debugger -gedrag regelen.
Met Disable JavaScript kunt u zien hoe uw webpagina eruit ziet en zich gedraagt wanneer JavaScript is uitgeschakeld .
Laad de pagina opnieuw om te zien of en hoe de pagina afhankelijk is van JavaScript tijdens het laden.
Wanneer JavaScript is uitgeschakeld, toont Chrome de overeenkomstige Icon in de adresbalk en Devtools toont een waarschuwing Icon naast bronnen .
Schakel async -stack -sporen uit en verbergt het "volledige verhaal" van de async -operatie in de call -stack .
Standaard probeert de debugger async -bewerkingen te traceren als het framework dat u gebruikt dergelijke tracering ondersteunt.
Zie Async Stack -sporen bekijken voor meer informatie.
Globaal
Deze sectie bevat opties met globale effecten in Devtools.
Auto-open devtools voor pop-ups opent DevTools wanneer u op Links klikt die nieuwe tabbladen openen. Dat wil zeggen, alle links met target=_blank .
Deze video laat eerst zien hoe je op een link kunt klikken en een nieuw tabblad * zonder * devTools kunt openen. Wanneer u deze optie inschakelt, wordt een nieuw tabblad geopend * met * devTools.
Zoeken zoals u typt, maakt Devtools "springt" naar het eerste zoekresultaat terwijl u uw zoekopdracht typt. Indien uitgeschakeld, neemt Devtools u alleen naar het resultaat wanneer u op Enter drukt.
Deze video laat eerst zien hoe Devtools "springt" terwijl u een zoekopdracht typt. Wanneer u deze optie vervolgens inschakelt, neemt DevTools u mee naar het eerste resultaat wanneer u op Enter drukt.
Synchroniseren
Met deze sectie kunt u de synchronisatie van instellingen tussen apparaten instellen.
Met Sync instellingen kunt u DevTools -instellingen synchroniseren op meerdere apparaten.
Om deze instelling te gebruiken, schakelt u eerst Chrome Sync in . Zie Sync -instellingen voor meer informatie.
Configureer het uiterlijk en het gedrag van devtools en zijn panelen met behulp van Instellingen > Voorkeuren . Dit tabblad bevat zowel algemene aanpassingsopties als paneelspecifieke.
Om voorkeuren in te stellen, openen Instellingen > Voorkeuren en scrol naar een van de volgende secties.
Om erachter te komen wat elke instelling doet, zoekt u deze pagina naar de naam van de instelling en breidt de beschrijving uit.
Deze referentie geeft verschillende instellingen aan met de volgende pictogrammen:
- Selectievakjes
- Vervolgkeuzelijsten
- Afgekeurd
Om de standaardvoorkeuren te herstellen, bladert u naar het einde van het tabblad Voorkeuren en klikt u op Standaardwaarden herstellen en herladen .
Verschijning
Dit gedeelte geeft een overzicht van opties die het uiterlijk van Devtools aanpassen.
Thema's Stelt een kleurenthema in voor DevTools UI.
Lay -out rangschikt ruiten in panelen.
Beïnvloedt elementen > stijlen en zustertabs en de bronnen > debugger -paneel. De Auto -optie zorgt ervoor dat de lay -out afhankelijk is van de breedte van Devtools.
Taal Stelt de locatie in voor DevTools UI.
Om deze instelling toe te passen, herlaad Devtools.
Schakel CTRL/CMD + 0 - 9 snelkoppeling in om van panelen te schakelen, kunt u openen met het toetsenbord.
Deze video laat zien hoe je tussen de tabbladen kunt schakelen met behulp van de bijbehorende sneltoetsen.
Uitschakeling Pauzus overlay verbergt de gepauzeerde in debugger Overlay in de viewport wanneer code -uitvoering wordt gepauzeerd.
Laat zien wat er nieuw is na elke update opent automatisch het tabblad What's New Lade na elke Chrome -update.
Bronnen
In dit gedeelte worden opties weergegeven die het paneel Bronnen aanpassen.
Zoek in anonieme en content scripts kunt u door alle geladen JavaScript -bestanden zoeken, inclusief die in Chrome -extensies, met behulp van het tabblad Zoeken .
Deze video laat zien hoe u naar tekst kunt zoeken in een uitbreidingsbronbestand.
Beweken bestanden automatisch in zijbalk Selecteert bestanden op het source > Paginakaneel wanneer u tussen tabbladen in de editor schakelt.
Deze video laat zien hoe, met deze optie ingeschakeld, het paneel Bronnen selecteert bestanden in de navigatieboom als u tussen tabbladen schakelt.
Door JavaScript Source Maps in te schakelen, kunnen Devtools bronnen van gegenereerde of geminificeerde JavaScript -bestanden vinden.
Inschakelen tabbladbewegingen focus maakt het Tableutel Verplaatsfocus in DevTools in plaats van een TAB -teken in de editor in te voegen.
Vereist om Devtools opnieuw te laden.
Deze video toont eerst Tab -tekens die zijn ingevoegd met de TAB -toets. Wanneer u deze optie inschakelt en Devtools opnieuw laadt, wordt de TAB -toets gericht.
Detecteren inspringen inspringen in het bronbestand dat in de editor is geopend.
Vereist om Devtools opnieuw te laden.
Deze video toont eerst de standaard inspringing van acht spaties. Wanneer u deze optie vervolgens inschakelt, overschrijft deze de standaardingspringing van het bronbestand.
Autocompletie maakt handige suggesties mogelijk in de redacteur .
Deze video toont eerst geen suggesties. Wanneer u deze optie inschakelt, toont de editor suggesties voor het voltooien van de opdracht.
Auto Bracket Sluiten voegt automatisch een slotbeugel of tag toe wanneer u een opening typt.
Deze video toont het typen van de openingsbeugels voor en na het inschakelen van automatische bracket -sluiting.
Bracket matching onderstreept en hoogtepunten in licht rood in de redacteur een vierkante beugel, krullende beugel of haakjes zonder een paar.
Met code vouwen kunt u codeblokken vouwen en ontvouwen in krullende beugels in de editor .
Vereist om Devtools opnieuw te laden.
Deze video laat zien hoe u codeblokken kunt opvouwen wanneer u deze optie inschakelt.
Toon witruimte -personages Toont witruimte -tekens in de editor .
Vereist om Devtools opnieuw te laden. Opties doen het volgende:
- Allen duiden alle witruimtekens aan als stippen (
...). Bovendien geeft de editor het tab -teken aan als een regel (—). - Hoogtepunten achtervolgende witruimtekens aan het einde van de lijnen in lichtrood .
Variabele waarden inline weergeven tijdens het debuggen toont u de variabele waarden naast toewijzingsverklaringen terwijl de uitvoering wordt gepauzeerd.
Focusbronnen paneel bij het activeren van een breekpunt opent bronnen > Editor aan de lijn met het breekpunt dat de uitvoering pauzeerde.
Deze video toont eerst het bronnenpaneel onscherp wanneer ze op een breekpunt zijn gepauzeerd. Wanneer u deze optie inschakelt, opent Devtools de editor in het paneel Bronnen en toont u de codelijn met het breekpunt.
Automatisch mooie gedrukte geminifieerde bronnen maken die bronnen leesbaar.
Wanneer deze mooi wordt gedrukt , kan de editor een enkele lange codelijn in meerdere regels weergeven, voorafgegaan door - om aan te geven dat het een lijnuitgifte is.
Met behulp van CSS -bronnenkaarten kunnen Devtools de bronnen van gegenereerde CSS -bestanden vinden, bijvoorbeeld .scss , en ze aan u laten zien.
Met scrollen voorbij het einde van het bestand kunt u verder scrollen dan de laatste regel in de editor .
Deze video laat zien hoe je voorbij het einde van het bestand kunt scrollen wanneer je deze optie inschakelt.
Laat Devtools bronnen, zoals brongaarten, uit externe bestandspaden laden . Standaard uitgeschakeld om veiligheidsredenen.
Indien uitgeschakeld gelaten, logt Devtools aan op de console -berichten vergelijkbaar met het volgende:
Standaard inspringing Hiermee kunt u het aantal spaties kiezen TAB -toets voegt in de editor in.
Dit voorbeeld laat zien hoe je de standaard inspringing eerst op acht ruimtes kunt instellen en vervolgens op een TAB -teken.
Elementen
In dit gedeelte worden opties weergegeven die het elementenpaneel aanpassen.
Show User Agent Shadow Dom geeft Shadow Dom -knooppunten weer in de DOM -boom.
Woordwikkel breekt lange lijnen in de DOM -boom en wikkelt ze naar de volgende lijn.
HTML -opmerkingen tonen Toont HTML -opmerkingen in de DOM -boom.
Onthul DOM -knooppunt op Hover selecteert het overeenkomstige knooppunt in de DOM -boom terwijl u over een element in de Viewport in zweeft Inspecteermodus.
Deze video laat eerst zien dat DOM -knooppunten niet worden geselecteerd in de DOM -boom. Wanneer u deze optie inschakelt, selecteert het elementenpaneel de knooppunten op Hover.
Toon gedetailleerde inspectietool geeft de tooltip weer in het viewport in Inspecteer de modus terwijl u over een element zweeft.
Toon heersers op Hover toont de heersers in het Viewport terwijl u over elementen in de DOM -boom zweeft.
Toon CSS -documentatie Tooltip geeft een tooltip weer met een korte beschrijving wanneer u over een eigenschap in het Styles -deelvenster zweeft.
De meer Link Meer Link brengt u een MDN CSS -referentie op de eigenschap.
Netwerk
In dit gedeelte worden opties weergegeven die het netwerkpaneel aanpassen. De meeste opties zijn hetzelfde als in de instellingen van het paneel.
Het logboek van het behouden is hetzelfde als het behouden van log in het netwerkpaneel . Slaat verzoeken op over pagina -laden.
Deze video toont eerst de aanvragen van de aanvragen die vernieuwd zijn op pagina opnieuw laden en bleef bestaan wanneer u deze optie inschakelt.
Record Network Log is hetzelfde als Netwerk inloggen in het netwerkpaneel . Start of stopt met het opnemen van verzoeken in het netwerklogboek.
Netwerkaanvraag blokkeren blokkeerblokkenverzoeken die overeenkomen met patronen in de netwerkaanvraagblokkeerlade .
Deze video laat eerst zien dat de verzoeken niet worden geblokkeerd. Nadat u deze optie hebt ingeschakeld, blokkeert een patroon in het netwerkverzoek dat de lade blokkeert .
Uitschakelen Cache (terwijl DevTools open is) is hetzelfde als het uitschakelen van cache in het netwerkpaneel . Schakelt de browsercache uit.
Laat HAR genereren met gevoelige gegevens, voegt opties toe aan de Export HAR -knop waarmee u kunt exporteren met of zonder gevoelige gegevens (gesaniteerd).
Gevoelige gegevens zijn de gegevens in Cookie , Set-Cookie en Authorization .
Kleurcode resource types markeert verzoeken in verschillende kleuren, afhankelijk van hun type in de watervalkolom van het netwerklogboek.
Groepsnetwerklogboek voor frame is hetzelfde als groep door frames in het netwerkpaneel . Deze optie groeit verzoeken om geïnitieerd door inline frames.
Force AD -blokkering op deze site blokkeert gedetecteerde advertenties op de pagina terwijl DevTools open is.
Prestatie
Dit gedeelte geeft een overzicht van opties die het prestatiepaneel aanpassen.
Flamechart muiswielactie wijst scroll- of zoomactie toe aan uw muiswiel wanneer u door de vlamgrafiek navigeert.
Dit voorbeeld toont zowel scroll- als zoommuiswielacties op een vlamgrafiek in het prestatiepaneel .
Troosten
In dit gedeelte worden opties weergegeven die de console aanpassen. De meeste opties zijn hetzelfde als in console -instellingen .
Netwerkberichten verbergen verbergt netwerkberichten in de console .
Deze video laat zien hoe u netwerkberichten kunt verbergen met deze optie beide in Instellingen en in console -instellingen .
Geselecteerde context laat de console alleen berichten weergeven voor de geselecteerde context: top, iframe, werknemer of extensie.
Deze video laat zien hoe deze optie beide in te schakelen Instellingen en in console> Instellingen en selecteer de context in de console .
Log XMLHTTPRequests maakt de console -log XHR en haalt aanvragen op.
Deze video laat zien hoe deze optie beide in te schakelen Instellingen en console> Instellingen en log de XHR finished loading berichten naar de console .
Toon tijdstempels laat de console tijdstempels zien naast berichten.
Autocomplete uit de geschiedenis zorgt ervoor dat de console opdrachten suggereren die u eerder liep terwijl u typt.
U kunt dezelfde optie vinden in Console> Instellingen .
Accepteer autocomplete suggestie op Enter maakt de console de geselecteerde suggestie van de autocomplete vervolgkeuzelijst wanneer u op Enter drukt.
Deze video laat zien wat er gebeurt wanneer u voor en na het inschakelen van deze optie op Enter drukt.
Groep vergelijkbare berichten in console maakt de consolegroep vergelijkbare berichten samen.
U kunt dezelfde optie vinden in Console> Instellingen .
Show CORS errors in console makes the Console show the CORS errors it logged.
You can find the same option in Console > Settings .
Eager evaluation makes the Console show a preview of an output as you type a command.
You can find the same option in Console > Settings .
This video shows various output previews.
Treat code evaluation as user action turns any command you run in the Console into user interaction.
In other words, it sets navigator.userActivation.isActive to true upon evaluation. You can find the same option in Console > Settings .
This video shows the evaluation result of navigator.userActivation.isActive before and after enabling this option.
Automatically expand console.trace() messages makes the Console display expanded console.trace() messages when it logs them.
Preserve log upon navigation makes the Console log a Navigated to message upon every navigation and save logs across all pages.
You can find the same option in Console > Settings .
Verlenging
This section lists options that customize link handling for Chrome DevTools extensions.
Link handling sets an option to open files with when you click a link to a source file, for example, in the Elements > Styles pane.
Vasthoudendheid
This section lists options that control how DevTools saves the changes you make.
Enable local overrides makes DevTools persist changes you make to sources across page loads.
For more information, see Local Overrides .
Debugger
This section lists options that control the Debugger behavior.
Disable JavaScript lets you see how your web page looks and behaves when JavaScript is disabled .
Reload the page to see if and how the page depends on JavaScript while loading.
When JavaScript is disabled, Chrome shows the corresponding icon in the address bar and DevTools shows a warning icon next to Sources .
Disable async stack traces hides the "full story" of the async operation in the Call Stack .
By default, the Debugger tries to trace async operations if the framework you're using supports such tracing.
For more information, see View async stack traces .
Globaal
This section lists options that have global effects in DevTools.
Auto-open DevTools for popups opens DevTools when you click links that open new tabs. That is, all links with target=_blank .
This video first shows how to click a link and open a new tab *without* DevTools. Then when you enable this option, a new tab opens *with* DevTools.
Search as you type makes DevTools "jump" to the first search result as you type your search query. If disabled, DevTools takes you to the result only when you press Enter .
This video first shows how DevTools "jumps" as you type a search query. Then when you enable this option, DevTools takes you to the first result when you press Enter .
Synchroniseren
This section lets you set up the synchronization of settings between devices.
Enable settings sync lets you sync DevTools settings across multiple devices.
To use this setting, first enable Chrome Sync . For more information, see Sync settings .