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.

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

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:

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 :)