Mapping-Probleme mit Chrome Inspector und WordPress beheben

Normalerweise nutze ich eine Kombination aus Entwicklungsumgebung und Google Chrome (zusammen mit dem Inspector), um Themes für WordPress zu entwickeln. Der Chrome Inspector bietet die Möglichkeit, die Stylesheets einer Website an lokale Dateien zu mappen, so dass Änderungen im Inspector direkt in das lokale Stylesheet übernommen werden. Details dazu sind hier zu finden.

Seit einem der letzten Updates von Chrome hatte ich jedoch Probleme mit dem Mapping. Chrome hat die Website-Stylesheets nicht mehr an die lokalen Dateien mappen wollen. Nach einiger Recherche habe ich einen Bug im Chrome Bugtracker gefunden, dass es Probleme mit Query-Variablen bei Dateien gibt. Da WordPress beispielsweise CSS- und JS-Dateien mit ?ver=123 versieht, kann das Problem bei WordPress auftreten.

Meine Lösung für das Problem bestand darin, dass ich einfach die ?ver-Query Variable entferne, so lange sich WordPress im Debug Modus befindet. Dazu nutze ich eine Kombination aus diesen beiden Snippets:

Das Ergebnis sieht dann so aus:

if ( defined( 'WP_DEBUG' ) && true === WP_DEBUG ) {
    function wpkb_remove_cssjs_ver( $src ) {
        if ( strpos( $src, '?ver=' ) ) {
            $src = remove_query_arg( 'ver', $src );
        }

        return $src;
    }

    add_filter( 'style_loader_src', 'wpkb_remove_cssjs_ver', 10, 2 );
    add_filter( 'script_loader_src', 'wpkb_remove_cssjs_ver', 10, 2 );
}

Bis das Problem behoben ist kann man so ohne viel Aufwand die Vorzüge des Chrome Inspectors bei der Theme-Entwicklung nutzen.

Schreibe einen Kommentar