Construire: 11 brillants extensions chrome pour les développeurs web

Chrome a récemment capturé une part du marché du navigateur Internet de 25%, ce qui en fait le deuxième plus utilisé navigateur dans le monde derrière Internet Explorer (qui évolue dans le Projet Spartan

). En fin de compte, cela signifie que Chrome est le de facto accueil pour les développeurs web.Projet Spartan: un navigateur Lean et non fini pour le Web moderneProjet Spartan: un navigateur Lean et non fini pour le Web moderneSpartan prend la lutte avec les concurrents navigateur comme Chrome et Firefox. Sera-t-vivre aux idéaux des soldats spartiates? Nous avons mis cette première version à l`épreuve et avons pas été impressionnés.Lire la suite

Video: How to make a Chrome Extension [Beginners Tutorial]

Bien que je suis partie à Firefox, je peux comprendre pourquoi les gens aiment Chrome. Il a tendance à repères navigateur dominent et il est facile pour les gens ordinaires à devenir des utilisateurs de puissance Chrome. D`autres détestent réellement Chrome, mais sont coincé utiliser en raison de la disponibilité de certaines extensions.

C`est une raison pour laquelle Chrome est si bon pour les développeurs web: le Magasin en ligne de chrome et son pool d`extensions. Si vous prévoyez toujours sur la conception ou le codage d`un site Web, voici quelques outils que vous devez installer tout de suite.

ColorZilla

ColorZilla a commencé comme un addon Firefox, mais il est devenu si populaire que beaucoup ont demandé une version Chrome. Maintenant, nous sommes ici. Cette extension pratique est essentiellement une version avancée de l`outil Pipette que vous trouveriez dans un programme comme Paint ou Photoshop.

Avec elle, vous pouvez pointer vers ne importe quel endroit dans votre navigateur et retirer immédiatement les informations de couleur à cet endroit. Une fois tiré, vous pouvez le tordre (que ce soit par RGB, HSV ou hexagonal droite) avant de le copier dans votre presse-papiers. Extrêmement facile à utiliser.

Il est également livré avec un générateur de gradient CSS, un analyseur de couleurs page Web, et quelques palettes de couleurs pré-installées pour votre commodité.

fenêtre Resizer

Un des dangers du développeur web est en vous assurant que l`expérience de visionnement d`un site Web est agréable pour les utilisateurs dans tous les types d`appareils. Nous ne parlons pas seulement de bureau mobile par rapport - qui est importante - mais aussi la différence entre les petits comprimés et moniteurs massifs.

fenêtre Resizer est un moyen facile de redimensionner la fenêtre du navigateur à la volée. Au clic d`un bouton, vous serez en mesure de tester votre site Web dans diverses résolutions pour voir ce que vos utilisateurs voient - et vous pouvez ajuster en conséquence.

IE Tab

Un autre grand danger du développeur web est des normes de navigateur (ou son absence). Internet Explorer, Firefox, Chrome, Opera, et tous les autres navigateurs mineures rendre les sites Web de façon légèrement différente. Pendant ce temps, certains navigateurs sont plus lents à adopter des normes que d`autres.

Ou dans le cas d`Internet Explorer, les normes sont jetés par la fenêtre et les développeurs web sont poussés à arracher leurs cheveux comme ils sont obligés de faire des accommodements.

Avec IE Tab, Ce processus est un petit peu plus facile. Il vous permet de consulter un site Web dans un nouvel onglet de Chrome, mais rendu tel qu`il apparaît dans IE. Pas une solution révolutionnaire au problème de IE, mais au moins c`est quelque chose.

Validité

Pas tout le code HTML est égal. Alors que les navigateurs jouent un grand rôle dans le respect des normes, une partie du fardeau de la preuve repose également sur le développeur Web pour suivre les bonnes pratiques HTML. Voilà pourquoi il existe des outils là-bas pour les tests et la validation HTML.

Validité est une extension qui vous permet de faire tout cela sans avoir à visiter des sites tiers. Il suffit d`ouvrir votre site Web, cliquez sur le bouton, et il affichera tous les messages HTML non valides dans la console du navigateur. La validation se fait par le service de validation du W3C.

BuiltWith

Une chose que je déteste le développement web est qu`il ya tant les bibliothèques, les cadres et les moteurs disponibles à utiliser. La liberté de choix est grand, mais il est une douleur lorsque le nombre de technologies devient si grand que vous ne pouvez pas suivre tous.

Avez-vous déjà visité un site Web et je me demandais ce que la technologie sous-jacente est?

le BuiltWith extension est un bouton unique qui analyse la page Web en cours pour voir tout des bibliothèques web, des cadres et des moteurs qui le pouvoir, y compris les réseaux de publicité, les plates-formes de distribution de contenu, et même les hébergement logiciel derrière tout cela.

Postman REST client

Pour ceux d`entre vous travailler avec les API REST, Facteur est le seul outil dont vous avez besoin pour un flux de travail simplifié. Avec elle, vous pouvez construire des requêtes HTTP et obtenir des réponses formatées en JSON et XML. Les réponses sont ouvertes dans une fenêtre séparée en HTML.

Vous pouvez également regrouper plusieurs demandes dans ce qu`on appelle une collection, ce qui est un excellent moyen de rester organisé et efficace. Vous pouvez également tester sur plusieurs environnements en changeant des variables environnementales à l`intérieur de l`extension.

