Overzicht bronnenpaneel

Kayce Basques

Sofia Emelianova

Gebruik het paneel Chrome DevTools -bronnen om:

• Bekijk bestanden .
• Bewerk CSS en JavaScript .
• Maak en bewaar fragmenten van JavaScript , die u op elke pagina kunt uitvoeren. Fragmenten zijn vergelijkbaar met bookmarklets.
• Debug JavaScript .
• Stel een Workspace in , zodat wijzigingen die u in DevTools aanbrengt, worden opgeslagen in de code op uw bestandssysteem.

Bekijk bestanden

Gebruik het paginavenster om alle bronnen te bekijken die de pagina heeft geladen.

Hoe het paginavenster is georganiseerd:

• Het hoogste niveau, zoals top in de bovenstaande schermafbeelding, vertegenwoordigt een HTML-frame . U vindt top op elke pagina die u bezoekt. top vertegenwoordigt het hoofddocumentframe.
• Het tweede niveau, zoals developers.google.com in de bovenstaande schermafbeelding, vertegenwoordigt een origin .
• Het derde niveau, het vierde niveau, enzovoort, vertegenwoordigen mappen en bronnen die vanaf die oorsprong zijn geladen. In de bovenstaande schermafbeelding is het volledige pad naar de bron devsite-googler-button bijvoorbeeld developers.google.com/_static/19aa27122b/css/devsite-googler-button .

Klik op een bestand in het paginavenster om de inhoud ervan in het editorvenster te bekijken. U kunt elk type bestand bekijken. Bij afbeeldingen zie je een voorbeeld van de afbeelding.

Opmerking: houd er rekening mee dat het paginavenster alleen de geladen en geïmplementeerde stijlbladen weergeeft.

Bewerk CSS en JavaScript

Gebruik het Editor- paneel om CSS en JavaScript te bewerken. DevTools werkt de pagina bij om uw nieuwe code uit te voeren.

De Editor helpt u ook met het opsporen van fouten. Het onderstreept en toont bijvoorbeeld inline tooltips voor fouten naast syntaxisfouten en andere problemen, zoals mislukte CSS @import en url() -instructies, en HTML href attributen met ongeldige URL's.

Als u de background-color van een element bewerkt, ziet u dat de wijziging onmiddellijk van kracht wordt.

Om JavaScript-wijzigingen door te voeren, drukt u op Command + S (Mac) of Control + S (Windows, Linux). DevTools voert een script niet opnieuw uit, dus de enige JavaScript-wijzigingen die van kracht worden, zijn de wijzigingen die u binnen functies aanbrengt. Merk bijvoorbeeld op dat console.log('A') niet wordt uitgevoerd, terwijl console.log('B') dat wel doet.

Als DevTools het hele script opnieuw zou uitvoeren na het aanbrengen van de wijziging, zou de tekst A in de Console zijn vastgelegd.

DevTools wist uw CSS- en JavaScript-wijzigingen wanneer u de pagina opnieuw laadt. Zie Een werkruimte instellen om te leren hoe u de wijzigingen in uw bestandssysteem kunt opslaan.

Fragmenten maken, opslaan en uitvoeren

Snippets zijn scripts die u op elke pagina kunt uitvoeren. Stel je voor dat je herhaaldelijk de volgende code in de Console typt om de jQuery-bibliotheek in een pagina in te voegen, zodat je jQuery-opdrachten vanuit de Console kunt uitvoeren:

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

In plaats daarvan kunt u deze code opslaan in een fragment en deze met een paar klikken op de knop uitvoeren, wanneer u maar wilt. DevTools slaat het fragment op in uw bestandssysteem. Onderzoek bijvoorbeeld een fragment dat de jQuery-bibliotheek in een pagina invoegt.

Een fragment uitvoeren:

• Open het bestand in het deelvenster Fragmenten en klik op Uitvoeren op de actiebalk onderaan.
• Open het Commandomenu , verwijder het teken > , typ ! , typ de naam van uw fragment en druk vervolgens op Enter.

Zie Codefragmenten vanaf elke pagina uitvoeren voor meer informatie.

Debug JavaScript

In plaats van console.log() te gebruiken om af te leiden waar uw JavaScript fout gaat, kunt u overwegen om in plaats daarvan de foutopsporingstools van Chrome DevTools te gebruiken. Het algemene idee is om een ​​breekpunt in te stellen, wat een opzettelijke stopplaats in uw code is, en vervolgens de uitvoering van uw code regel voor regel te doorlopen.

Terwijl u door de code loopt, kunt u de waarden van alle momenteel gedefinieerde eigenschappen en variabelen bekijken en wijzigen, JavaScript uitvoeren in de Console en meer.

Zie Aan de slag met het debuggen van JavaScript voor meer informatie over de basisprincipes van het debuggen in DevTools.

Concentreer u alleen op uw code

Opmerking: de volgende functies zijn beschikbaar vanaf Chrome-versie 106.

Met Chrome DevTools kunt u zich alleen concentreren op de code die u schrijft door de ruis die wordt gegenereerd door frameworks weg te filteren en tools te bouwen die u gebruikt bij het bouwen van webapplicaties.

Om u de moderne webfoutopsporingservaring te bieden, doet DevTools het volgende:

• Scheidt geschreven en geïmplementeerde code . Om u te helpen uw code sneller te vinden, scheidt het Bronnenpaneel de code die u maakt van de gebundelde en verkleinde code.
• Negeert bekende code van derden :
  • Het Bronnenpaneel verbergt dergelijke bronnen uit de bestandsstructuur in het Paginapaneel .
  • De console verbergt dergelijke frames voor stapelsporen .
  • Het menu Bestand openen verbergt dergelijke bestanden voor de zoekresultaten .

Bovendien tonen de Call Stack in de debugger en de stacktraces in de Console , indien ondersteund door frameworks, de volledige geschiedenis van asynchrone bewerkingen.

Voor meer informatie, zie:

• Moderne webfoutopsporing in Chrome DevTools
• Casestudy: Betere foutopsporing met DevTools

Zet een werkruimte op

Wanneer u een bestand in het Bronnenpaneel bewerkt, gaan deze wijzigingen standaard verloren wanneer u de pagina opnieuw laadt. Met werkruimten kunt u de wijzigingen die u in DevTools aanbrengt, opslaan in uw bestandssysteem. Hiermee kunt u in wezen DevTools als uw code-editor gebruiken.

Zie Bestanden bewerken met werkruimten om aan de slag te gaan.