web-dev-qa-db-fra.com

Chrome mappages de l'espace de travail des outils de développement

Quelqu'un peut-il me dire comment fonctionnent les mappages de l'espace de travail des outils de développement Chrome. Je crois qu'il n'est disponible qu'aux Canaries pour le moment.

Je pensais que cela était censé me permettre de modifier les règles CSS dans la vue des éléments et de les enregistrer automatiquement dans les fichiers locaux, comme l'a démontré Paul Irish sur Google IO 2013. Je ne peux pas obtenir cela fonctionnalité pour travailler.

https://developers.google.com/events/io/sessions/325206725

37
Mike

Il ne fonctionne que pour les canaris pour le moment.

EDIT: Maintenant dans Chrome (depuis ver 30 +)

1) vous devez ouvrir le panneau des paramètres de devtools. Il a une section "Workspace".

Screenshot of settings page

2) dans cette section, vous devez cliquer sur l'élément "Ajouter un dossier". Il affichera la boîte de dialogue de sélection de dossier.

3) Après avoir sélectionné un dossier, vous verrez une barre d'informations sur les droits d'accès au dossier.

Screenshot of access rights infobar

4) En conséquence, vous verrez deux éléments de niveau supérieur dans le volet de sélection de fichier du panneau Source. Dans mon cas, il s'agissait du site localhost: 9080 et du dossier du système de fichiers local devtools. À ce moment, vous devez créer un mappage entre les fichiers de site et vos fichiers locaux. Vous pouvez le faire via le menu contextuel sur un fichier.

Mapping screenshot

Peu importe le fichier à mapper, le fichier local ou le site.

5) à ce moment, devtools vous posera des questions sur le redémarrage. restart screenshot

Après le redémarrage, devtools vous montrera l'entrée du dossier singe dans le volet des fichiers et appliquera toutes les modifications que vous apportez au fichier local à chaque fois que vous appuyez sur Ctrl + S ou Cmd + S sur mac.

54
loislo

Juste une correction sur ce que Loislo a dit. "Cela ne fonctionne que pour les canaris pour le moment."

Vous pouvez déclencher toutes ces fonctionnalités expérimentales dans les versions stables chrome en tapant les indicateurs Chrome: // dans la barre d'adresse.

4
Vennsoh