Outils de développement Chrome espace de travail mappages

Quelqu'un peut me dire comment les outils de développement Chrome espace de travail mappages de travail.
Je crois qu'il est disponible uniquement dans les Canaries pour le moment.

J'ai pensé qu'il est censé me permettre de faire des modifications aux règles CSS dans les éléments de la vue et de les avoir automatiquement enregistrées dans les fichiers locaux comme l'a démontré par Paul Irish au Google IO 2013. Je ne peux pas obtenir cette fonctionnalité fonctionne.

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

InformationsquelleAutor Mike | 2013-05-19
  1. 54

    Il ne fonctionne que dans les canaries pour le moment.

    EDIT: Maintenant en Chrome (étant donné que le ver 30+)

    1) vous devez ouvrir devtools panneau de configuration. Il a "espace de travail" de la section.

    Outils de développement Chrome espace de travail mappages

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

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

    Outils de développement Chrome espace de travail mappages

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

    Outils de développement Chrome espace de travail mappages

    Il n'importe pas quel fichier de la carte ou locales, aux fichiers sur le site.

    5) à ce moment-devtools vous demandera de redémarrer.
    Outils de développement Chrome espace de travail mappages

    Après le redémarrage devtools va vous montrer le singe entrée de dossier dans le volet de fichiers et appliquer toutes les modifications que vous faire vers le fichier local chaque fois que vous appuyez sur les touches Ctrl + S ou Cmd + S sur mac.

    • Je devrais avoir expliqué que j'ai fait toutes les étapes ci-dessus, et il était encore ne fonctionne pas quand je l'utilise "codeavengers.com" comme mon serveur. ("codeavengers.com" est mappé à localhost dans mon fichier hosts de windows). Quand j'ai changé à l'aide de localhost dans mon url, il a travaillé comme décrit ci-dessus. Cependant, débogage JavaScript semble en arrêt de travail.
    • J'ai par la suite décidé d'installer l'extension Chrome Tincr. Jusqu'à présent, il fonctionne très bien. addyosmani.com/blog/...
    • Vous avez besoin de vérifier soigneusement que la cartographie est appliquée. Il peut arriver que la structure de votre site ne reflète pas les dossiers locaux de la structure. Aussi, vous devez avoir deux mappages pour les deux url, un pour localhost et l'autre pour les codeavengers.com. Si devtools ne pouvez pas mapper un fichier local un fichier de site alors il ne peut pas définir un point d'arrêt à l'intérieur.
    • Il semble maintenant être à la normale Chrome version. Je suis en version 30.0.1599.101
    • J'ai eu un problème similaire avec le débogage... Il a travaillé pendant un certain temps puis tout à coup arrêté. Ne Tincr Résoudre ce problème?
    • Il est possible de le faire pour un dossier au lieu d'une seule ressource?
    • Lorsque vous mappez une seule ressource DevTools en fait les cartes tout.
    • Afin d'obtenir débogage JavaScript de travail sans l'extension, j'ai dû enlever les numéros de version, j'étais en ajoutant à la fin de javascripts fichiers après ?. Aujourd'hui j'ai seulement ajouter les numéros de version lorsque nous de construire et de déployer une nouvelle version. La version locale exclut les numéros de version.
    • C'est exactement ce qui se passe pour moi, j'ai build #s ajouté à la fin de la JS ?v=1.2.3 à l'origine de problèmes. Merci man
    • Aujourd'hui tout le monde utilise tous les types de compilateurs pour css et js boussole, sass, babel, webpack, browserify, etc, etc, etc. J'utilise comapss, par exemple. Il n'a qu'un seul main.scss fichier qui contient tout le nécessaire _partials.scss fichiers. Maintenant, les pls me dire comment dois-je ma carte main.scss (ou quel que soit .scss fichier je ne sais pas lequel, vous le nom) pour activer cette Chrome Devtools fonctionnalité? Ou cela ne fonctionne pas avec les compilateurs, seulement avec la plaine de vanille .css?

    InformationsquelleAutor loislo
  2. 4

    Juste une correction sur ce que loislo a dit.
    "Il ne fonctionne que dans les canaries pour le moment."

    Vous pouvez déclencher toutes ces fonctions expérimentales dans un cadre stable de chrome releases en tapant
    Chrome://flags dans la barre d'adresse.

    InformationsquelleAutor Vennsoh