web-dev-qa-db-fra.com

Testez l'image d'arrière-plan locale sur le site en direct avec Chrome Dev Tools?

Existe-t-il un moyen d'utiliser Chrome pour tester différentes images? J'ai créé un nouveau graphique d'arrière-plan et je voudrais le tester sur un site en ligne qui a déjà un graphique d'arrière-plan sur le <body> tag. Cependant, je ne veux pas encore changer le site en direct. Il suffit de le tester pour voir à quoi ressemble la nouvelle image. Est-ce possible?

cssimagegoogle-chrometestinggoogle-chrome-devtools
16
mcography

Voici la réponse, gracieuseté de Rob Donovan @ superuser (via https://superuser.com/a/839500/454034 )

Puisque vous avez mentionné "Chrome", vous pouvez utiliser les extensions Chrome pour ce faire, pour permettre l'accès local à vos fichiers.

Suivez ces étapes:

1) Dans le dossier local où se trouvent vos images, créez ce fichier appelé 'manifest.json' et entrez ceci:

{
  "name": "File Exposer",
  "manifest_version": 2,
  "version": "1.0",
  "web_accessible_resources": ["*.jpg","*.JPG"]
}

2) Mettez ceci est votre chrome barre d'adresse: chrome: // extensions /

3) Assurez-vous que le "mode développeur" est coché (en haut à droite de la page)

4) Cliquez sur le bouton "Charger l'extension non emballée"

5) Accédez au dossier local où se trouvent la ou les images et le fichier manifest.json, cliquez sur ok

6) L'extension "File Exposer" devrait maintenant être répertoriée dans la liste et cocher "Activé". Si le dossier se trouve sur un lecteur réseau ou un autre lecteur lent ou contient de nombreux fichiers, l'affichage de la liste peut prendre 10 à 20 secondes ou plus.

7) Notez la chaîne 'ID' qui a été associée à votre extension. Ceci est le EXTENSION_ID

8) Maintenant, dans votre code HTML, vous pouvez accéder au fichier avec ce qui suit, en changeant 'EXTENSION_ID' en n'importe quel ID généré par votre extension:

<img src='chrome-extension://EXTENSION_ID/example1.jpg'>

Notez que le * .jpg est récursif et qu'il correspond automatiquement aux fichiers du dossier spécifié et de tous les sous-dossiers, vous n'avez pas besoin de spécifier pour chaque sous-dossier. Notez également sa sensibilité à la casse.

Dans la balise 'img', vous ne spécifiez pas le dossier d'origine, son parent par rapport à ce dossier, donc seuls les sous-dossiers doivent être spécifiés.

Si vous modifiez le fichier manifest.json, vous devrez cliquer sur le lien 'Recharger (Ctrl + R)' à côté de l'extension.

33
nate_wilton

Une autre option serait de démarrer un simple serveur http.

Dans votre terminal (ou invite de commande), cd dans le répertoire où vos images sont enregistrées, puis tapez python -m SimpleHTTPServer.

Vous pouvez maintenant référencer les images dans les outils de développement à l'aide de http://localhost:8000/filename.jpg.

16
Andreas Muller

Ce n'est pas une réponse exacte à votre question, mais une façon de le faire est d'utiliser quelque chose comme dossier public dropbox . Une fois que l'image est dans le dossier, vous pouvez simplement cliquer avec le bouton droit et copier une URL publique à utiliser dans les outils de développement.

6
Johan Linder