Google Chrome meilleure expérience avec top 7 des nouvelles fraîches devtools

Chrome est utile pour tout le monde, mais si vous connaissez votre chemin autour du développement de logiciels, et vous avez téléchargé la dernière version, il est particulièrement utile. Les gens de Google ont créé ce qu'ils appellent DevTools (ou, des outils pour les développeurs web). Ce sont toutes des fonctionnalités actuellement «expérimentales», malgré des fonctionnalités assez cool expérimentales néanmoins!

DevTools sont continuellement mis à jour que Google sortir avec de nouvelles versions de Chrome, il est donc bon de garder un œil sur le développement de Chrome. Les DevTools sont généralement cachés, afin d'être en mesure d'utiliser toutes ces choses, aller à:

chrome: // flags / # enable-Devtools-expériences

Trouvez l'option Experiment DevTool et cliquez sur «Activer», et à ce point, vous aurez à redémarrer Google Chrome.

Une fois que vous redémarrez Chrome, vous pouvez ouvrir DevTools. Dans le coin supérieur droit de la fenêtre DevTools, trouver et cliquez sur l'icône d'engrenage, et vous pouvez choisir les Devtools vous voulez de la liste des "expériences" sur le côté gauche.

Alors, quelles sont ces nouvelles choses sympathiques que vous pouvez faire?

Connexion étranglement Réseau

Dans DevTools, lancer la console tiroir en appuyant sur Echap, et cochez "Emulation". Trouver l'onglet Réseau, choisissez l'option d'étranglement de connexion réseau pour le type de vitesse et les performances de votre site Web à la vitesse que vous souhaitez. Utilisez cette option pour tester les caractéristiques de réponse et de performance sur votre site via différentes connexions.

Audit CSS

Utilisez cette option pour inspecter votre page web pour les règles de style inutiles. Pour utiliser cette DevTool, trouver "Exécuter" dans l'onglet "Audits" et commencer à vérifier le CSS de votre site Web. Il y aura un certain nombre de sélecteurs et / ou classes inutilisées disponibles pour vous de régler.

Sélections multiples curseurs

Lorsque vous avez plusieurs lignes au même endroit dans une source comme ils sont dans Sublime texte, vous pouvez les éditer ensemble. Vous pouvez maintenant utiliser DevTools pour activer plusieurs curseurs dans Chrome. Que vous exploitiez sur un PC ou un Mac, maintenez la touche Ctrl ou Commande, et puis vous pouvez cliquer et sélectionner plusieurs lignes.

Ajout Sourcemap

Si vous utilisez pré-processeurs comme Sass, moins, ou CoffeeScript pour composer modèles ou JS, vous pouvez vérifier les versions non compilés ou non bâtis de CSS ou javascript (JS) avec ce DevTool. Tout d'abord, permettre à votre carte Source et rechercher vos JS ou des générations de texte CSS, même au sein des lignes spécifiques ou des numéros de colonne, pour certains endroits spécifiques de code.You peut même ajouter manuellement Carte Source sur la nouvelle édition de Chrome.

Tout d'abord, afin d'ouvrir des fichiers, vous devez avoir le panneau de source active, puis d'ajouter les fichiers * .map, trouver et sélectionner "Ajouter Carte Source".

Mode hors-ligne

Pour activer cette fonction, aller à:

chrome: // flags / # enable-mode déconnecté

Ensuite, activez l'option "Activer le mode cache hors ligne", puis redémarrez Chrome. Cet outil est particulièrement utile lorsque vous souhaitez créer une application web que les gens peuvent facilement utiliser même quand ils sont hors ligne.

Un meilleur mobile Device Emulator

Maintenant que faire de votre site web facilement utilisable sur les appareils mobiles est devenu une quasi-nécessité, vous pouvez utiliser en mode mobile via Mobile Emulator Chrome et bricoler avec votre code de page web pour mobiles.

Tout d'abord, aller dans DevTools, trouver et choisir l'icône mobile (que vous trouverez à côté de la / icône de recherche de la boucle). Cette équipera Emulator avec les dirigeants nécessaires, et le site sera montré dans la taille de la fenêtre exacte de tout appareil mobile.

Drag and Drop HTML dans l'éditeur

Cet outil est très utile si jamais il est nécessaire pour vous de copier un code HTML. Il suffit de glisser les DOM et vous pouvez déposer code directement dans l'éditeur de page web.

Amuse toi bien!