Question:
Existe-t-il une extension Chrome que je peux utiliser pour tester un design réactif?
Michel
2014-03-21 22:26:23 UTC
view on stackexchange narkive permalink

Tester un webdesign réactif est parfois un défi: tester différentes résolutions, garder les développeurs / outils ouverts pour voir ce qui se passe… eh bien, vous comprenez mon point.

Je cherche quelque chose que je peux ajouter sur Chrome qui me permet de gérer cela sans trop de problèmes. Quelque chose comme Ctrl + Shift + m sur Firefox.

Firefox Responsive Design

Avec la fonctionnalité pour faire glisser la fenêtre pour changer la résolution et aussi la liste déroulante avec quelques résolutions prédéfinies

Pre-defined Resolution

  • Fonctionne sur Chrome (extension)
  • Avoir des résolutions prédéfinies OU une boîte pour indiquer une résolution spécifique
  • Pouvoir faire glisser pour créer des résolutions (comme une fenêtre)
  • Pouvoir ouvrir et utiliser les outils de développement Chrome

Existe-t-il une extension qui fait cela, et qui peut m'aider à simplement tester des mises en page réactives?

PS: Ce serait étonnant si c'était un outil gratuit
Quatre réponses:
Jasper
2014-03-22 03:49:32 UTC
view on stackexchange narkive permalink

Chrome a une interface utilisateur décente ainsi que des dimensions d'écran prédéfinies qui incluent le DPI.

Pour accéder à ces excellents outils:

  1. Ouvrez le Outils de développement dans Chrome en appuyant sur F12.

  2. Ouvrez le "tiroir" en cliquant sur l'icône située en haut à droite des outils de développement (c'est un -un symbole à côté de trois lignes horizontales empilées les unes sur les autres). Ou en cliquant sur esc dans l'outil de développement

    drawer

  3. Cliquez sur l'onglet "Emulation".

  4. Devenez fou. Vous pouvez émuler les événements tactiles, les coordonnées de géolocalisation, les données de l'accéléromètre, la résolution de l'écran, les agents utilisateurs, etc.

Notez que juste autour de la version 30 de Chrome, ces options ont été déplacées vers le " tiroir "décrit ci-dessus mais dans les anciennes versions, il a été trouvé dans les paramètres des outils de développement (icône d'engrenage).

N'essayez pas d'ouvrir une discussion. Accédez au chat pour débattre des sujets.
N'a pas de résolutions comme 1900x1200 et il ne peut pas être redimensionné. (C'est génial pour mobile)
@Michel Par "impossible à redimensionner", voulez-vous dire que d'autres outils vous permettent d'afficher une fenêtre plus grande que la résolution de votre écran?
user1086
2014-03-21 22:39:35 UTC
view on stackexchange narkive permalink

Je vous suggère d'essayer l'extension Window Resizer.

Elle vous donne une liste de résolutions prédéfinies auxquelles la fenêtre du navigateur se rétrécira / s'agrandira lorsque vous les sélectionnez. Il donne également la taille d'affichage actuelle de la fenêtre afin que vous puissiez l'ajuster manuellement si vous en avez besoin. Et comme il ne fait que modifier la taille de la fenêtre pour des résolutions spécifiques, vous pouvez toujours accéder aux outils de développement à l'intérieur de Chrome.

** Gros drapeau sur l'extension Window Resizer. ** J'avais l'habitude de l'utiliser, mais les gens qui l'ont développé ont décidé qu'ils ne recevaient pas assez d'argent via des dons, ils ont donc incorporé du code qui ajoute des liens publicitaires vers les pages. Cela n'a pas été documenté par les créateurs et je pense que j'ai été supprimé mais je ne vois aucun moyen de faire confiance aux développeurs. Cette fonctionnalité existe également dans Chrome.
Mr. Alien
2014-03-25 22:40:44 UTC
view on stackexchange narkive permalink

Je vous suggère d'utiliser l'extension Web Developer pour Chrome, ce qui est cool avec cette extension est qu'elle vous permet d'ajouter des résolutions personnalisées pour redimensionner la fenêtre du navigateur.

enter image description here

Non seulement cela, il vous permet également d'ajouter des résolutions personnalisées aux collections Responsive ...

enter image description here

Vous pouvez voir toutes ces mises en page réactives sur un seul écran où chaque version est pliable / extensible

enter image description here

En dehors de cela, il existe une variété de fonctionnalités telles que la désactivation des images, JavaScript, la gestion des cookies , CSS Disabling, et bien d'autres, qui vous aideront à rendre les sites Web plus rapides et plus propres.

Tom
2016-07-26 05:15:52 UTC
view on stackexchange narkive permalink

Chrome a une fonction intégrée pour faire cela pour vous. L'outil vous donne une liste de dimensions de téléphones populaires à tester et vous donne la possibilité de saisir les vôtres. Il modifie également l'agent utilisateur de votre navigateur pour qu'il corresponde au téléphone que vous souhaitez utiliser.

Pour accéder à la visionneuse basée sur le téléphone

  1. Appuyez sur la touche F12 ou ouvrez les outils de développement
  2. Cliquez sur le téléphone / icône de la tablette
  3. Cliquez dans le menu déroulant sur les dimensions que vous souhaitez utiliser

screenshot



ⓘ
Ce Q&R a été automatiquement traduit de la langue anglaise.Le contenu original est disponible sur stackexchange, que nous remercions pour la licence cc by-sa 3.0 sous laquelle il est distribué.
Loading...