Как изменить код страницы в Google Chrome

Обновлено: 04.07.2024

Иногда разработчику трудно найти и исправить ошибки. Вам может быть предложено случайным образом использовать console.log(), чтобы ваш код работал правильно.

Раньше мы использовали отдельные приложения для разработки и просмотра, но теперь это почти закончилось. Мы можем редактировать исходные файлы прямо в Chrome, и он сохранит результат в локальном файле. Так что Изменения могут быть применены немедленно, без обновления браузера. Это экономит много времени.

Следующий метод локального сохранения кода должен работать в более новых версиях Chrome, но теперь мы можем редактировать и сохранять только файлы JavaScript. Почти наверняка HTML и CSS наконец-то будут поддерживаться.

Выполните следующие действия:

1. Запустите инструменты разработчика

Откройте Chrome, загрузите страницу из локальной файловой системы/сервера

Откройте Инструменты разработчика Google с помощью меню "Инструменты" или нажмите Ctrl + Shift + I/Cmd + Shift + I.

Перейдите на вкладку "Источник" и щелкните значок "Источники" или нажмите Ctrl + O, чтобы выбрать файл JavaScript.

2: отредактируйте свой код

Теперь перейдите прямо в файл и отредактируйте код. Google Chrome предоставляет очень полезный список свойств, который поможет вам найти нужную строку — нажмите Ctrl + Shift + O / Cmd + Shift + O:

3: Сохраните файл

Нажмите Ctrl + S / Cmd + S, чтобы сохранить новые изменения.

Это изменение обновляет файл в памяти и последовательно применяет новые изменения. Обратите внимание, однако, что код не перезапускается, поэтому изменения в переменных инициализации не переопределяются.

Если вы хотите сохранить изменения в исходном файле кода, щелкните правой кнопкой мыши изменение и выберите Сохранить или Сохранить как. Когда закончите, вам нужно обновить страницу, и скрипт кода перезапустится.

4. Исправьте свои ошибки

Вызвало ли ваше обновление некоторые проблемы? Щелкните правой кнопкой мыши редактор инструментов chrome dev и выберите «Локальные изменения». Нижняя панель показывает все текущие изменения, и с ее помощью вы можете вернуться.

Инструменты разработчика этого Chrome не могут заменить текущий редактор, но эти инструменты полезны, если вы работаете в другой системе или хотите быстро внести изменения. Таким образом, используя этот редактор и его функцию локального сохранения, вы можете сэкономить свое время и исправить/проверить свои быстрые ошибки.

Крис Хоффман

< бр />

Крис Хоффман
Главный редактор

Крис Хоффман – главный редактор How-To Geek. Он писал о технологиях более десяти лет и два года был обозревателем PCWorld. Крис писал для The New York Times и Reader's Digest, давал интервью в качестве эксперта по технологиям на телевизионных станциях, таких как NBC 6 в Майами, и освещал свою работу в новостных агентствах, таких как Би-би-си. С 2011 года Крис написал более 2000 статей, которые были прочитаны почти миллиард раз — и это только здесь, в How-To Geek. Подробнее.

Веб-страницы — это просто документы, которые отображаются в вашем веб-браузере. Но что, если бы вы могли печатать прямо на любой веб-странице, чтобы изменить ее? Вы можете, и вам не нужно расширение браузера — это функция, встроенная в каждый современный браузер.

Эта функция использует преимущества функции «document.designMode», которую можно включить с помощью консоли JavaScript веб-браузера. Недавно Томек Сулковски отметил это в Твиттере, но это так здорово, что мы должны поделиться этим с нашими читателями.

Вы можете использовать эту функцию, чтобы очистить веб-страницу перед ее печатью, проверить, как будут выглядеть изменения на веб-странице, или даже просто разыграть людей. Это будет похоже на редактирование документа Word — не нужно возиться с HTML.

Чтобы активировать эту функцию, посетите веб-страницу и откройте консоль разработчика. Чтобы открыть консоль в Google Chrome, выберите меню > Дополнительные инструменты > Инструменты разработчика или нажмите Ctrl+Shift+i.

