Modification du code source HTML avec Google Chrome

34

Dans Internet Explorer, je peux ouvrir un fichier .html local et le modifier en sélectionnant "Source" dans le menu "Affichage", "effectuer une modification rapide, puis" Actualiser "(recharger) la page Web.

Comment puis-je faire cela avec Google Chrome?

Puis-je ouvrir le fichier .html dans le Bloc-notes Windows? (J'aime le bloc-notes parce que c'est très rapide.)

google-chrome browser html notepad barlop
la source

Réponses:

27

Ctrl+Shift+I or F12-> Éléments, il devrait montrer votre source. Faites un clic droit sur n'importe quel élément et cliquezEdit as HTML

Modifier:

Certaines extensions ressemblent à ce que vous voulez: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor& Live WebSite Editorsemble prometteur.

Ajouté par barlop,
je vois cela (après ctrl-shift-I / F12), en cliquant avec le bouton droit de la souris sur la <HTML..> or </HTML>balise et en cliquant sur "edit as html". me permet d'éditer n'importe où en son sein. Le choix de la balise d'ouverture signifie que le menu contextuel pour l'édition ne couvre que toutes les sources HTML présentes, ce qui est très soigné en termes d'espace lors de l'édition. Le choix de la balise de fermeture peut être utile car la fenêtre contextuelle apparaît alors sous le code HTML pour vous permettre de voir un avant / un après. Ou mieux, comme dit benjamin, F2 à éditer, ctrl-enter à commettre.

Codeur occasionnel
la source
1
essayez par exemple de cliquer exactement sur le nom de la balise<body>
Casual Coder
1
C'est un outil de débogage. Ce n'est pas un outil d'édition. Pour créer des pages, utilisez quelque chose comme Aptana, Netbeans ou un autre IDE plus approprié. Avec complétion de balises, référence, complétion de javascript, etc. C'est un moyen beaucoup plus productif de créer des pages Web. Si vous insistez pour utiliser les outils de développement Chrome comme éditeur HTML, il existe une copy as htmloption de menu contextuel. Vous pouvez donc le coller dans l'éditeur de texte principal de votre choix ou un autre outil.
Casual Coder
1
Le plus proche de ce dont vous parlez, que je sache, est l'addon Firebug dans Firefox. Parmi de nombreux outils de débogage javascript / css / dom, il vous donne un menu contextuel sur une Open with Editoroption de page . Vous pouvez ajouter plusieurs éditeurs. Bien sûr, vous pouvez le configurer pour utiliser le Bloc-notes.
Casual Coder
2
c'est un peu plus rapide d'utiliser F2 pour éditer et Ctrl + Entrée pour valider
Benjamin
1
F2 et F2 font à nouveau le même travail que Ctrl + Entrée.
Frank Nocke
23
  1. Ouvrez DevTools.
  2. ouvrez le panneau des éléments.
  3. sélectionnez html ou body ou un autre élément de votre choix.
  4. console ouverte par Esc.
  5. écrire $ 0.contentEditable = true

maintenant, vous pouvez éditer du texte sur la page et déplacer des images, mais ce n'est pas ce que vous voulez vraiment :)

Loislo
la source
4
pas vraiment ce que je veux, mais c'est une fonctionnalité très amusante!
barlop
Ai-je raison de dire que cette option est activée par défaut dans les versions actuelles de Chrome? Je veux dire, je peux déjà éditer dans l'onglet Eléments.
Alex
Je viens de vous donner +100 en utilisant cette fonctionnalité.
Benjamin
Vraiment incroyable fonctionnalité
iroel
@Benjamin Etes-vous sérieux au sujet de +100 (c'est-à-dire, lui avez-vous accordé des votes supplémentaires dans votre copie locale, cela n'aura-t-il évidemment pas d'effet sur le site lui-même?), Ce serait intéressant. Comment avez-vous fait cela? ou faisiez-vous une blague très mauvaise et trompeuse?
Barlop
1

Vous pouvez essayer cet InlineEditor pour éditer et sauvegarder du HTML statique dans les pages de navigateur, voici la démo

MKK
la source
1

Si vous souhaitez modifier le fichier en tant que source html (et non des éléments individuels), vous pouvez procéder comme suit:

  1. sélectionnez l'onglet 'Sources' sur le côté gauche
  2. Faites un clic droit dans le volet "Sources" et sélectionnez "Ajouter un dossier à l'espace de travail", puis ajoutez un dossier avec le fichier HTML source.
  3. faites un clic droit sur le fichier html que vous souhaitez modifier et sélectionnez "mapper à la ressource réseau"
Paul Troon
la source
C’est la bonne façon de se développer dans le navigateur
Sidonaldson