Overzicht bronnenpaneel

Sofia Emelianova
Sofia Emelianova

Gebruik het paneel Chrome DevTools- bronnen om:

Bekijk bestanden

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

Het paginavenster.

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.

Een bestand bekijken in het Editor-venster.

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.

Een tooltip voor inline-syntaxisfouten.

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

CSS bewerken in het Editor-venster.

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.

JavaScript bewerken in het Editor-venster.

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.

Creëer, bewaar en voer fragmenten uit

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 dat de jQuery-bibliotheek in een pagina invoegt.

Een fragment uitvoeren:

  • Open het bestand in het deelvenster Fragmenten en klik op Uitvoeren De knop 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.

Pauzeren op een breekpunt.

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

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:

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:

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.