Recommandations pour les outils complémentaires du navigateur pour aider au développement [fermé]

StackOverflow https://stackoverflow.com/questions/17561

  •  09-06-2019
  •  | 
  •  

Question

Quelqu'un peut-il suggérer de bons outils/extensions de navigateur pour faciliter le développement ?J'ai installé Firebug dans Firefox, ce qui est idéal pour gérer CSS, HTML et javascript ;d'autres suggestions?

Pyromane

Était-ce utile?

La solution

Firefox :

  • Inspectez ceci si vous utilisez l'inspecteur DOM
  • Mesure le pour vous indiquer les distances en pixels (si vous en avez besoin)
  • Vue IE ou Vue Safari pour faciliter les tests dans d'autres navigateurs
  • Validateur HTML si vous vous souciez de la validation
  • Console2 pour améliorer votre console d'erreur js
  • Le Coquille Javascript le bookmarklet est également pratique (et regardez les autres là-bas également)

Modifier:Ceci s'ajoute au Barre d'outils de développement Web mentionné par d'autres

Autres conseils

Pour Firefox :

Pyromane est génial pour l'enquête et le développement.

Barre d'outils du développeur Web c'est bien aussi.Aide vraiment avec les éléments CSS et de mise en page ainsi que bien plus encore.

J'utilise aussi En-têtes HTTP en direct (Je pense que ça s'appelle, mais c'est sur ma machine de travail, donc je ne trouve pas le lien maintenant).Ce qui nous a aidé à résoudre des problèmes de mise en cache, etc.

Je fais beaucoup de développement de téléphones mobiles, donc j'utilise aussi Commutateur d'agent utilisateur.Très utile pour se faire passer pour différents téléphones portables.

J'ai tendance à utiliser Firefox uniquement pour le développement et à tester simplement dans d'autres navigateurs, car la plupart ne disposent pas de la vaste gamme de plugins pour faciliter le développement comme Firefox.

L'autre incontournable pour Firefox est celui de Chris Pederick Barre d'outils du développeur Web.

Vous devez absolument installer Safari.Il intègre un certain nombre d’outils.Je l'utilise tout le temps en combinaison avec d'autres navigateurs.

  • Chronologie du réseau
  • Console d'erreurs
  • Inspecteur Web
  • Éditeur d'extraits

De plus, il vous permet de définir l'agent utilisateur pour vos demandes.

Considérez ceci, il dispose d'un menu de niveau supérieur distinct appelé Développer.

Opéra a :

Dragonfly (outils -> avancés -> outils de développement)

Menu de débogage

Méthodes UserJS pour intercepter des choses

opera:config#CompatMode%20Override pour forcer les bizarreries ou le mode standards

Widgets de développement Web

Vous pouvez afficher la source des fichiers, les modifier, appliquer les modifications et recharger à partir du cache.

En cas d'IE, les prochains outils peuvent être utiles

L'extension "uber" pour IE - "Developer Tools", fournie dans le cadre d'IE8

Console développeur et Instantané DOM pour l'Opéra :

http://dev.opera.com/tools/

Ce qui est génial, c'est qu'il s'agit de bookmarklets implémentés avec JS.Ce qui est dommage, c'est qu'ils ont besoin d'Internetz.

Firefox :

Inspectez ceci si vous utilisez l'inspecteur DOM

Mesurez-le pour vous indiquer les distances en pixels (si vous en avez besoin)

IE View ou Safari View pour faciliter les tests dans d'autres navigateurs

HTML Validator si vous vous souciez de la validation

Console2 pour améliorer votre console d'erreur js

Le bookmarklet Javascript Shell est également pratique (et regardez les autres également)

Ceci s'ajoute à la barre d'outils de développement Web mentionnée par d'autres.

Cette liste de Cebjyre est presque complète (puisque FireBug était déjà mentionné dans la question).j'ajouterais seulement Tamper Data.De temps en temps, c'est très utile.

YSlent est un module complémentaire Firebug permettant de dépanner le temps de chargement d'une page.

Outre les excellents outils déjà mentionnés, je trouve Charles être extrêmement utile.D'autant plus que je travaille beaucoup avec Flash Remoting qu'il gère parfaitement.

Charles est un proxy HTTP/moniteur HTTP/proxy inverse qui permet à un développeur de visualiser tout le trafic HTTP entre sa machine et Internet.Cela inclut les requêtes, les réponses et les en-têtes HTTP (qui contiennent les cookies et les informations de mise en cache).

Charles peut agir comme un intermédiaire pour la communication HTTP/SSL, vous permettant de déboguer le contenu de vos sessions HTTPS.

C'est multiplateforme, coûte 50 $, mais il existe une évaluation « 30 minutes par session » que vous pouvez télécharger.

Voici ce que j'utilise :

Firefox :

  • Inspecteur DOM:Je l'utilise plus que toute autre chose pour le développement Web
  • Lancement:pour ouvrir des sites dans d'autres navigateurs/applications
  • Tamper Data:cela peut être utile pour déboguer les requêtes GET/POST
  • Barre d'outils du développeur Web:cela a tellement de fonctionnalités pratiques pour le débogage :les outils de validation du W3C, la règle intégrée, les outils de redimensionnement, la manipulation des sources, les outils de cache/css/script faciles

C'EST À DIRE:

Divers :

  • Les bookmarklets pratiques de Jesse:le coquille le bookmarklet est particulièrement pratique
  • J'installe aussi Safari et Opéra, mais utilisez-les principalement à des fins de tests et d'analyse comparative, car leurs outils de développement ne sont pas aussi robustes que Firefox et ils ne sont pas aussi bogués qu'IE.
  • Lynx:J'utilise ceci pour m'assurer que tous les sites lourds en JS fonctionnent toujours afin d'être sûr qu'ils sembleront corrects pour Google, les lecteurs d'écran et toute autre application de type robot.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top