Overzicht van alle interne en externe geladen scripts in Chrome

Scripts analyseren met de browser Inspector Tools Console tab

Browsers bieden een scala aan ontwikkeltools waarmee ontwikkelaars dieper in websites kunnen duiken om te begrijpen hoe deze zijn opgebouwd en hoe ze presteren. Een van deze krachtige tools is de “Console” tab in de Inspector Tools, waarmee ontwikkelaars JavaScript-code kunnen uitvoeren, logboeken kunnen bekijken en zelfs scripts kunnen analyseren die op een webpagina worden geladen. In dit artikel zullen we bekijken hoe je de Inspector Tools Console Tab kunt gebruiken om scripts op een webpagina te analyseren en te categoriseren als eerste of derde partij.

Stap 1: open de Inspector Tools Console tab

Voordat we beginnen met het analyseren van scripts, moeten we eerst de Inspector Tools Console Tab openen. Dit kan meestal worden gedaan door met de rechtermuisknop op een webpagina te klikken en “Inspecteren” te selecteren of door de sneltoetsen Ctrl + Shift + I (Windows/Linux) of Cmd + Option + I (Mac) te gebruiken.

Stap 2: plak de code

Nu we de Inspector Tools Console Tab hebben geopend, kunnen we de benodigde JavaScript-code invoeren. In ons voorbeeld plakken we de volgende code:

// ex: katespade.com - list firsty party subdomains in HOSTS array
const HOSTS = ["assets.katespade.com"];

function getScriptInfo() {
  const resourceListEntries = performance.getEntriesByType("resource");
  // set for first party scripts
  const first = [];
  // set for third party scripts
  const third = [];

  resourceListEntries.forEach((resource) => {
    // check for initiator type
    const value = "initiatorType" in resource;
    if (value) {
      if (resource.initiatorType === "script") {
        const { host } = new URL(resource.name);
        // check if resource url host matches location.host = first party script
        if (host === location.host || HOSTS.includes(host)) {
          const json = resource.toJSON();
          first.push({ ...json, type: "First Party" });
        } else {
          // add to third party script
          const json = resource.toJSON();
          third.push({ ...json, type: "Third Party" });
        }
      }
    }
  });

  const scripts = {
    firstParty: [{ name: "no data" }],
    thirdParty: [{ name: "no data" }],
  };

  if (first.length) {
    scripts.firstParty = first;
  }

  if (third.length) {
    scripts.thirdParty = third;
  }

  return scripts;
}

const { firstParty, thirdParty } = getScriptInfo();

console.groupCollapsed("FIRST PARTY SCRIPTS");
console.table(firstParty);
console.groupEnd();
console.groupCollapsed("THIRD PARTY SCRIPTS");
console.table(thirdParty);
console.groupEnd();

/*
Choose which properties to display
https://developer.mozilla.org/en-US/docs/Web/API/console/table

console.groupCollapsed("FIRST PARTY SCRIPTS");
console.table(firstParty, ["name", "nextHopProtocol"]);
console.groupEnd();
console.groupCollapsed("THIRD PARTY SCRIPTS", ["name", "nextHopProtocol"]);
console.table(thirdParty);
console.groupEnd();
*/

Stap 3: voer de code uit

Na het plakken van de code in de Console Tab, druk je op Enter om de code uit te voeren.

Stap 4: analyseer de resultaten

De code zal de resultaten van de scriptanalyse weergeven in twee groepen: “FIRST PARTY SCRIPTS” en “THIRD PARTY SCRIPTS”.

• “FIRST PARTY SCRIPTS” bevat scripts die afkomstig zijn van hetzelfde domein als de huidige webpagina of domeinen die zijn opgenomen in de HOSTS array.
• “THIRD PARTY SCRIPTS” bevat scripts die afkomstig zijn van externe domeinen, wat aangeeft dat ze door derden worden gehost.

Je kunt de resultaten verder aanpassen door te kiezen welke eigenschappen je wilt weergeven in de tabel. Dit kan handig zijn om specifieke informatie over de scripts te bekijken.

In dit artikel hebben we geleerd hoe we de Inspector Tools Console Tab kunnen gebruiken om scripts op een webpagina te analyseren en te categoriseren als eerste of derde partij. Dit kan nuttig zijn voor ontwikkelaars om inzicht te krijgen in welke scripts er op een webpagina worden geladen en waar ze vandaan komen. Hierdoor kunnen ontwikkelaars de prestaties en beveiliging van hun websites verbeteren.