Как сделать так, чтобы изменения в Инструментах разработчика браузера сохранялись после перезагрузки страницы
Инструменты разработчика веб браузеров — это мощнейший инструмент для отладки работы веб сайтов. Если вы ещё не знакомы с ним, то обратитесь к статье «Статический анализ исходного кода веб-сайта в браузере».
Используя Инструменты разработчика возможно выполнить любые изменения HTML разметки, стилей и JavaScript кода «на лету», наблюдая за изменения в реальном времени.
Сделанные изменения пропадают сразу после перезагрузки страницы. Если вам нужно, чтобы изменения кода, сделанные в Инструментах разработчика браузеров, сохранялись после перезагрузки страницы, то данная статья расскажем вам, как это сделать на примере Google Chrome (Chromium).
Откройте Инструменты разработчика (клавиша F12) и перейдите во вкладку «Sources», там найдите раздел «Overrides»:
Кликните на «Select folder for overrides», выберите папку, куда будут сохраняться файлы для перезаписи файлов сайтов. На запрос о правах доступа, нажмите кнопку «Разрешить»:
Поставьте галочку «Enable Local Overrides». Если вы не видите этот флажок, то перезапустите веб-браузер и вернитесь на эту влкадку Инструментов веб-разработчика.
После этого в «Sources» → «Page» в контекстном меню для любой страницы будет доступно «Save for overrides»:
Теперь все файлы, для которых вы выбрали «Save for overrides» будут сохранены на жёсткий диск. Вы можете делать любые изменения в них и они также будут сохранены на постоянной основе. И при повторном открытии сайтов вместо оригинальных файлов будут использованы сохранённые вами версии.
На вкладке «Sources» → «Overrides» вы увидите список всех сохранённых файлов для всех сайтов:
Как отменить Overrides (локальные переопределения)
На вкладке «Sources» → «Overrides» выберите файл, который вы не хотите использовать, чтобы вновь задействовалась оригинальная копия с сайта, нажмите на него правой кнопкой мыши и выберите «Delete»:
Как при открытии сайта не использовать определённые файлы скриптов или стилей
Если вы хотите, чтобы при входе на сайт не задействовался один или более файлов, то добавьте этот файл в Overrides и полностью удалите его содержимое — то есть будет применяться пустой файл, что фактически означает его удаление.
Как добавить скрипт или стили при открытии сайта
Вы можете добавить код или стили в уже существующие файлы с помощью Overrides. Либо обратите внимание на вкладку «Sources» → «Snippets». Если вы не видите пункт Snippets, то нажмите на кнопку » чтобы развернуть полный список пунктов.
Как сохранить html страницу после редактирования Developer tool chrome?
Когда я пытаюсь сохранить страницу из браузера при помощи ctrl+s получается следущее:
ctrl+s и есть два выбора, при сохранении «только HTML» ничего не сохраняется
А при сохранении полной страницы, добавляется в код к ссылкам непонятная фигня
Как правильно сохранить измененный код
Простой 1 комментарий
Это было бы идеально. Пробывал, не работает!
То что ты редактируешь на вкладке element не сохранится.
Если вы говорите, про обычный редактор кода во вкладке Sources то все верно! Но к вопросу не имеет ни какого отношения. Как и livestyle.io который сохраняет только CSS.
Я написал все очень доходчиво и со скринами. Там на фото все показано. Только измененный код в Element.
Пока что единственный выход это копировать прямо оттуда через Edit as HTML на тег html (или ctrl+c можно еще) код и вставлять его в IDE. Но это долго.
Алекс Глебов, Да ненужен мне CSS. Чистый HTML надо с атрибутами и текстом. Есть много решений для css а для сохранений html не вижу не одного.
Вопрос называется Как сохранить html страницу после редактирования, а не как сохранить CSS
Сохранение измененного DOM / HTML после его редактирования с помощью Firebug
9 ответов
Как сохранить отредактированное дерево DOM (представленное как HTML)?
Firebug не содержит методов, которые можно использовать для сохранения текущей модели DOM в файл. Однако вы можете использовать Firebug вместе с расширением Web Developer для сохранения DOM в файл (представленный как HTML).
Firebug не содержит никакого метода для перечитывания ранее сохраненного дерева DOM в «текущий контекст» страницы. Однако, если мы будем использовать Firebug вместе с расширением Web Developer, мы сможем достичь запрошенной функциональности. Просто откройте ранее сохраненный HTML-код в редакторе, таком как Блокнот, и скопируйте HTML-код в буфер обмена. Затем выберите Web Developer > Miscellaneous > Edit HTML и вставьте HTML. Готово!
Я не уверен, что вы имеете в виду под «исходным контекстом», но вы можете попробовать добавить следующее в заголовок сохраненного HTML.
Когда вы находитесь в разделе HTML в firebug, на панели чуть ниже основной панели инструментов firebug есть кнопка «Изменить». Нажав на эту кнопку, вы увидите HTML-код в виде обычного текста (с любыми внесенными вами изменениями), который вы можете скопировать в текстовый редактор.
Щелкните тег HTML, щелкните Изменить. Скопируйте и вставьте в другой текстовый файл.
Вы не можете «перезагрузить» HTML, обработанный firebug. Однако вы можете скопировать обработанный HTML-код после того, как будете довольны своими результатами (или недовольны). Либо сохраните его в своем буфере обмена, чтобы скопировать в текстовый файл, а затем, когда вы захотите использовать его снова, вам нужно будет скопировать его обратно в консоль редактирования firebug.
Попробуйте cssUpdater, он состоит из надстройки FireFox, которая прослушивает изменения CSS FireBug через сокет-сервер и позволяет синхронизировать исходные файлы css. Вам также необходимо установить приложение Desktop.
Итак, рабочий процесс будет таким:
Вы можете протестировать и использовать его здесь, http://www.cssupdater.com
Вы можете попробовать выбрать веб-страницу (щелкните правой кнопкой мыши, выберите все во всплывающем меню), а затем выберите «Просмотреть источник выбора». Это должно показать вам измененный HTML в исходном окне, который вы затем можете скопировать и сохранить в редакторе. Firebug может добавить некоторые дополнительные элементы, которые вы сможете удалить в текстовом редакторе.
Вы можете настроить внешний редактор. Откройте firebug, слева у вас есть значок firebug, нажмите его, нажмите «Открыть» в редакторе, а затем настройте редакторы. Работает с Gedit и Bluefish.
Чтобы настроить gedit: откройте редактор конфигурации FireBug и нажмите «Добавить», назовите его gedit, а затем найдите исполняемый файл в «usr / bin» и выберите или введите gedit. Вы можете протестировать конфигурацию перед сохранением.
25 полезных Chrome-расширений для веб-разработчиков Статьи редакции
Ресурс Creative Bloq выбрал 25 расширений для браузера Google Chrome, которые, по мнению редакции, могли бы пригодиться в работе веб-разработчика.
iMacros — расширение, которое помогает в тестировании веб-страниц. Вместо того, чтобы самостоятельно проделывать одни и те же действия на странице, разработчику нужно лишь записать требуемую последовательность действий в iMacros и запускать расширение тогда, когда это необходимо.
Расширение способно работать с сайтами, реализованными при помощи технологий Java, Flash, Flex, Ajax и Silverlight.
Расширение для тех, кто любит «поиграть со шрифтами» — позволяет экспериментировать со всем спектром шрифтов из библиотеки Google Fonts, не внося изменений в код страницы. Можно менять не только сам шрифт, но и его размер, стиль написания и так далее.
Пригодится, по словам автора материала, для того, чтобы проверить, как выглядит шрифт, перед тем, как вносить фактические изменения в код страницы.
Расширение для Google Chrome, которое позволяет выделять и копировать текст даже с картинок — будет полезным, по мнению Cretive Bloq, всем, кому хоть раз в своей работе приходилось иметь дело со встроенным текстом.
Расширение, которое позволяет мгновенно определить, какой шрифт использован на той или иной странице, не производя почти никаких дополнительных действий — наведя курсор мыши на надпись.
YSlow — инструмент, который не только проверяет скорость загрузки той или иной веб-страницы, но и подсказывает разработчику, что её тормозит. Для этого расширение проверяет сайт на соответствие 23 из 34 правил производительности, сформулированных командой компании Yahoo.
Целый набор полезных инструментов для управления элементами сайта — например, для анализа веб-ресурсов и макетов, тестирования кода и мгновенного изменения параметров и внешнего вида страницы.
Расширение для автоматической проверки, удовлетворяет ли сайт основным принципам SEO, достаточно ли он производителен и удобен для пользователя. Результаты проверки представляются в виде своеобразного чек-листа — можно посмотреть более подробную информацию и рекомендации по каждому из невыполненных пунктов, а также моментально исправить ошибки.
Позволяет в автоматическом режиме сохранять любые изменения, внесённые в код страницы при помощи инструментов Chrome DevTools. Как отмечает автор материала, инструмент помогает разработчикам сэкономить большое количество времени.
Расширение, при помощи которого можно «превратить» любую страницу в структурную схему компоновки материала — wireframe. Позволяет разработчикам и веб-дизайнерам не выходя из браузера ознакомиться с компоновкой любой страницы в сети.
Ripple Emulator — расширение-эмулятор для Google Chrome, которое позволяет тестировать веб-сайты на различных мобильных платформах с различными разрешениями экрана. Может быть использовано в сочетании с другими расширениями для тестирования и отладки ресурсов.
Streak — расширение, которое позволяет превратить почтовый ящик на Gmail в CRM-систему. Можно отслеживать статус сделок и переговоров, которые ведутся в электронной почте с контрагентами, использовать Streak для обработки запросов пользователей продукта и отслеживания исправлений присланных ошибок и так далее.
Расширение для быстрого поиска по популярному ресурсу для разработчиков Stack Overflow.
Позволяет получить мгновенный доступ к документации по PHP 5.5 из браузера.
PerfectPixel — расширение для Google Chrome. Оно позволяет «наложить» на веб-страницу полупрозрачную сетку и сверять по ней заданные расстояния.
Можно накладывать и другие изображения — например, первоначальный макет — чтобы убедиться, что получившаяся страница в точности ему соответствует:
Инструмент для просмотра исходного кода страниц и редактирования CSS-кода.
Можно менять тени, окружности бокса и так далее с помощью перетаскивания ползунка. После внесения изменений можно скопировать получившийся код и заменить его в коде сайта.
Расширение для браузера, которое определяет, какие JavaScript-библиотеки, фреймворк или CMS используются на ресурсе.
User-Agent Switcher — это расширение, которое позволяет «маскировать» браузер Google Chrome под Internet Explorer, Opera или любой другой браузер.
Встроенный эмулятор Internet Explorer для Chrome.
Простой и бесплатный онлайн-редактор изображений. Позволяет «захватывать» изображения или делать скриншоты браузера — и сразу же редактировать их при помощи расширения для Chrome.
Расширение, которое помогает адаптировать веб-сервисы для тех пользователей, которые страдают дальтонизмом — демонстрируя разработчику, как сайт видят те, кто страдает этим заболеванием. Позволяет веб-дизайнерам и разработчикам создавать более доступные сервисы.
Простой инструмент, который помогает определить высоту, ширину и положение любого элемента на странице.
Расширение, которое проверяет веб-страницу на наличие «битых» или неправильных ссылок.
Расширение, которое помогает не столько в разработке, сколько в поиске вдохновения и хороших фотографий. Показывает на каждой новой вкладке в Google Chrome одно изображение с сервиса Flickr. При нажатии на него пользователь переходит на страницу автора, где может ознакомиться с другими его работами.
Расширение для браузера, похожее на предыдущий плагин в этом списке — только вместо фотографий из Flickr в новой вкладке пользователь видит признанные произведения искусства — например, полотна кисти Ван Гога или Мане.
Официальное расширение от Google для сжатия трафика, которое включает экономию трафика в браузере Google Chrome.
На замену 23 или 24 пункту можно было поставить Momentum.
Зачем iMacros, когда есть Selenium?
PhantomJS же ещё удобнее. Зачем открывать браузер, когда можно не открывать)
А потом еще один пост про то как хром тормозит
Font Playground безнадежно у меня глючит. Кликаешь один шрифт, а выдает другой. Почему то Open Sans отображается явно как Serif:(
А никто не знает плагин, чтобы быстро картинки-иконки скачивать, которые зашиты в css?
Очень популярные и полезные расширения:
Поставил себе все, теперь смотрю картинки, а расширения работают за меня.
В подборке не хватает расширения от Similarweb!
Для тех, кто часто подбирает ключевые слова в вордстате http://semantica.in/tools/yandex-wordstat-assistant
Пипетка для снятия цвета с любого элемента
https://goo.gl/xdYHW
Расширение для тех, кому нужно быстро и оперативно получать информацию из сообществ вконтакте. Оно ищет новые посты в ваших сообществах и выводит их в виде уведомлений и пишет в ленту.
https://chrome.google.com/webstore/detail/groupsfeed/headefnefjnknjhghaondobjmghlbelc?hl=ru
Моне, пожалуйста. Спасибо.
Чем вам не угодил Мане?
тем, что, наверное, он не настолько именит, чтобы ожидать его имя в одном ряду с Ван Гогом.
О Мане только что узнал из-за вашего коммента.
Но, справедливости ради, надо сказать, что в оригинале именно Моне (Monet).
Не согласна с вами насчёт именитости. Кто-то и Ван Гога знает только из-за отрезанного уха, а не его работ. Говорить об импрессионизме и не упоминать Мане — как-то странно.
Расширение для быстрой и удобной работы с Я.Метрикой
История буфера обмена. Удобно для копирования и вставки сниппетов
К IT я не имею отношения, уже более 15 лет тружусь в сфере недвижимости. Правда, когда-то давным-давно был опыт работы с PHP еще 4-й версии без ООП и немного с C++. Но, несмотря на это, меня периодически посещала мысль написать свое мобильное приложение. Это была моя голубая мечта.
Колонка от создателя Телеграм ботов с аудиторией в 70 000 000 пользователей о том, куда катится сейчас, как катился до и зачем прикатился сюда Телеграм. Почему Телеграм становится больной шуткой в англоязычных коммьюнити, и как команда Телеграма, простите, «просрала» все полимеры.
Это первая моя статья, прошу не судить строго.
Что такое «треугольник доброты», чему пандемия научила стратегов и зачем думать о потребителе, когда вокруг хаос? Колонка Марины Востриковой, руководителя направления клиентской поддержки «Битрикс24»
В эту пятницу мы не публикуем традиционный новостной дайджест. Повод серьёзный: у Сбера день рождения! Вместо обычных новостей мы решили опубликовать праздничные. И конечно же, подарить вам подарки. Итак, вот что мы и наши друзья подготовили к юбилею Сбера.
В этой статье мы рассмотрим способы доработки модуля разбиения текста на предложения «Razdel».
Это моя первая статья в Приёмной портала VC, и цель её — как можно сильнее привлечь внимание общественности к откровенному беспределу банка Тинькофф, который злоупотребляет 115-ФЗ, Положением Банка России от 15 октября 2015 г. № 499-П и дополняет требования Закона собственными запросами, не имеющими целесообразности. Но по отношению к кому?
Другая реальность, наступившая в марте 2020 года, научила нас жить и работать по-новому. Сотрудники контакт-центров одними из первых почувствовали изменения. Именно им пришлось объяснять авиапассажирам, почему отменилась поездка, на их плечи свалилась львиная доля непривычных запросов, в том числе пришлось отрабатывать обращения по резко…
Мы изучили, с какими трудностями сталкиваются компании, которые хотят развивать собственные контакт-центры, — о трех самых характерных явлениях читайте ниже. А тех, кому эта тема близка и интересна, ждем 16 ноября на бесплатном вебинаре, где вы узнаете, как запустить полноценный контакт-центр за одну рабочую неделю.
Расширение для сохранения кода элемента
Какие еще инструменты есть для этой задачи, кроме FoxReplace и GreaseMonkey?
Отредактировано alarm23 (12-12-2015 16:38:53)
№2 12-12-2015 16:52:14
Re: Расширение для замены участков html кода страницы
Скрипт Lex1 для GM Вызов: alt+shift+X (или B) разные способы вырезания.
№3 12-12-2015 17:35:25
Re: Расширение для замены участков html кода страницы
Включил GM. Попробовал запустить скрипт, но никакой реакции.
Куда нужно вставить данный код скрипта, чтобы его запустить?
№4 12-12-2015 22:11:40
Re: Расширение для замены участков html кода страницы
№5 12-12-2015 23:25:31
Re: Расширение для замены участков html кода страницы
Речь о внешнем виде сайта? Тогда просто userContent.css, без всяких расширений.
№6 12-12-2015 23:57:07
Re: Расширение для замены участков html кода страницы
Тогда просто userContent.css, без всяких расширений.
№7 13-12-2015 07:04:50
Re: Расширение для замены участков html кода страницы
Ты мне не хами.
Поди разобрался. Только не по Вашей инструкции, которая не работает. Пришлось самому загрузить этот скрипт в библиотеку, а оттуда уже скачать. По другому установщик скрипта не запускается.
№8 13-12-2015 08:25:11
Re: Расширение для замены участков html кода страницы
Разобрался со скриптом. Скрипт действительно рабочий, но, к сожалению, поставленной задачи не выполняет.
Еще раз повторю суть задачи. Она донельзя простая.
1. Есть веб-страница стороннего (не нашего) сайта.
2. Мы правим HTML код этой страницы с помощью firebug. Но эти правки, естественно, сбрасываются при обновлении страницы, так как идет новый запрос к серверу, где эти правки не учтены.
3. Нужно, чтобы при обновлении этой страницы визуально (т.е. на стороне клиента, а не сервера, ибо доступа к нему нет) сохранялись те правки, которые мы внесли на п.2.
Частично с этой задачей справляется аддон FoxReplace. Однако, он заменяет лишь отдельные элементы текста, но весь ХТМЛ код страницы подменить не получается. Хотя в настройках данного аддона специально включал опцию замены ХТМЛ.
Если таких решений нет в природе, то в принципе готов заказать оное за деньги. Но пока что хотелось бы найти нужное решение среди существующих. Кто-нибудь знает аналоги FoxReplace, потестирую их?
Отредактировано alarm23 (13-12-2015 08:39:22)
№9 13-12-2015 14:27:18
Re: Расширение для замены участков html кода страницы
Через сомнения приходим к истине. Цицерон