Overzicht bronnenpaneel

Kayce Basken
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

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

Overzicht

Met 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 Command-menu door op de volgende toets te drukken:
    • macOS: Command + Shift + P
    • Windows, Linux, ChromeOS: Control + Shift + P
  3. Begin met het typen sources , selecteer het paneel 'Bronnen weergeven' en druk op Enter .

Als alternatief kunt u in de rechterbovenhoek 'more_vert' selecteren: Meer opties > Meer tools > Bronnen .

Bestanden bekijken

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 . Je vindt top op elke pagina die je bezoekt. top vertegenwoordigt het hoofdframe van het document.
  • Het tweede niveau, zoals developers.google.com in de bovenstaande schermafbeelding, vertegenwoordigt een oorsprong .
  • Het derde, vierde niveau, enzovoort, vertegenwoordigen mappen en bronnen die vanaf die oorsprong zijn geladen. Op 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 tabblad Pagina om de inhoud ervan te bekijken in het tabblad Editor . U kunt elk type bestand bekijken. Bij afbeeldingen ziet u een voorbeeld van de afbeelding.

Een bestand bekijken in het tabblad Editor.

CSS en JavaScript bewerken

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 je ook bij het debuggen. Zo worden bijvoorbeeld syntaxfouten en andere problemen, zoals mislukte CSS @import en url() -instructies en HTML href attributen met ongeldige URL's, onderstreept en worden er inline foutmeldingen weergegeven.

Een tooltip voor een inline syntaxfout.

Als je de background-color van een element wijzigt, zie je dat de wijziging direct van kracht wordt.

CSS bewerken in 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 alleen de JavaScript-wijzigingen die u binnen functies aanbrengt, worden van kracht. Let bijvoorbeeld op hoe console.log('A') niet wordt uitgevoerd, terwijl console.log('B') dat wel doet.

JavaScript bewerken in het tabblad Editor.

Als DevTools het hele script opnieuw had uitgevoerd na de wijziging, dan zou de tekst A in de console zijn weergegeven.

DevTools wist je CSS- en JavaScript-wijzigingen wanneer je de pagina opnieuw laadt. Zie ' Een werkruimte instellen' voor meer informatie over het opslaan van de wijzigingen in je bestandssysteem.

Snippets maken, opslaan en uitvoeren

Snippets zijn scripts die je 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 codefragment (Snippet) en het met een paar muisklikken uitvoeren wanneer u het nodig hebt. DevTools slaat het codefragment op in uw bestandssysteem. Bekijk bijvoorbeeld een codefragment dat de jQuery-bibliotheek in een pagina invoegt.

Een codefragment dat de jQuery-bibliotheek in een pagina invoegt.

Om een ​​codefragment uit te voeren:

  • Open het bestand in het tabblad Snippets en klik op Uitvoeren. De knop 'Uitvoeren'. op de actiebalk onderaan.
  • Open het opdrachtmenu , verwijder het > -teken, typ ! , typ de naam van je codefragment en druk op Enter.

Zie Codefragmenten uitvoeren vanaf elke pagina voor meer informatie.

Debug JavaScript

In plaats van console.log() te gebruiken om te achterhalen waar je JavaScript misgaat, kun je beter de debugtools van Chrome DevTools gebruiken. Het idee is om een ​​breakpoint in te stellen, een opzettelijke stop in je code, en vervolgens de uitvoering van je code regel voor regel te doorlopen.

Pauzeren bij een breekpunt.

Tijdens het doorlopen van de code 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 om de basisprincipes van debuggen in DevTools te leren.

Concentreer je alleen op je code.

Met Chrome DevTools kunt u zich volledig richten op de code die u zelf schrijft, door de ruis te filteren die wordt gegenereerd door frameworks en buildtools die u gebruikt bij het bouwen van webapplicaties.

Om u een moderne webdebuggingervaring te bieden, doet DevTools het volgende:

Daarnaast tonen de aanroepstack in de debugger en de stacktraces in de console , indien ondersteund door frameworks, de volledige geschiedenis van asynchrone bewerkingen.

Voor meer informatie, zie:

Een werkruimte inrichten

Standaard gaan de wijzigingen die je aanbrengt in een bestand in het paneel Bronnen verloren wanneer je de pagina opnieuw laadt. Met Werkruimtes kun je de wijzigingen die je in DevTools aanbrengt opslaan in je bestandssysteem. Zo kun je DevTools in feite als code-editor gebruiken.

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