Хотя мы используем Chrome в качестве примера, эта функция работает и в других современных браузерах. Вот как открыть консоль в других браузерах:

В Mozilla Firefox выберите меню > Веб-разработчик > Веб-консоль или нажмите Ctrl+Shift+K.
В Apple Safari нажмите «Safari» > «Настройки» > «Дополнительно» и включите параметр «Показывать меню «Разработка» в строке меню». Затем нажмите «Разработка» > «Показать консоль JavaScript».
В Microsoft Edge выберите меню > Дополнительные инструменты > Инструменты разработчика или нажмите F12, а затем перейдите на вкладку "Консоль".

Перейдите на вкладку "Консоль" в верхней части панели "Инструменты разработчика". Введите в консоль следующее и нажмите Enter:

Теперь при желании вы можете закрыть консоль и редактировать текущую веб-страницу, как если бы это был редактируемый документ. Щелкните где-нибудь, чтобы вставить курсор и ввести текст. Используйте клавиши Backspace или Delete, чтобы удалить текст, изображения и другие элементы.

Это просто меняет способ отображения веб-страницы в вашем браузере. Как только вы обновите страницу, вы снова увидите оригинал. Если вы перейдете на другую веб-страницу или вкладку, она не будет находиться в режиме конструктора, пока вы не откроете консоль и не наберете эту строку еще раз.

Вы даже можете вернуться в консоль и запустить следующую команду, чтобы отключить режим конструктора:

Веб-страницу больше нельзя будет редактировать, но ваши изменения сохранятся до тех пор, пока вы не обновите страницу в следующий раз.

› Как отключить (и включить) JavaScript в Google Chrome
› Что делают ваши функциональные клавиши в Chrome DevTools
› Как взломать скрытую игру про динозавров в Google Chrome
› Сколько оперативной памяти требуется вашему ПК?
› QWERTY-клавиатура — самая большая неразгаданная тайна технологий
› Что означает ИК и как вы его используете?
› Matter — это долгожданный стандарт умного дома
› 5 вещей, которые вы, вероятно, не знали о GIF-файлах

Chrome DevTools – это мощный набор инструментов для веб-разработки, встроенный прямо в браузер Chrome. Одной из самых полезных функций DevTools для веб-разработчиков является возможность редактировать HTML и CSS на странице в реальном времени. Эта функция позволяет любому разработчику, даже со слабым знанием HTML и CSS, быстро создавать прототипы и повторять возможные изменения веб-страницы.

Во время работы над Lucidchart одним из моих недавних проектов было добавление флажков к полям ввода, где пользователи вводят свою платежную информацию, чтобы обеспечить немедленную обратную связь, когда пользователи вводят правильно отформатированную и достоверную информацию. Несмотря на то, что мне удобнее работать с нашим серверным кодом, чем с CSS и HTML, я смог легко реализовать эти галочки с помощью возможности редактирования в реальном времени.

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

Есть два быстрых способа открыть инспектор. Во-первых, откройте DevTools с помощью F12, выберите вкладку «Элементы» и щелкните значок курсора в левом верхнем углу. Второй, более быстрый способ — использовать сочетание клавиш Ctrl+Shift+C. Если вы регулярно работаете в среде Linux, скорее всего, вы много раз случайно использовали этот ярлык, когда хотели скопировать текст!

Когда инспектор активен, вы можете найти HTML-код любого элемента на странице, щелкнув его. Chrome также покажет вам информацию о расположении и размере элементов при наведении на них курсора.

Вы можете найти HTML-код любого элемента на странице, щелкнув его.

После того как элемент выбран, вы можете взаимодействовать с ним самыми разными способами. Щелкнув правой кнопкой мыши на HTML-коде на вкладке "Элементы" и выбрав "Редактировать как HTML", вы можете вносить живые изменения в разметку веб-страницы, которую Chrome сразу же отобразит после того, как вы закончите редактирование.

