Injecter/modifier du code HTML dans une page

Injecter/modifier du code HTML dans une page - HTML/CSS - Programmation

Marsh Posté le 26-01-2010 à 19:01:29    

Bonjour a tous,
 
Je cherche a modifier a la volée le code d'une page pour ajouter rapidement des éléments et voir les résultats en rafraichissant simplement la page (pour faire des maquettes).
J'ai essaye avec Firebug mais apparemment on ne peut que modifier les composant existant, le vue HTML n'est pas "éditable" comme si c'était un champs texte.

Reply

Marsh Posté le 26-01-2010 à 19:01:29   

Reply

Marsh Posté le 26-01-2010 à 21:43:36    

un peu comme un fichier html ?


---------------

Reply

Marsh Posté le 27-01-2010 à 10:20:11    

heuuu ? moi pas comprendre ...
ben tu fais un fichier HTML :/


---------------
Blablaté par Harko
Reply

Marsh Posté le 27-01-2010 à 14:23:26    

mais non...
Je peux récupérer le code source de la page et après ??
Si je récupère pas toutes les dépendances: css, javascript, images, objets la page sera déformée. Je veux pouvoir modifier le code html de la page a la volée directement dans mon navigateur et voir les modifications tout de suite.

Reply

Marsh Posté le 27-01-2010 à 14:40:52    

Firebug, onglet html, menu edit

Reply

Marsh Posté le 27-01-2010 à 15:03:16    

Opera


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 28-01-2010 à 18:31:09    

David Boring a écrit :

Firebug, onglet html, menu edit


 
Alors que j'ai bien dit:
 

Citation :

J'ai essaye avec Firebug mais apparemment on ne peut que modifier les composant existant, le vue HTML n'est pas "éditable" comme si c'était un champs texte.


 
je ne veux pas que modifier les lignes qui sont déjà écrites mais je veux aussi AJOUTER de nouvelles lignes !
 
EDIT: effectivement le bouton Editer a marche une fois puis plus jamais, maintenant quand je clique dessus ca ne change pas la vue, ca ne fait rien. J'ai oublie quelque chose ?


Message édité par cimourdain le 28-01-2010 à 18:35:00
Reply

Marsh Posté le 28-01-2010 à 21:14:30    

et pourquoi ne pas enregistrer la page en html et la modifier ?


---------------

Reply

Marsh Posté le 28-01-2010 à 21:51:06    

cimourdain a écrit :

mais non...
Je peux récupérer le code source de la page et après ??
Si je récupère pas toutes les dépendances: css, javascript, images, objets la page sera déformée. Je veux pouvoir modifier le code html de la page a la volée directement dans mon navigateur et voir les modifications tout de suite.


Ahhh ben fallait le dire tout de suite coco, plusieurs soluton, soit utiliser Charles proxy et faire une redirection du fichier que tu veux tester vers un faux fichier à toi. mais charles proxy est payant
 
Sinon tu peux tout simplement, prendre le code source de ta page puis ajouter dans le head :  
 
<base href="urldebasedelapage sans le nom du fichier" />
et voila tu pourras modifier ton fichier HTML et tester directement et il ira directement appeler les ressources qui sont online sur le site


---------------
Blablaté par Harko
Reply

Marsh Posté le 29-01-2010 à 08:51:46    

Opera!


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 29-01-2010 à 08:51:46   

Reply

Marsh Posté le 29-01-2010 à 08:52:43    

flo850 a écrit :

et pourquoi ne pas enregistrer la page en html et la modifier ?


 
je l'ai déjà dit: a cause des dépendances: images, js, css etc... il faudrait que je prenne tout pour mettre a cote de ma page enregistée, sans compter que la page contient des frames donc des liens vers d'autres pages etc.

Reply

Marsh Posté le 29-01-2010 à 11:51:35    

cimourdain a écrit :


 
je l'ai déjà dit: a cause des dépendances: images, js, css etc... il faudrait que je prenne tout pour mettre a cote de ma page enregistée, sans compter que la page contient des frames donc des liens vers d'autres pages etc.


tu as lu le post juste que je viens de faire :o


---------------
Blablaté par Harko
Reply

Marsh Posté le 29-01-2010 à 12:00:12    

gatsu35 a écrit :


tu as lu le post juste que je viens de faire :o


 
désole mais elle pue ta solution.
 
Pour moi la bonne solution c'est que Firebug marche comme il devrait marcher.