Ipsum d`entreprise

Une façon de générer un texte de remplissage est de copier-coller « asdf » encore et encore cent fois. Une meilleure façon serait d`installer Ipsum d`entreprise et laissez générer un texte de remplissage pour vous en un clin d`œil.

Nous avons couvert plusieurs générateurs Lorem Ipsum avant, mais l`appel de Corporate Ipsum est qu`il se trouve juste dans votre navigateur. Vous pouvez tirer vers le haut avec un seul clic. Il n`y a aucune raison de ne pas l`utiliser, si vous me demandez. Maintenant, vous pouvez revenir à coder réellement votre site!10 Alternatives pratique si vous lassées des Lorem ipsum Textes de remplissage10 Alternatives pratique si vous lassées des Lorem ipsum Textes de remplissageLes concepteurs Web ont probablement une cagnotte d`outils Lorem Ipsum par ce économisé près est utile pour leur travail de développement web. générateurs Lorem Ipsum viennent dans diverses formes- certains d`entre eux permettent de personnaliser le texte factice ...Lire la suite

TabCloud

Développement Web se produit parfois sur plusieurs machines. Tandis que contrôle de code source pour les développeurs est le principal moyen de rester synchronisé et la mise à jour, si vous souhaitez transférer plusieurs onglets sur les ordinateurs? C`est là que TabCloud entre.Qu`est-ce que Git & Pourquoi vous devriez utiliser le contrôle de version Si vous êtes un développeurQu`est-ce que Git & Pourquoi vous devriez utiliser le contrôle de version Si vous êtes un développeurEn tant que développeurs web, beaucoup de temps, nous avons tendance à travailler sur les chantiers de développement local, puis il suffit de télécharger tout quand nous aurons terminé. Cela est bien quand il est juste vous et les changements sont petits, ...Lire la suite

TabCloud permet de synchroniser vos onglets vers le cloud, vous permettant de les rouvrir ailleurs. Il peut également être utilisé localement comme un écran de session, vous permettant de stocker un ensemble d`onglets pour revisiter plus tard. Les onglets sont enregistrées dans votre compte Google.

WhatFont

Font Design est un élément important du développement web, ce qui explique pourquoi des services comme Google Web Fonts sont devenus si populaires. Les bonnes nouvelles sont que ces polices libres sont maintenant une partie de la les plus belles polices web actuellement disponible.Comment faire pour utiliser Google Fonts dans votre projet Web suivant & Pourquoi devriez-vousComment faire pour utiliser Google Fonts dans votre projet Web suivant & Pourquoi devriez-vouschoix de police est une décision de conception intégrale sur un site Web, mais la plupart du temps, nous sommes satisfaits de la même famille ancienne serif et sans-serif. Alors que le corps principal du texte devrait toujours être quelque chose ...Lire la suite

Mais l`admettre: il y a des moments où vous naviguez sur le Web et vous tombez sur une superbe police que vous ne l`avez jamais vu auparavant. Il y a beaucoup de façons d`identifier, mais le moyen le plus rapide est d`utiliser WhatFont. Avec elle, vous pouvez inspecter les polices simplement par planant au-dessus d`eux. Comment pourrait-il être plus facile?

Capture d`écran impressionnant

Si les captures d`écran ne font pas partie de votre routine de développement web régulière, Capture d`écran impressionnant aidera à changer cette situation. Les captures d`écran sont grands pour documenter les changements dans la conception et le partage des travaux en cours avec les membres de votre client ou l`équipe.

Cette extension a plusieurs fonctions de capture, y compris la page complète, zone sélectionnée, ou zone visible. Il vous permet également d`ajouter des annotations, le flou des parties sensibles de l`image, et de partager avec un seul clic. Ou télécharger sur votre Google Drive à la place.

Si le concept vous intrigue, mais vous préférez utiliser un programme de bureau plus puissant, consultez cette comparaison outil capture d`écran et commencer à utiliser celui qui fonctionne le mieux pour vous.4 Les meilleurs outils pour créer Captures d`écran Par rapport4 Les meilleurs outils pour créer Captures d`écran Par rapportCTRL + MAJ + 4. Trois touches - qui est tout ce que vous avez besoin pour des captures d`écran parfait. Il n`a pas besoin d`être un problème! Essayez ces outils de capture d`écran avancé et vous ne serez jamais regarder en arrière.Lire la suite

Vérifiez Mes liens

Beaucoup d`erreurs de développement web frustrer vos visiteurs et les liens cassés sont l`un des pires délinquants. Un lien cassé peut-être bien, mais pas plus que cela et votre site Web commence à perdre la crédibilité et la réputation. Heureusement, cela est une erreur facilement évité.

Vérifiez Mes liens fait exactement ce qu`il promet: il vérifie vos liens. liens valides sont marqués en vert tandis que les liens cassés sont marqués en rouge et à la fin il vous donnera un score de pourcentage. Tout ce que vous avez à faire est ensuite aller et réparer les liens!

Quelles extensions utilisez-vous?

Un de plus extension pour la productivité Je vous recommande est StayFocusd. Il est plus d`une extension d`usage général plutôt qu`une extension de développement web, mais il est certainement utile quel que soit. Il vous empêche d`être distrait par le web pendant que vous travaillez!

Que pensez-vous de ces? Y a-t-il des autres extensions de développement web que vous recommanderiez? Partagez avec nous dans les commentaires ci-dessous!