1. #1
    Membre à l'essai
    Homme Profil pro
    Développeur Web
    Inscrit en
    octobre 2013
    Messages
    61
    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 : 61
    Points : 14
    Points
    14

    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 469
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 6 469
    Points : 10 370
    Points
    10 370

    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 172
    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 172
    Points : 4 223
    Points
    4 223

    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
    Access42, ressources francophones sur l’accessibilité
    La touche F12 : l’outil indispensable à tout développeur JavaScript !

Discussions similaires

  1. Réponses: 12
    Dernier message: 01/06/2010, 17h57
  2. Réponses: 2
    Dernier message: 25/05/2005, 22h34
  3. Réponses: 5
    Dernier message: 03/05/2005, 19h22
  4. Réponses: 11
    Dernier message: 31/01/2005, 18h48
  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, 18h26

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