Reply

Marsh Posté le 29-01-2010 à 12:19:58    

Sachant qu'on ne sait pas exactement ce que tu veux, si ma solution pue, ben tant pis.
 
Sinon la meilleure des solution c'est d'utiliser Charles Proxy
 
Tu créé un serveur en local sur ta machine, tu récupère les  2 ou 3 fichiers que tu souhaite modifier  tu les mets dans le serveur en local
 
ensuite avec ton navigateur, tu pointes d'abord sur le proxy localhost:8888 qui est charles, avec firefox ya un plugin qui automatise cette action, et pour IE il le fait nativement.
 
Donc dans charles tu fais  
- Tools -> Rewrite
- tu créées un nouveau "set" (bouton Add)
- Dans "Location" tu cliques sur add, et dans host tu tappes : "http://www.leserveurquetuveuxmodifier.com/*" (sans les guillemets)
- Tu valides
 
Ensuite dans Rules tu va rajouter des règles de redirection en gros, on va faire croire au navigateur qu'il appelle les fichiers du site mais il appellera tes fichiers (totalement transparent puisque cette action se situe au niveau du proxy)
Pour rajouter une règle :  
- Add
- Dans la fenetre :  
- Type : URL
- dans "Match" : tu mets l'url du fichier que tu veux rediriger
ex : http://www.monserveur.com/macssquejeveux.css
- Tu décoches "Match whole Value" et "Regexp"
- dans "Replace" : tu mets l'url du fichier en local
ex : http://localhost:80/monfichierCSSenlocal.css
- tu coches "All Values"
 
 
Et voila tu fais ça pour les ficheirs que tu veux rediriger et basta, tu peux indiquer un répertoire si tu veux, ex :  
- Match : http://www.monserveur.com/css
- Replace : http://localhost/css
 
et hop tous les fichiers CSS du serveur seront récupérés sur ton serveur en localhost.
 
Et si tu penses que cette solution là elle pue, tu peux aller te faire cuire un oeuf, avec cette méthode on a pu bosser sur la refonte graphique de sites déjà en prod, sans avoir de serveur à remonter ou quoi que ce soit.  
On a pu toucher au JS, CSS et Images, et directement tester sur le site en production.  
Résultat on a pu livrer au client notre travail en lui disant : "On est sur que ça marche"


Message édité par gatsu35 le 29-01-2010 à 13:16:37

---------------
Blablaté par Harko
Reply

Marsh Posté le 29-01-2010 à 13:57:21    

J'ai juste un peu l'impression de passer complètement inaperçu, mais j'insiste quand même : Opera, en plus d'avoir des outils de développeur équivalent à Firebug en natif, fait exactement ce dont tu as besoin : "clic-droit sur une page -> Source" affiche le code source de ta page. Tu peux alors l'éditer et appliquer directement les modification sur la page affichée dans ton navigateur.


---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Marsh Posté le 29-01-2010 à 14:47:28    

kao98 a écrit :

J'ai juste un peu l'impression de passer complètement inaperçu, mais j'insiste quand même : Opera, en plus d'avoir des outils de développeur équivalent à Firebug en natif, fait exactement ce dont tu as besoin : "clic-droit sur une page -> Source" affiche le code source de ta page. Tu peux alors l'éditer et appliquer directement les modification sur la page affichée dans ton navigateur.


 
Oui voila je cherche une solution simple et rapide a mettre en place. Seulement je suis pas utilisateur d'Opera et j'aurais quand même aime le faire avec Firefox.

Reply

Marsh Posté le 29-01-2010 à 14:53:59    

Ok, donc tu demandes des solutions, mais pour chacune des solutions proposée, tu ne prends même pas la peine d'essayer, ne serait-ce que pour voir si ça pourrait te convenir ?
 
Tu n'es pas utilisateur d'Opera. Pourquoi ne pas tester, et s'il te convient, le devenir ? Au pire, tu l'utilises juste pour ce que tu as à faire, et dans le pire du pire, tu le désinstalles !
 
En attendant, Opera, il fait juste ce dont tu as besoin.
 
:pfff:
 
Et pis d'abord, quel genre de développeur web se refuse d'installer un navigateur particulier sur son PC ? O.o


Message édité par kao98 le 29-01-2010 à 15:01:59

---------------
Kao ..98 - Uplay (R6S) : kao98.7.62x39 - Origin (BF4, BF1) : kntkao98
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed