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

**cheboy** · 13/11/2017, 19h51

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.

**mathieu** · 13/11/2017, 23h13

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

**Watilin** · 14/11/2017, 21h22

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

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

JavaScript

Discussions similaires

Partager

Partager