Google Chrome meilleure experience avec top 7 des nouvelles fraiches devtools

Chrome est utile pour tout le monde, mais si vous connaissez votre chemin autour du developpement de logiciels, et vous avez telecharge la derniere version, il est particulierement utile. Les gens de Google ont cree ce qu'ils appellent DevTools (ou, des outils pour les developpeurs web). Ce sont toutes des fonctionnalites actuellement «experimentales», malgre des fonctionnalites assez cool experimentales neanmoins!

DevTools sont continuellement mis a jour que Google sortir avec de nouvelles versions de Chrome, il est donc bon de garder un ?il sur le developpement de Chrome. Les DevTools sont generalement caches, afin d'etre en mesure d'utiliser toutes ces choses, aller a:

chrome: // flags / # enable-Devtools-experiences

Trouvez l'option Experiment DevTool et cliquez sur «Activer», et a ce point, vous aurez a redemarrer Google Chrome.

Une fois que vous redemarrez Chrome, vous pouvez ouvrir DevTools. Dans le coin superieur droit de la fenetre DevTools, trouver et cliquez sur l'icone d'engrenage, et vous pouvez choisir les Devtools vous voulez de la liste des "experiences" sur le cote gauche.

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

Connexion etranglement Reseau

Dans DevTools, lancer la console tiroir en appuyant sur Echap, et cochez "Emulation". Trouver l'onglet Reseau, choisissez l'option d'etranglement de connexion reseau pour le type de vitesse et les performances de votre site Web a la vitesse que vous souhaitez. Utilisez cette option pour tester les caracteristiques de reponse et de performance sur votre site via differentes connexions.

Audit CSS

Utilisez cette option pour inspecter votre page web pour les regles de style inutiles. Pour utiliser cette DevTool, trouver "Executer" dans l'onglet "Audits" et commencer a verifier le CSS de votre site Web. Il y aura un certain nombre de selecteurs et / ou classes inutilisees disponibles pour vous de regler.

Selections multiples curseurs

Lorsque vous avez plusieurs lignes au meme endroit dans une source comme ils sont dans Sublime texte, vous pouvez les editer 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 selectionner plusieurs lignes.

Ajout Sourcemap

Si vous utilisez pre-processeurs comme Sass, moins, ou CoffeeScript pour composer modeles ou JS, vous pouvez verifier les versions non compiles ou non batis de CSS ou javascript (JS) avec ce DevTool. Tout d'abord, permettre a votre carte Source et rechercher vos JS ou des generations de texte CSS, meme au sein des lignes specifiques ou des numeros de colonne, pour certains endroits specifiques de code.You peut meme ajouter manuellement Carte Source sur la nouvelle edition 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 selectionner "Ajouter Carte Source".

Mode hors-ligne

Pour activer cette fonction, aller a:

chrome: // flags / # enable-mode deconnecte

Ensuite, activez l'option "Activer le mode cache hors ligne", puis redemarrez Chrome. Cet outil est particulierement utile lorsque vous souhaitez creer une application web que les gens peuvent facilement utiliser meme 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-necessite, 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'icone mobile (que vous trouverez a cote de la / icone de recherche de la boucle). Cette equipera Emulator avec les dirigeants necessaires, et le site sera montre dans la taille de la fenetre exacte de tout appareil mobile.

Drag and Drop HTML dans l'editeur

Cet outil est tres utile si jamais il est necessaire pour vous de copier un code HTML. Il suffit de glisser les DOM et vous pouvez deposer code directement dans l'editeur de page web.

Amuse toi bien!