web-dev-qa-db-fra.com

Alternative à l'extension Chrome "Window Resizer"

À la lumière de la récente controverse (décembre 2013) sur l'extension de Chrome intitulée "Window Resizer", quelles sont les solutions alternatives pour redimensionner rapidement le navigateur Chrome pour des tests de développement réactifs?

37
JoshuaDavid

Le test de résolution pourrait être une alternative possible. 

Le test de résolution modifie la taille de la fenêtre du navigateur pour les développeurs pour prévisualiser leurs sites Web dans différentes résolutions d'écran. Il comprend une liste des résolutions couramment utilisées et la possibilité de le personnaliser liste. Il offre également aux utilisateurs la possibilité d'activer la taille du navigateur Google.

Il est disponible dans la boutique en ligne Chrome:

https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal

26
flo

Une autre solution native pour tester les conceptions réactives consiste à utiliser les outils de développement Chrome intégrés. Choisissez Outils-> Outils de développement, puis cliquez sur l’icône représentant un engrenage dans le coin inférieur droit de la fenêtre qui s’ouvre. Cliquez sur "Activer", puis sur "Mesures du périphérique" et vous pourrez spécifier la résolution que vous souhaitez répliquer.

De plus, en modifiant "Agent utilisateur" sur cet écran, Chrome définit les métriques de l'appareil pour l'appareil choisi, ce qui peut s'avérer très utile pour décider de l'emplacement de vos points d'arrêt réactifs pour les appareils plus populaires.

Ce n’est pas aussi simple qu’une extension en deux clics, mais c’est l’avantage d’être une solution sans extension, mais également d’utiliser des mesures exactes à l’écran des appareils réels. 

30
Dave

SÌ!

Raccomando di evitare estensioni, maître strumenti di chrome chrome con scorciatoie da tastiera .

Aprili usando
F12
o
ctrl+shift+i(Gnu/Linux ou Windows)
cmd+opt+i(Mac)
o
Menu> Strumenti> Strumenti per sviluppatori

EDIT: Screenshot aggiornati per riflettere the recenti modifiche degli strumenti di chrome dev.

screenshot - step 1 of 2screenshot - step 2 of 2

Una gif lo dés meglio!

gif screencast with all steps(suggerimento: apri l'immagine in una nuova scheda)

20
JorgeArtware

Pour mettre à jour la réponse de @ Dave, à partir de Chrome 35.0.1916.153 m, vous devez sélectionner l'icône Afficher le tiroir (> =) à gauche de l'icône représentant un engrenage, sélectionnez Sources, puis l'onglet Emulation.

Pour obtenir les outils les plus récents, accédez à @FireCodings link aux outils de développement d'émulation mobile de Google et téléchargez/installez Chrome Canary . Ensuite, dans Canary, choisissez Outils-> Outils de développement, cliquez sur l'icône du mobile dans le coin supérieur gauche de la fenêtre des outils (en bas du navigateur), cliquez sur Sources, puis sur Émulation. Les informations se trouvent sur le lien de la page Google pour montrer comment utiliser les outils.

3
user2603432

Une autre alternative (plus sûre) est de vous faire posséder. 

Google a beaucoup de documentation sur la création d'extensions. J'ai fait cette extension vraiment simple qui fait tout ce dont j'avais besoin pour un projet, vous pouvez également trouver le code pour cela sur github

2
graham

Voici un bookmarklet de redimensionnement de fenêtre qui fonctionne très bien:

http://lab.maltewassermann.com/viewport-resizer/

2
Jeff

En fait, le développeur a cédé et a fini par supprimer le morceau de code incriminé (appelé "Ecolinks") de son extension. À compter d’aujourd’hui, les activités des affiliés sont censées avoir disparu.

Source: https://productforums.google.com/d/msg/chrome/mlAD1ygc0v0/gKLKWxoGrkIJ

Changelog pour la version 1.9.0.3

Version 1.9.0.3 (2014-01-15): En raison de la demande générale, j'ai supprimé les EcoLinks.

2
matt.nguyen

Sous Windows avec AutoHotKey installé, enregistrez le fichier ci-dessous dans le fichier resize-chrome.ahk et double-cliquez dessus pour exécuter:

WinMove, ahk_exe chrome.exe,, 0, 0, 1024, 768
0
zupa