Overzicht bronnenpaneel

Kayce Basken
Sofia Emelianova
Sofia Emelianova
GitHub

Gebruik het paneel Bronnen om de bronnen van uw website, zoals stylesheets, JavaScript-bestanden en afbeeldingen, te bekijken en te bewerken.

Overzicht

In het paneel Bronnen kunt u het volgende doen:

Open het paneel Bronnen

Volg deze stappen om het paneel Bronnen te openen:

  1. Open DevTools .
  2. Open het Commandomenu door op te drukken:
    • macOS: Command + Shift + P
    • Windows, Linux, ChromeOS: Control + Shift + P
  3. Begin met het typen sources , selecteer paneel Bronnen weergeven en druk op Enter .

U kunt ook in de rechterbovenhoek more_vert Meer opties > Meer hulpmiddelen > Bronnen selecteren.

Bekijk bestanden

Klik op het tabblad Pagina om alle bronnen te bekijken die op de pagina zijn geladen.

Het tabblad Pagina.

Hoe het tabblad Pagina 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 op het tabblad Pagina om de inhoud ervan te bekijken op het tabblad Editor . U kunt elk type bestand bekijken. Bij afbeeldingen zie je een voorbeeld van de afbeelding.

Een bestand bekijken op het tabblad Editor.

Bewerk CSS en JavaScript

Klik op het tabblad Editor om CSS en JavaScript te bewerken. DevTools werkt de pagina bij om uw nieuwe code uit te voeren.

De Editor helpt u ook bij het debuggen. 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 op het tabblad Editor.

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 op het tabblad Editor.

Als DevTools het volledige 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 op het tabblad 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.