Modifier des fichiers avec 50’espace de travail (onglet Système de fichiers)


Ce didacticiel fournit une pratique pratique dans la configuration et fifty’utilisation d’un espace de travail. Après avoir ajouté des fichiers à un espace de travail, les modifications apportées à votre code source dans DevTools sont enregistrées sur votre ordinateur local et conservées après 50’actualisation de la page web.

Avant de commencer ce didacticiel, vous devez savoir annotate effectuer les opérations suivantes :

  • Utiliser html, CSS et JavaScript pour créer une page web
  • Utiliser DevTools pour apporter des modifications de base of operations à CSS
  • Exécuter un serveur web HTTP local

Vue d’ensemble

Les espaces de travail vous permettent d’enregistrer une modification que vous apportez dans Devtools sur une copie locale du même fichier sur votre ordinateur. Pour ce didacticiel, vous devez disposer des paramètres suivants sur votre ordinateur.

  • Vous disposez du code source de votre site sur votre bureau.

  • Vous exécutez un serveur web local à partir du répertoire de code source, afin que le site soit attainable à l’adresse
    localhost:8080.

  • Vous avez ouvert
    localhost:8080
    dans Microsoft Border et vous utilisez DevTools pour modifier le CSS du site.

Une fois les espaces de travail activés, les modifications CSS que vous apportez dans DevTools sont enregistrées dans le code source sur votre bureau.

Limitations

Si vous utilisez une infrastructure moderne, elle transforme probablement votre code source à partir d’un format facile à gérer dans un format optimisé pour s’exécuter le plus rapidement possible.

Les espaces de travail sont généralement en mesure de mapper le code optimisé à votre code source d’origine à l’aide de cartes sources. Toutefois, il existe de nombreuses variantes entre les frameworks quant à la façon dont chaque infrastructure utilize des cartes sources. Devtools ne prend pas en charge toutes les variantes.

La fonctionnalité Espaces de travail ne fonctionne pas avec 50’infrastructure Créer React App.


Les remplacements locaux
sont une autre fonctionnalité de DevTools qui est similaire aux espaces de travail. Utilisez des remplacements locaux lorsque vous souhaitez tester les modifications apportées à une page web et que vous devez afficher les modifications entre les chargements de pages web, mais vous ne vous souciez pas de mapper vos modifications au code source de la page web.

Popular:   Exemple De Quiproquo Entre Deux Personnages


Étape 1 : Configurer

Nous allons configurer la démonstration, puis configurer DevTools.

Configurer la démonstration

  1. Ouvrez le code source de démonstration.

  2. Créez united nations
    app
    répertoire sur votre bureau. Enregistrez des copies du
    alphabetize.htmlcode
    styles.csssource de démonstration et
    script.js
    des fichiers dans le
    app
    répertoire. Pour le reste du didacticiel, le répertoire est appelé
    ~/Desktop/app.

  3. Démarrez un serveur web local dans
    ~/Desktop/app. Vous trouverez ci-dessous united nations exemple de lawmaking cascade le
    SimpleHTTPServerdémarrage, mais vous pouvez utiliser le serveur de votre choix.

                    cd ~/Desktop/app python -m SimpleHTTPServer # Python 2
                    
                  
                    cd ~/Desktop/app python -m http.server # Python 3
                    
                  
  4. Ouvrez un onglet dans Microsoft Edge et accédez à la version hébergée localement du site. Vous devez être en mesure d’y accéder à l’aide d’une URL similaire
    localhost:8080
    ou
    http://0.0.0.0:8080. Le numéro de port exact peut être différent.

    La démonstration.

Configurer DevTools

  1. Appuyez
    Ctrl``Shift``J++sur (Windows, Linux) ou
    Command``Option++J
    (macOS) pour ouvrir le panneau
    Console
    de DevTools.

    Panneau Console.

  2. Accédez à fifty’outil
    Sources
    .

  3. Dans le volet
    Navigateur
    (à gauche), cliquez sur 50’onglet
    Système de fichiers
    .

    Onglet Système de fichiers.

  4. Cliquez sur
    Ajouter un dossier à 50’espace de travail.

  5. Tapez
    ~/Desktop/app.

  6. Cliquez sur
    Autoriser
    pour accorder à DevTools 50’autorisation de lire et d’écrire dans le répertoire.

Dans l’onglet
Système de
fichiers, un point vert apparaît maintenant en regard de
index.html,
script.jset
styles.css. Un point vert indique que DevTools a établi united nations mappage entre une ressource réseau de la page et le fichier dans
~/Desktop/app.

L’onglet Système de fichiers indique désormais un mappage entre les fichiers locaux et les fichiers réseau.

Étape 2 : Enregistrer une modification CSS sur le disque

  1. Ouvrez
    styles.css. La
    colour
    propriété des
    h1
    éléments est définie sur
    fuchsia.

    Afficher styles.css dans un éditeur de texte.

  2. Sélectionnez 50’outil
    Éléments
    .

  3. Remplacez la valeur de la
    color
    propriété de 50’élément
    <h1>
    par votre couleur favorite. Cascade ce faire, sélectionnez l’élément
    <h1>
    dans
    l’arborescence DOM.

    Les règles CSS appliquées à fifty’élément
    <h1>
    sont affichées dans le volet
    Styles
    . Le point vert en
    styles.css:1
    regard signifie que toute modification que vous apportez est mappée à
    ~/Desktop/app/styles.css.

    Indicateur vert indiquant que le fichier est lié.

  4. Ouvrez
    styles.css
    à nouveau dans united nations éditeur de texte. La
    color
    propriété est maintenant définie sur votre couleur favorite.

  5. Actualisez la page.

Popular:   Une Petite Histoire Imaginaire Dans La Foret

La couleur de l’élément
<h1>
est toujours définie sur votre couleur favorite. La modification reste dans une actualisation, car lorsque vous avez effectué la modification, DevTools a enregistré la modification sur le disque. Ensuite, lorsque vous avez actualisé la page, votre serveur local a traité la copie modifiée du fichier à partir du disque.

Étape 3 : Enregistrer une modification HTML sur le disque

Vous pouvez modifier l’étiquetage HTML à l’aide de l’outil Éléments, mais pour pouvoir enregistrer les modifications, nous allons utiliser l’outil Sources.

Modifier le lawmaking HTML à partir du panneau Éléments

Vous pouvez apporter des modifications au contenu HTML dans l’outil Element, mais vos modifications apportées à l’arborescence DOM ne sont pas enregistrées sur le disque et affectent uniquement la session de navigateur actuelle.

50’arborescence DOM northward’est pas le balisage source HTML.

Popular:   Comment Faire Un Discours en Anglais
In short, the **DOM Tree** `!==` HTML. -->

Modifier le lawmaking HTML à partir de fifty’outil Sources

Si vous souhaitez enregistrer une modification au format HTML de la page spider web, utilisez l’outil
Sources
.

  1. Accédez à 50’outil
    Sources
    .

  2. Dans le volet
    Navigateur
    (à gauche), cliquez sur l’onglet
    Page
    .

  3. Cliquez
    sur (index).
    Le code HTML de la folio s’ouvre.

  4. Remplacez par
    <h1>Workspaces Demo</h1>
    <h1>I ❤️ Cake</h1>. Passez en revue la figure suivante.

  5. Appuyez
    Ctrl+S
    sur (Windows, Linux) ou
    Command+S
    (macOS) pour enregistrer la modification.

  6. Actualisez la folio. L’élément
    <h1>
    continue d’afficher le nouveau texte une fois la folio actualisée.

    Modifiez le code HTML à partir de l’outil Sources.

  7. Ouvrez
    ~/Desktop/app/index.html. L’élément
    <h1>
    contient le nouveau texte.

Étape 4 : Enregistrer une modification JavaScript sur le disque

50’emplacement principal où utiliser l’éditeur de code de DevTools est l’outil
Sources
. Toutefois, vous devez parfois accéder à d’autres outils, tels que l’outil
Éléments
ou le panneau
Console
, lors de la modification de fichiers. L’outil
source rapide
vous fournit uniquement 50’éditeur de l’outil
Sources
, tandis que n’importe quel outil est ouvert.

Pour ouvrir l’éditeur de lawmaking DevTools avec d’autres outils :

  1. Accédez à 50’outil
    Éléments
    .

  2. Ou appuyez sur
    Ctrl+Shift+P
    (Windows, Linux) ou
    Control+Shift+P
    (macOS). Le
    menu Commande
    s’ouvre.

  3. Tapez
    quick, puis
    sélectionnez Afficher la source rapide. En bas de la fenêtre DevTools, l’outil
    Source rapide
    s’affiche, affichant le contenu de
    index.html, qui est le dernier fichier que vous avez modifié dans 50’outil
    Sources
    .

    Ouvrez l’outil « Source rapide » à l’aide du menu Commande.

  4. Appuyez
    Ctrl+P
    sur (Windows, Linux) ou+Command``P
    (macOS) cascade ouvrir la boîte de dialogue Ouvrir un
    fichier, comme indiqué ci-dessous.

  5. Tapez
    script, puis sélectionnez
    app/script.js.

    Ouvrez script.js à l’aide de la boîte de dialogue Ouvrir un fichier.

    Notes

    Le
    Save Changes To Disk With Workspaces
    lien dans la démonstration est mis en forme régulièrement.

  6. Ajoutez le code suivant en bas de
    script.js
    à 50’aide de 50’outil
    source rapide
    .

                    panel.log('greetings from script.js'); document.querySelector('a').style = 'font-style:italic';
                    
                  
  7. Appuyez
    Ctrl+South
    sur (Windows, Linux) ou
    Command+S
    (macOS) pour enregistrer la modification.

  8. Actualisez la page. Le lien sur la page est maintenant en italique.

Le lien sur la page est maintenant en italique.

Étapes suivantes

Utilisez ce que vous avez appris dans ce didacticiel pour configurer des espaces de travail dans votre propre projet.

Licence Creative Commons.
Ce travail est concédé sous une Licence internationale Creative Eatables Attribution 4.0.