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

34

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

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

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

google-chrome browser html notepad 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
  1. откройте DevTools.
  2. откройте панель элементов.
  3. выберите HTML или тело или другой элемент, который вы хотите.
  4. открыть консоль от Esc.
  5. напишите $ 0.contentEditable = true

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

loislo
источник
4
не совсем то, что я хочу, но это очень забавная особенность!
Бароп
Я прав, что это включено по умолчанию в текущих версиях Chrome? Я имею в виду, я уже могу редактировать на вкладке Элементы.
Алекс
Я только что дал вам +100, используя эту функцию.
Бенджамин
Действительно удивительная особенность
iroel
@ Benjamin Вы серьезно относитесь к +100 (т.е. вы дали ему дополнительные голоса в вашей локальной копии, очевидно, не окажет влияния на сам сайт, но все же), это было бы интересно .. Как вы это сделали? или вы делали очень плохую и вводящую в заблуждение шутку?
Бароп
1

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

MKK
источник
1

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

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