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

Vue hybride

Discussions similaires

Partager

Partager