Редагування вихідного коду HTML за допомогою Google Chrome

34

В Internet Explorer я можу відкрити локальний .html файл і відредагувати його, вибравши "Джерело" в меню "Перегляд", зробити швидку зміну, а потім "Оновити" (перезавантажити) веб-сторінку.

Як це зробити з Google Chrome?

Чи можу я відкрити файл .html у Блокноті Windows? (Мені подобається блокнот, тому що це дуже швидко.)

— барлоп
джерело

27

Ctrl+Shift+I or F12-> Елементи, це повинно показувати ваше джерело. Клацніть правою кнопкою миші на будь-якому елементі та натиснітьEdit as HTML

Редагувати:

Є деякі розширення, схожі на те, що ви хочете: https://chrome.google.com/extensions/search?itemlang=&q=editor

ChromeEditor& Live WebSite Editorвиглядати перспективно.

Додано barlop
Я бачу, що (після ctrl-shift-I / F12) клацніть правою кнопкою миші <HTML..> or </HTML>тег і натисніть "редагувати як html". дозволяє мені редагувати будь-де в ній. Вибір тегу відкриття означає, що спливаюче вікно для редагування просто охоплює все джерело html, яке там є - що дуже чітко з точки зору місця при редагуванні. Вибір тегу закриття може бути корисним, оскільки спливаюче вікно з'являється під html, щоб ви побачили до / після. Або краще, як каже Бенджамін, F2 для редагування, ctrl-enter для фіксації.

— Повсякденний кодер
джерело

1

спробуйте точно натиснути на ім'я тегу, наприклад<body>

— Casual Coder,

1

Це інструмент налагодження. Це не інструмент редагування. Для створення сторінок використовуйте щось на зразок Aptana, Netbeans або інший більш підходящий IDE. З заповненням тегів, посиланням, завершенням JavaScript тощо. Це набагато продуктивніший спосіб створення веб-сторінок. Якщо ви наполягаєте на використанні Інструментів для розробників Chrome в якості редактора 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 або body або інший елемент, який ви хочете.
відкрити консоль Esc.
написати $ 0.contentEditable = true

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

— loislo
джерело

4

насправді не те, що я хочу, але це дуже забавна особливість!

— барлоп

Я правий, що це значення за замовчуванням у поточних версіях Chrome увімкнено? Я маю на увазі, я вже можу редагувати на вкладці «Елементи».

— Олексій

Я щойно дав вам +100 за допомогою цієї функції.

— Бенджамін

Дійсно дивовижна функція

— iroel

@ Бенджамін Ви серйозно ставитесь до +100 (тобто ви давали йому додаткові голоси у вашій місцевій копії, очевидно, це не вплине на сам сайт, але все-таки), це було б цікаво .. Як ви це зробили? чи ти робив дуже поганий та оманливий жарт?

— барлоп

1

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

— MKK
джерело

1

Якщо ви хочете редагувати файл як джерело html (а не окремі елементи), ви можете зробити наступне:

виберіть вкладку "Джерела" зліва
клацніть правою кнопкою миші на панелі "Джерела" та виберіть "Додати папку в робочу область" та додайте папку з вихідним HTML-файлом
клацніть правою кнопкою миші файл html, який ви хочете відредагувати, та виберіть "відобразити мережевий ресурс"

— Пол Троон
джерело

Це правильний шлях розвитку в браузері

— sidonaldson