Сообщить DevTools, что вы закончили редактирование, может быть сложно. Ваш первый порыв может состоять в том, чтобы нажать клавишу Escape, но это выведет вас из режима редактирования и отменит ваши изменения. Вы можете убедиться, что ваши изменения сохранены, нажав Ctrl+Enter или просто щелкнув за пределами текстового поля, которое вы редактируете.

Редактирование HTML можно отменить или повторить с помощью обычных горячих клавиш Ctrl+Z и Ctrl+Y. Они также будут потеряны при обновлении страницы, если вы не включите постоянное редактирование.

Чтобы начать свой проект с галочками, я начал с создания элемента-прототипа в качестве места для тестирования настроек, которые я хотел внести. Используя функцию интерактивного редактирования Chrome DevTools, я добавил заполнитель div, содержащий только букву «X», в качестве временной импровизированной галочки.

Редактировать как Html позволяет вносить изменения в веб-страницу в режиме реального времени в Chrome.

Очевидно, что это очень плохое оправдание для галочки, но этого достаточно, чтобы помочь мне быстро определить некоторые проблемы заранее. Во-первых, галочка стоит совершенно не в том месте. Кроме того, это испортило выравнивание других элементов на странице. Обе эти проблемы можно решить с помощью CSS.К счастью, Chrome также предоставляет несколько отличных инструментов для быстрого прототипирования изменений CSS с помощью DevTools.

Редактирование CSS на вкладке «Элементы»

Справа от представления HTML на вкладке "Элементы" находится представление, показывающее, какие правила CSS применяются к выбранному элементу. Это представление может быть чрезвычайно полезным для отладки множества ошибок CSS. Например, поскольку вы можете видеть, какие правила применяются к текущему элементу, вы можете определить, применяются ли к элементу правила CSS, которые вы не ожидали, или отсутствуют правила CSS, которые, по вашему мнению, применялись к нему. Представление CSS также показывает, когда стиль, примененный соответствующим правилом, переопределяется более конкретным правилом.

Представление CSS предоставляет очень полезные функции редактирования в реальном времени. Рядом с каждым стилем есть флажок, позволяющий включать или отключать определенные стили и видеть, как они влияют на элементы на странице. Вы также можете применить новые стили к определенному элементу, существующему правилу CSS или совершенно новому правилу CSS. Все эти изменения немедленно отражаются на странице.

Инструменты разработчика Chrome предоставляют ряд удобных функций, упрощающих редактирование CSS в реальном времени. Наиболее полезным для тех, кто менее знаком с CSS, является автозаполнение. Когда вы вводите название своего стиля, Chrome будет предлагать вероятные совпадения. Как только вы введете имя стиля, Chrome также поможет вам использовать правильное значение для этого стиля. Для перечисленных стилей, таких как «позиция» или «отображение», Chrome покажет вам допустимые значения на выбор. Для числового ввода вы можете использовать стрелки вверх и вниз, чтобы увеличить значение на 1 без повторного ввода единиц измерения.

Как и при редактировании HTML в реальном времени, вы можете отменить или повторить изменения CSS в реальном времени с помощью Ctrl+Z и Ctrl+Y.

С помощью DevTools я смог очень легко подобрать комбинацию правил CSS, которая выровняла мой псевдофлажок там, где мне было нужно. Процесс включал в себя пробы и ошибки, но оперативное редактирование сделало цикл итерации очень коротким, что было особенно полезно для новичка в CSS, такого как я.

Редактирование CSS в реальном времени – это отличный способ быстро внести незначительные изменения в CSS.

Заключение

Мы только поверхностно рассмотрели, на что способны инструменты Chrome DevTools для редактирования в реальном времени, особенно в области CSS. Эти основные советы всегда бесценны для меня, когда я отлаживаю проблему с CSS или быстро создаю прототип нового изменения CSS.

Хотя такие инструменты, как динамическая перезагрузка, упростили этот процесс, многие разработчики продолжают настраивать код как в DevTools, так и в своем редакторе.

Однако исходные файлы можно открывать и редактировать непосредственно в Chrome. Любые внесенные вами изменения сохраняются в файловой системе и обновляются в редакторе (при условии, что он обновляется при изменении файла).

Шаг 1. Запустите инструменты разработчика

Откройте Chrome, загрузите страницу из локальной файловой системы/сервера и откройте Инструменты разработчика в меню Дополнительные инструменты или нажмите F12 или Ctrl/Cmd + Shift + I в зависимости от вашей системы. Перейдите на вкладку "Источники", чтобы изучить файловый менеджер:

Вы можете открывать и редактировать файлы CSS и JavaScript в этом представлении, но все изменения будут потеряны, как только вы обновите страницу.

Шаг 2. Свяжите папку с рабочей областью

Перейдите на вкладку «Файловая система», затем нажмите «+ Добавить папку в рабочую область». Вам будет предложено найти вашу рабочую папку, и Chrome попросит вас подтвердить, что вы разрешаете доступ. Проводник показывает файлы в вашей системе, которые можно открыть одним щелчком мыши:

Обратите внимание, что вы также можете щелкнуть правой кнопкой мыши вкладку файла и выбрать Сохранить как…, чтобы сохранить копию файла в другом месте.

Шаг 4. Просмотрите и отмените изменения

Чтобы просмотреть изменения, щелкните правой кнопкой мыши вкладку файла и выберите «Локальные изменения…» в контекстном меню:

Отображается вид, похожий на разницу.Значок стрелки в левом нижнем углу панели отменит все изменения и вернет файл в исходное состояние.

Инструменты разработчика Chrome никогда не станут полной заменой вашего любимого редактора, но могут быть полезны, когда вы вносите быстрые изменения или работаете с другого компьютера, на котором ваш редактор может не быть установлен.

Веб-страницы доступны только для чтения, но знаете ли вы, что можно редактировать содержимое веб-страницы прямо в веб-браузере. В этом пошаговом руководстве объясняется, как легко редактировать содержимое любой веб-страницы с помощью инструментов разработчика. В этом примере я использовал Google Chrome, но инструменты разработчика доступны во всех браузерах, включая Mozilla Firefox и Safari.

Как редактировать веб-страницы

Вот пошаговое руководство по редактированию текста веб-страницы, даже если этот веб-сайт не принадлежит вам.

Откройте любую веб-страницу в Chrome и выберите текст на веб-странице, который вы хотите изменить.
Щелкните правой кнопкой мыши выделенный текст и выберите "Проверить элемент" в контекстном меню.
Инструменты разработчика откроются в нижней части браузера, и будет выбран соответствующий элемент DOM.
Дважды щелкните выбранный узел, и он переключится в режим редактирования. Теперь измените текст в инструментах разработчика и нажмите за пределами окна инструментов разработчика Chrome, чтобы применить изменения.

Если вы знакомы с HTML-тегами, вы можете использовать ту же технику не только для редактирования текста на веб-страницах, но и для замены изображений, изменения стилей форматирования и т. д.

Техника Chrome Inspect Tool удобна для внесения нескольких быстрых правок, но если вы вносите несколько изменений текста на веб-страницу, есть лучший подход.

Редактировать веб-сайты как вики

Перейдите в меню браузера, выберите "Инструменты", выберите "Инструменты разработчика", а затем выберите "Консоль JavaScript". Если вы используете Safari для Mac, выберите меню «Разработка», а затем выберите «Показать консоль JavaScript». В Firefox выберите Инструменты > Веб-разработчик > Показать веб-консоль.

В окне консоли введите следующий код JavaScript в командной строке и нажмите Enter.

Это сделает всю вашу веб-страницу редактируемой, как вики или документ Word. Теперь вы можете щелкнуть в любом месте веб-страницы и начать печатать.

Обратите внимание, что изменения веб-страницы носят временный характер и теряются при закрытии браузера. Однако этот метод по-прежнему удобен, если вы делаете скриншоты веб-страниц и хотели бы скрыть или заменить какую-то фразу перед захватом изображения.

Читайте также: