Редактирование исходного кода HTML с помощью Google Chrome

Ctrl+Shift+I or F12 -> Элементы, он должен показать ваш источник. Щелкните правой кнопкой мыши по любому элементу и нажмите Edit as HTML

Правка:

Есть несколько расширений, которые выглядят так, как вы хотите: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor & Live WebSite Editor выглядят многообещающе.

Добавлено барлопом Я вижу, что (после ctrl-shift-I / F12), щелчок правой кнопкой мыши по тегу <HTML..> or </HTML> и щелчок по “отредактировать как html” позволяет мне редактировать где угодно внутри него. Выбор открывающего тега означает, что всплывающее окно для редактирования просто охватывает все html исходники, которые там есть - что очень аккуратно с точки зрения пространства при редактировании. Выбор закрывающего тега может быть полезен, так как всплывающее окно затем появляется под html, так что вы видите “до/после”. Или лучше, как говорит Бенджамин, F2 для редактирования, ctrl-вентилятор для коммита.

1. откройте DevTools.
2. откройте панель Elements.
3. выберите html или body или другой элемент, который вам нужен.
4. откройте консоль Esc.
5. напишите $0.contentEditable = true

теперь вы можете редактировать текст на странице и перемещать изображения, но это не то, что вы действительно хотите :)

Если вы хотите редактировать файл как html источник (а не отдельные элементы), вы можете сделать следующее:

1. выберите закладку ‘Sources’ с левой стороны
2. щелкните правой кнопкой мыши на панели ‘Sources’ и выберите ‘Add folder to workspace’ and add folder with source HTML file
3. щелкните правой кнопкой мыши на html файл, который вы хотите редактировать, и выберите ‘map to network resource’.

Вы можете попробовать этот InlineEditor для редактирования и сохранения статического html на страницах браузера здесь демонстрация