Share
Récemment, sur Webdesigntuts +, nous avons examiné le flux de production HTML / CSS plus rapide avec les outils de développement Chrome, et dans le conseil rapide d'aujourd'hui, nous allons vous installer avec un plugin gratuit, mentionné dans ce didacticiel. Je vous promets cette volonté sérieusement accélérez votre flux de travail - prêt à commencer?
Aujourd'hui, nous allons passer en revue la configuration complète de DevTools Autosave, mais avant de commencer, jetons un coup d'œil à ce que cette extension géniale de Google Chrome fait exactement..
Il est très utile de déplacer un en-tête de quelques pixels dans les outils de développement Chrome, de revenir à votre éditeur de texte, de mettre à jour le code CSS, de sauvegarder le fichier et de revenir au navigateur pour un rafraîchissement rapide, afin de vous assurer que tout est beau. Mais si vous êtes un peu comme moi, vous vous retrouverez souvent à peaufiner plusieurs déclarations pour plusieurs sélecteurs dans les outils de développement, uniquement pour revenir à votre feuille de style après avoir perdu la trace des règles à modifier..
Comme son nom l'indique, DevTools Autosave met automatiquement à jour votre feuille de style avec toutes les modifications que vous apportez dans les outils de développement Chrome. Si vous les utilisez beaucoup, cela peut considérablement accélérer le développement du site. Bien sûr, vous pouvez également revenir à votre éditeur de texte et mettre à jour votre feuille de style comme d'habitude, ce qui en fait un ajout puissant et flexible à votre flux de travail..
Oh, et en passant, cette extension n'est pas seulement pour CSS et HTML… DevTools Autosave a également JavaScript couvert!
Avant de commencer, voyons rapidement en quoi DevTools Autosave peut être différent des autres extensions Chrome que vous avez peut-être utilisées auparavant..
Normalement, installer une extension Chrome est aussi simple que d'aller dans le Chrome Web Store et de cliquer sur le bouton "Ajouter à Chrome". DevTools Autosave est un peu différent dans la mesure où l'extension s'appuie sur un serveur installé localement (dans ce cas, Node.js) pour communiquer les modifications apportées dans Chrome à vos fichiers CSS, HTML et JS locaux..
Pour accomplir tout cela, nous devons utiliser l’invite de commande (ou la fenêtre du terminal). Si vous n'avez jamais utilisé l'invite de commande auparavant, rien à craindre - il est extrêmement facile à utiliser et je vous guiderai à chaque étape..
Pour commencer, rendez-vous sur le Chrome Web Store et installez l'extension..
Une fois que vous avez choisi d'ajouter l'extension à Chrome, il vous sera demandé de confirmer l'action. Une fois installé, une notification apparaîtra en haut à droite de la fenêtre de votre navigateur pour vous informer que l'extension est verrouillée, chargée et en cours d'exécution en temps voulu..
La prochaine étape consiste à accéder à Node.js pour télécharger et installer la dernière version (au moment de la rédaction de la v0.8.16)..
Déballez et installez à votre emplacement préféré.
Remarque: Node.js est en soi un environnement de développement incroyablement puissant et son utilisation dépasse de loin le cadre de cette astuce. Si vous souhaitez en savoir plus sur Node.js, consultez Node.js for Beginners chez Nettuts.+.
Maintenant que nous disposons de toute l'infrastructure requise pour exécuter l'enregistrement automatique de DevTools, l'étape suivante consiste à exécuter Node.js via l'invite de commande..
Si vous utilisez Windows comme moi, cliquez sur le bouton Démarrer, tapez "Invite de commande" dans le champ de recherche, puis sélectionnez "Invite de commande Node.js"..
Si vous utilisez un Mac, vous pouvez également accéder à votre dossier Applications → Utilitaires → Terminal.app.
À l'invite, exécutez la commande suivante: npm install -g autosave
Vous verrez maintenant le terminal bavarder quelques instants:
Remarque: Si votre compte d'utilisateur ne dispose pas d'autorisations d'administrateur, vous devrez peut-être ajouter le sudo commande pour installer des choses: sudo npm install -g autosave
Une fois terminé, vous pouvez exécuter DevTools Autosave.
La dernière étape consiste à exécuter l'extension elle-même. Exécutez la commande suivante à l'invite: enregistrement automatique
Vous allez maintenant recevoir une confirmation que DevTools Autosave s'exécute localement, comme suit:
Et avec ces quelques étapes rapides, vous êtes prêt et prêt à partir.
La beauté de la sauvegarde automatique de DevTools (et pourquoi je la préfère à certaines applications similaires) réside dans le fait qu’une fois qu’il est exécuté sur le serveur node.js, tout le reste travaux. Il n'est pas nécessaire de pointer l'extension vers des répertoires locaux (à moins que vous n'utilisiez un serveur local tel que WAMP ou MAMP) et vous n'avez rien à activer en soi. Lancez simplement l'éditeur de texte de votre choix, chargez un fichier .css ou .js et modifiez le contenu de votre coeur dans les outils de développement Chrome avec toutes les modifications enregistrées..
DevTools Autosave est devenu une extension incontournable de mon navigateur préféré, et je suis sûr que vous accepterez!
Utiliserez-vous DevTools Autosave? Préférez-vous autre chose? Si oui, assurez-vous de laisser un commentaire ci-dessous.
Accentsconagua