Outils JavaScript et CSS pour le débogage, la manipulation de page et les astuces avancées

Ces snippets sont conçus pour être exécutés directement depuis la barre d'adresse du navigateur ou la console développeur. Ils permettent des opérations rapides sans modification du code source de la page.

Mode édition instantané

Rend le corps entier de la page modifiable en un clic :

javascript:(function(){document.body.contentEditable='true';document.designMode='on';})();

Animation dynamique d’éléments ciblés

Applique une trajectoire circulaire à tous les éléments correspondant à un sélecteur CSS (ex. img, p, div) :

javascript:(function(){const R = {val: 0}; const cfg = {a: 0.12, b: 0.28, c: 1.4, d: 280, e: 190, f: 320, g: 180}; const els = document.querySelectorAll('img'); function animate() { els.forEach((el, i) => { const style = el.style; style.position = 'absolute'; style.left = (Math.sin(R.val * cfg.a + i * cfg.b + cfg.c) * cfg.d + cfg.f) + 'px'; style.top = (Math.cos(R.val * cfg.b + i * cfg.a + cfg.c) * cfg.e + cfg.g) + 'px'; }); R.val++; } setInterval(animate, 95);})();

Vérification de l’URL réelle (anti-hameçonnage)

Affiche clairement la différence entre l’origine réelle de la page et l’URL affichée dans la barre d’adresse :

javascript:alert('Origine réelle : ' + location.origin + '\nURL complète : ' + location.href + '\n\nVérifiez que le domaine correspond — évitez les sites frauduleux.');

Débogage CSS rapide

Ajoute une surcouche visuelle pour inspecter la structure DOM : bordures rouges, fond noir, texte vert :

javascript:(function(){const s = document.createElement('style'); s.textContent = '*{outline:solid 1px #f00!important;background:#000!important;color:#0f0!important;}'; document.head.appendChild(s);})();

Mode sans images

Masque toutes les balises <img> pour tester la lisibilité du contenu textuel :

javascript:(function(){const s = document.createElement('style'); s.textContent = 'img{display:none!important;}'; document.head.appendChild(s);})();

Éditeur HTML minimaliste dans le navigateur

Ouvre une page vierge avec édition intégrée via l’attribut contenteditable :

data:text/html,<html contenteditable spellcheck="false"><head><meta charset="utf-8"></head><body></body></html>

Extraction robuste des composants d’une URL

Fonction réutilisable pour analyser n’importe quelle URL sans expressions régulières :

function parseUrl(url) {
  const a = document.createElement('a');
  a.href = url;
  const searchParams = new URLSearchParams(a.search);
  const params = {};
  for (const [k, v] of searchParams) params[k] = v;
  return {
    origin: a.origin,
    pathname: a.pathname,
    hash: a.hash.replace('#', ''),
    search: a.search,
    params,
    host: a.host,
    protocol: a.protocol.replace(':', '')
  };
}
// Exemple d'utilisation :
// parseUrl('https://example.com/path?x=1&y=2#section')

Centrage vertical moderne (IE11+)

Technique fluide basée sur transform pour centrer un élément verticalement :

.v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Bordures multiples avec box-shadow

Génère jusqu’à quatre couches de bordure sans utiliser plusieurs éléments :

.multi-border {
  box-shadow:
    0 0 0 4px #333,
    0 0 0 8px #666,
    0 0 0 12px #999,
    0 0 0 16px #ccc;
}

Édition en temps réel des styles CSS

Rend une balise <style> éditable directement dans la page (fonctionne sur Chrome/Firefox) :

<style contenteditable="true">
  body { font-family: system-ui, sans-serif; }
</style>

Génération de chaînes aléatoires sécurisées

Fonction compacte utilisant toString(36) pour produire des identifiants courts :

function randomId(length = 8) {
  let result = '';
  while (result.length < length) {
    result += Math.random().toString(36).slice(2);
  }
  return result.slice(0, length);
}
// Exemple : randomId(6) → "k9mz2q"

Conversion rapide flotatnt → entier

Optimisation performante pour les calculs liés au rendu (déplacements, dimensions) :

const value = 17.89;
const asInt = value | 0;        // → 17
const alsoInt = ~~value;       // → 17
const asBool = !!value;        // → true

Surcharge contrôlée de méthodes natives

Intercepte console.log pour appliquer un filtre visuel (ex. flou) :

(function() {
  const original = console.log;
  console.log = function(...args) {
    original.call(console, '%c' + args.join(' '), 'text-shadow: 0 0 4px rgba(0,0,0,.7); opacity:.85;');
  };
})();

Échange de variables sans variable intermédiaire

Utilisation élégante des tableaux et de l’évaluation gauche-à-droite :

let x = 42, y = 'hello';
x = [y, y = x][0]; // x devient 'hello', y devient 42

Protection contre l’intégration dans un iframe

Empêche le chargement de la page dans un contexte tiers :

if (window.top !== window.self) {
  window.top.location = window.self.location;
}

Visualisatoin tabulaire des données (Chrome/Edge)

Formate des talbeaux d’objets comme un tableau structuré dans la console :

const inventory = [
  { item: 'Clavier', stock: 12, price: 89.99 },
  { item: 'Souris', stock: 24, price: 45.50 }
];
console.table(inventory);

Étiquettes: JavaScript CSS web-development debugging frontend

Publié le 25 août à 18h12

L'Atelier Monstre