In letzter Zeit erreichen mich immer wieder Fragen zur folgenden Meldung in den Developer Tools unter “Console”:
DevTools failed to load source map: Could not load content for https://www.googletagmanager.com/debug/badge.css.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
Auf den ersten Blick ist zu erkennen, dass anscheinend etwas vom Google Tag Manager nicht geladen werden kann. Was stimmt hier nicht?
Die Antwort…
…ist relativ einfach: Es hat zunächst nichts mit dem Google Tag Manger oder dem GTM-Code zu tun. Das Tagging und Tracking ist nicht betroffen. Es handelt sich “nur” um eine Funktion der Developer Tools, die versucht CSS-Sourcemaps zu laden – auch wenn es keine gibt. Man kann die Funktion mit wenigen Schritten deaktivieren und die Warnmeldung verschwindet.
Öffne dazu die Developer Tools und klicke auf das Zahnrad-Symbol, um zu den Einstellungen zu gelangen:
Etwas unten sieht man dann die Einstellung “Enable CSS source maps”, die man deaktivieren kann:
Danach die Seite nochmal laden und der Fehler sollte weg sein.
Sourcemaps kurz erklärt
Um die Sourcemap-Funktion zu verstehen, nachfolgend ein kurzer Abriss zu dem Thema. Eine Sourcemap ist eine JSON-Datei, die auf .map endet (siehe in der Warnmeldung von oben). In dieser Datei sind viele verschiedene Module vermerkt, die dann zu einer Datei fließen sollen. Sprich: Eine CSS- oder JS-Datei wird oft aus mehreren Modulen bzw. Teilen zusammengebaut. Das hat den Vorteil, dass der Browser nicht viele verschiedene Dateien einlesen muss, sondern nur Eine. Die Sourcemap sorgt dann dafür, dass die richtigen Module zu einer Datei zusammengeführt werden. So wird bspw. eine styles.css aus verschiedenen Modulen zusammengebaut. Die Funktion in den Developer Tools stellt dann sicher, dass ich beim anschauen eines Elements (unter “Elements” innerhalb der DevTools) das entsprechende Modul angezeigt wird und nicht die komplette CSS, was bei der Fehlersuche hilft.
Für Details zu Sourcemap empfehle ich dir folgende Quellen:
