1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    149
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Conseil

    Informations forums :
    Inscription : octobre 2013
    Messages : 149
    Points : 16
    Points
    16

    Par défaut Différence entre "Inspecter un élément" et "Injecter un Code" pour modifier un élément

    Bonjour à tous.
    Je voudrais savoir quelle est la différence entre un "clic droit" + "Inspecter" + "Double Clic sur l'élément" pour modifier "l'élément inspecter" et quand on fait simplement "F12 + Console" pour insérer le Code "$('#fullname').text('nouveau texte')" ???

    Est-ce la même chose lorsqu'on modifie simplement l'élément (à modifier) en inspectant par un clic droit et lorsqu'on injecte un Code JavaScript $('#fullname').text('nouveau texte') ???

    Merci d'avance.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    6 864
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 6 864
    Points : 10 888
    Points
    10 888

    Par défaut

    Je n'ai pas "inspecter" dans le menu contextuel. Vous utilisez quel navigateur ?

  3. #3
    Expert confirmé Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    juin 2010
    Messages
    2 368
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : juin 2010
    Messages : 2 368
    Points : 4 711
    Points
    4 711

    Par défaut

    Bonsoir cheboy,

    on va faire une expérience. Il existe une technique en JavaScript qui permet de détecter les changements dans la page, c’est un objet natif qui s’appelle MutationObserver. Je te propose de faire une page avec un MutationObserver qui indique tout changement dans la console, et de modifier cette page en utilisant l’inspecteur. Tu verras si l’observer réagit à tes modifications ou pas.

    Quant à l’évaluateur de code JS de la console (la sorte de « ligne de commande »), on en a déjà parlé, c’est exactement équivalent aux scripts de la page
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    <!DOCTYPE html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <title>Test avec MutationObserver</title>
    </head>
    <body>
     
    <p>Une licorne, deux poneys et trois arcs-en-ciel.</p>
     
    <script> "use strict";
     
    new MutationObserver(function (mutationsArray, thisObserver) {
      for (let mutation of mutationsArray) {
        for (let addedNode of mutation.addedNodes) {
          console.log("ajouté:", addedNode);
        }
        for (let removedNode of mutation.removedNodes) {
          console.log("retiré:", removedNode);
        }
        if (mutation.attributeName) {
          console.log("attributeName:", mutation.attributeName);
        }
        if (mutation.oldValue) {
          console.log("oldValue:", mutation.oldValue);
        }
      }
    }).observe(document.documentElement, {
      childList             : true,
      attributes            : true,
      characterData         : true,
      subtree               : true,
      attributeOldValue     : true,
      characterDataOldValue : true,
    });
     
    </script>
    </body>
    </html>

    Spoiler : je suis sous Firefox et toutes les modifications que je fais depuis l’inspecteur sont détectées par le script. Je te laisse vérifier par toi-même comment ça se passe sous les autres navigateurs
    La FAQ JavaScript – Les cours JavaScript
    Un article du MDN n’a pas de version française ? Je peux peut-être le traduire, envoyez-moi un MP

    La touche F12 : l’outil indispensable à tout développeur JavaScript !

Discussions similaires

  1. Réponses: 12
    Dernier message: 01/06/2010, 16h57
  2. Réponses: 2
    Dernier message: 25/05/2005, 21h34
  3. Réponses: 5
    Dernier message: 03/05/2005, 18h22
  4. Réponses: 11
    Dernier message: 31/01/2005, 17h48
  5. Quelle est la différence entre le float et le real ?
    Par Manson dans le forum Débutant
    Réponses: 3
    Dernier message: 10/08/2004, 17h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo