Quelles sont les étapes pour apporter des modifications à une page Web directement dans Chrome ?

PhilosopherKing59 :

Coco Chanel 2.0, votre question est pertinente. Il existe plusieurs méthodes, des extensions Chrome aux outils de développement intégrés. Pour ma part, j'ai toujours eu une affection particulière pour l'extension "EditThisCookie" même si elle n'a rien avoir, elle me rappelle mes débuts dans le web... Mais revenons à nos moutons : les outils de développement (accessible avec F12) sont vos amis pour des modifs rapides et la manipulation du DOM en live.

Coco Chanel 2.0 :

Merci beaucoup pour ces infos, PhilosopherKing59 ! Je vais explorer les outils de développement, ça a l'air bien pratique. Et EditThisCookie, je note, on ne sait jamais !

Teddy :

Dans le même genre, je vous partage une vidéo qui explique comment inspecter les éléments d'une page web avec la touche F12, c'est super utile pour voir le code et faire des tests rapides :

Inspecter un élément d'une page Web sur chrome via la TOUCHE "F12"[/video]

VisionNeuve :

Ah, les outils de dev, toute une époque! 🤩 Moi, la première fois que j'ai ouvert ça, j'ai cru que j'avais cassé l'ordi... 😅 Bon, sinon, pour revenir au sujet, la méthode F12, c'est top pour du test rapide, comme disait Teddy. Après, faut pas oublier de bien sauvegarder ses modifs dans le code source, sinon, ça sert pas à grand-chose hein! 😉

Coco Chanel 2.0 :

Bon, alors, j'ai testé la méthode F12... C'est vrai que c'est assez bluffant de pouvoir modifier le texte direct comme ça. J'ai pu corriger une petite coquille sur une page. Par contre, effectivement, faut bien penser à reporter la modif dans le code source, sinon, au rechargement, pouf, plus rien ! Merci pour le tuyau en tout cas !

Numeria :

Content que ça ait pu t'aider, Coco Chanel 2.0. C'est un peu comme découvrir un nouveau pouvoir, non ? Pour compléter, et pour celles et ceux qui voudraient aller plus loin, il y a une autre astuce, un peu moins connue, qui consiste à utiliser la commande `document.designMode = 'on'` dans la console. Ça transforme la page en mode édition directement. C'est pratique pour faire des tests plus poussés, simuler des modifications de contenu plus importantes avant de les appliquer. Par contre, attention, comme avec F12, ça ne sauvegarde rien du tout. C'est vraiment du test en live. Mais c'est toujours bon à savoir. En parlant de tests, j'ai lu une étude récente qui montre que les développeurs passent en moyenne 30% de leur temps à tester et déboguer leur code. Ça souligne l'importance d'avoir des outils efficaces pour ça. Et si on considère que, selon le rapport de [Statista](https://www.statista.com/), il y a environ 27 millions de développeurs dans le monde, ça fait un paquet d'heures consacrées au test ! Personnellement, j'essaie toujours de consacrer au moins 20% de mon temps de développement aux tests. Ça peut paraître beaucoup, mais ça évite pas mal de mauvaises surprises par la suite. Et puis, avec des outils comme ceux dont on parle ici, ça devient plus facile et plus rapide. Donc, autant en profiter ! Et VisionNeuve, t'inquiète, on est nombreux à avoir eu peur la première fois qu'on a ouvert les outils de dev ! 😅

WaveMaster6 :

Numeria, tu dis que `document.designMode = 'on'` transforme la page en mode édition, mais concrètement, ça change quoi par rapport à l'inspecteur (F12) ? Parce que l'inspecteur, c'est pas super intuitif pour certaines modifs de texte un peu longues...

Coco Chanel 2.0 :

WaveMaster6, bonne question. Avec l'inspecteur (F12), tu modifies le code HTML dans une fenêtre à part, et tu vois le résultat en direct sur la page. C'est top pour ajuster des balises, des classes CSS, etc. Mais pour de longues modifications de texte, c'est vrai que c'est pas toujours le plus pratique. Avec `document.designMode = 'on'`, tu peux cliquer directement sur le texte de la page et le modifier comme dans un traitement de texte. C'est plus direct et intuitif pour ça. Disons que F12, c'est plus pour trifouiller la structure, et le `designMode`, c'est plus pour retoucher le contenu visible rapidement.

Clément Rousseau :

Coco Chanel 2.0, quand tu dis "apporterdescorrectionsoudesajustementsmineurs", tu penses à quel genre de modifs exactement ? Simple correction de typo ou plutôt des changements de mise en page, ajout d'images... ? Histoire de bien cerner ton besoin.

Coco Chanel 2.0 :

Clément, pour l'instant, je pensais surtout aux corrections de typo, ou remplacer un mot par un autre, des trucs vraiment basiques quoi. Mais si y'a moyen de faire plus, je suis pas contre explorer, hein ! L'ajout d'images, ça me parait chaud sans toucher au code, non ?

ArtisanDigital91 :

Coco Chanel 2.0, tu as raison, pour l'ajout d'images, c'est plus délicat sans accéder directement au code. Même avec les outils dont on parle, ça reste du bricolage temporaire. Si tu veux vraiment intégrer des images de façon propre et durable, va falloir plonger les mains dans le cambouis, ou alors utiliser un CMS avec une interface WYSIWYG, mais là on change de sujet.

LacetCréatif :

ArtisanDigital91 a raison, pour les images, faut pas rêver, c'est pas avec F12 ou le `designMode` qu'on va faire des miracles. Ceci dit, pour les corrections de typo et les petits remplacements de mots, c'est déjà super pratique, surtout si on n'a pas envie d'ouvrir l'IDE pour une bête coquille. Moi, ça m'arrive souvent de corriger direct dans Chrome quand je vois une faute sur le site de ma boutique. C'est plus rapide que de lancer VS Code, ouvrir le fichier, modifier, enregistrer, puis uploader sur le serveur. Et puis, comme disait Numeria, ces outils de test, c'est du temps gagné. 30% du temps des développeurs passés en test, c'est énorme! J'imagine que pour un site e-commerce comme le mien, où la moindre erreur peut faire fuir un client, c'est encore plus vrai. D'ailleurs, je me demande si je devrais pas investir dans des outils de test plus poussés... Parce que là, je fais surtout des tests manuels, un peu à l'arrache. 😅 Bon, sinon, Coco Chanel 2.0, si tu veux vraiment aller plus loin sans coder, regarde du côté des extensions Chrome spécialisées. Y'en a des payantes qui permettent de faire des modifs plus avancées, genre changer la couleur d'un bouton ou déplacer un élément. Mais bon, faut voir si ça vaut le coup par rapport au temps que ça prendrait d'apprendre les bases du HTML et du CSS. Parce qu'au final, c'est souvent plus simple de faire les choses soi-même que de chercher des solutions toutes faites qui font pas exactement ce qu'on veut.

CodeMuse :

Ok, si je comprends bien, on a exploré plusieurs pistes pour modifier une page web directement dans Chrome, sans toucher au code source de prime abord. Il y a : * L'inspecteur (F12), pour modifier le code HTML et CSS en live, mais pas super pratique pour les longs textes. * La commande `document.designMode = 'on'`, qui permet d'éditer le texte directement sur la page, comme dans un traitement de texte. On a aussi souligné que ces méthodes sont surtout utiles pour des tests rapides et des corrections mineures (typos, petits remplacements), et qu'il faut reporter les changements dans le code source pour que ce soit permanent. Pour des modifs plus importantes (ajout d'images, mise en page), c'est plus compliqué sans coder. Et enfin, on a évoqué l'importance des tests en général dans le développement web.

Yao Ming59 :

Pour simplifier, Coco Chanel 2.0, tu peux installer une extension Chrome comme "Stylebot". C'est assez intuitif pour modifier les textes et les couleurs directement sur la page. C'est parfait pour des ajustements rapides sans te prendre la tête avec le code, et ca s'enregistre en plus, un vrai plus. En espérant que cela t'aide.

Sherlock :

J'aurais tendance à dire d'utiliser l'extension "UserJavaScriptandCSS". Ça permet d'injecter du CSS ou du JS custom sur n'importe quelle page. Tu peux corriger ton texte direct comme ça, et même modifier l'apparence. C'est un peu plus technique que Stylebot, mais t'as plus de contrôle, et c'est pas mal si tu veux réutiliser tes modifs sur plusieurs sites. Juste, pense à bien désactiver l'extension quand t'en as plus besoin, sinon, ça peut faire des trucs bizarres sur certaines pages.

PhilosopherKing59 :

C'est une bonne option que tu proposes là Sherlock ! Pour aller plus loin, il existe aussi des solutions comme "Greasemonkey" ou "Tampermonkey" (pour Chrome et Firefox) qui permettent d'injecter des scripts utilisateurs. C'est encore plus puissant que UserJavaScriptandCSS, car tu peux modifier le comportement des pages web en profondeur, automatiser des tâches, etc. Mais c'est aussi plus technique, car ça demande de savoir écrire des scripts en JavaScript. Disons que UserJavaScriptandCSS, c'est un peu le niveau intermédiaire, et Greasemonkey/Tampermonkey, c'est le niveau expert. Mais pour ceux qui veulent vraiment avoir un contrôle total sur l'affichage et le fonctionnement des pages web, c'est une option à considérer.

Coco Chanel 2.0 :

Je suis pas sûre que ce soit une solution simple pour des personnes qui ne veulent pas coder de se lancer dans Greasemonkey ou Tampermonkey, on s'éloigne de la demande de base là, non ?

Clément Rousseau :

Coco Chanel 2.0 a raison, on s'emballe un peu là ! Greasemonkey et Tampermonkey, c'est super puissant, j'utilise ça pour pas mal de choses perso, mais c'est clair que ce n'est pas la porte d'entrée la plus simple pour quelqu'un qui veut juste corriger une typo sans coder. On perd de vue l'objectif initial.Pour revenir à des choses plus accessibles, et pour compléter ce qui a été dit, il faut garder à l'esprit que le temps passé à chercher la solution parfaite peut parfois dépasser le temps nécessaire pour faire la modification directement dans le code. Je m'explique : si une personne passe, disons, 2 heures à chercher une extension Chrome qui fait exactement ce qu'elle veut, à la configurer, à apprendre à l'utiliser, alors qu'elle aurait pu corriger sa typo en 5 minutes en ouvrant le fichier concerné, il y a un problème.D'ailleurs, en tant que responsable de l'hébergement web, je vois souvent des clients qui me contactent parce qu'ils ont fait des modifications via ces outils et qu'ils ont tout cassé. C'est là qu'on se rend compte que toucher au code, même via des outils dits "simples", peut avoir des conséquences inattendues. Ce que je conseille toujours, c'est de faire une sauvegarde avant de se lancer.Et concernant les tests, dont parlait Numeria, c'est un point super important. 30% du temps des développeurs passés en tests, ça peut paraître beaucoup, mais c'est un investissement rentable. Quand on sait qu'une minute d'indisponibilité pour un site e-commerce peut coûter une fortune (certaines études parlent de plusieurs milliers d'euros), on comprend vite l'intérêt de bien tester ses modifications avant de les mettre en production. D'ailleurs, d'après une étude de Ponemon Institute, le coût moyen d'une violation de données s'élève à 4,24 millions de dollars en 2021. Ça donne à réfléchir.Donc, Coco Chanel 2.0, pour répondre simplement à ta question initiale, F12 ou `document.designMode = 'on'` c'est bien pour du dépannage rapide, mais pour des modifications plus conséquentes ou régulières, il vaut mieux se former un minimum au code ou passer par un CMS. Et surtout, toujours faire des sauvegardes !

Quelles sont les étapes pour apporter des modifications à une page Web directement dans Chrome ?

Commentaires (18)