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

34

В Internet Explorer я могу открыть локальный файл .html и отредактировать его, выбрав «Источник» в меню «Вид», «сделать быстрое изменение, а затем« Обновить »(перезагрузить) веб-страницу.

Как я могу сделать это с Google Chrome?

Можно ли открыть файл .html в блокноте Windows? (Мне нравится блокнот, потому что он очень быстрый.)

— barlop
источник

27

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-Enter для фиксации.

— Случайный кодер
источник

1

например, попробуйте щелкнуть точно по имени тега<body>

— Casual Coder

1

Это инструмент отладки. Это не инструмент для редактирования. Для создания страниц используйте что-то вроде Aptana, Netbeans или другой более подходящей IDE. С завершением тега, ссылкой, завершением JavaScript и т. Д. Это гораздо более продуктивный способ создания веб-страниц. Если вы настаиваете на использовании Chrome Developer Tools в качестве html-редактора, есть copy as htmlопция контекстного меню. Таким образом, вы можете вставить его обратно в ваш основной текстовый редактор или другой инструмент.

— Случайный кодер

1

Самое близкое к тому, о чем вы говорите, это то, о чем я знаю, это аддон Firebug в Firefox. Среди множества различных инструментов отладки javascript / css / dom он предоставляет вам контекстное меню на странице Open with Editor. Вы можете добавить несколько редакторов. Конечно, вы можете настроить его для использования Блокнота.

— Случайный кодер

2

это немного быстрее, используя F2 для редактирования и Ctrl + Enter для фиксации

— Бенджамин

1

F2 и F2 снова выполняют ту же работу, что и Ctrl + Enter.

— Фрэнк Нок

23

откройте DevTools.
откройте панель элементов.
выберите HTML или тело или другой элемент, который вы хотите.
открыть консоль от Esc.
напишите $ 0.contentEditable = true

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

— loislo
источник

4

не совсем то, что я хочу, но это очень забавная особенность!

— Бароп

Я прав, что это включено по умолчанию в текущих версиях Chrome? Я имею в виду, я уже могу редактировать на вкладке Элементы.

— Алекс

Я только что дал вам +100, используя эту функцию.

— Бенджамин

Действительно удивительная особенность

— iroel

@ Benjamin Вы серьезно относитесь к +100 (т.е. вы дали ему дополнительные голоса в вашей локальной копии, очевидно, не окажет влияния на сам сайт, но все же), это было бы интересно .. Как вы это сделали? или вы делали очень плохую и вводящую в заблуждение шутку?

— Бароп

1

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

— MKK
источник

1

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

выберите вкладку «Источники» на левой стороне
щелкните правой кнопкой мыши на панели «Источники», выберите «Добавить папку в рабочую область» и добавьте папку с исходным HTML-файлом.
щелкните правой кнопкой мыши HTML-файл, который вы хотите редактировать, и выберите «Сопоставить с сетевым ресурсом».

— Пол Трун
источник

Это правильный путь развития в браузере

— Сидональдсон