Как обновить сайт после редактирования

Почему при изменении css и HTML файла не обновляется сайт?

1. Открываем папку с вашим сайтом
2. Находим нужный нам файл (index).html
3. Кликаем на него 2 раза, либо нажимаем ПКМ и открываем через браузер который вам удобен
4. Сайт открывается, хорошо.

Как редактировать этот сайт, который мы открыли?

1. Открываем папку с вашим сайтом
2. Находим нужный нам файл (index).html
3. Легким движением мыши перетаскиваем его в ваш редактор кода и смотрим тот ли это файл?

Не отображаются изменения в WordPress: вот как исправить проблему?

Изучение

Возникла проблема с изменениями WordPress, которые не отображаются на вашем сайте? Это широко распространённая проблема для пользователей WordPress. Почти во всех случаях проблема возникает из-за проблем с кешированием либо в вашем собственном веб-браузере, либо в кеше вашего сайта WordPress, либо в кеше вашей сети доставки контента (CDN).

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

Сколько времени требуется WordPress, чтобы обновить изменения?

Вообще говоря, ваш сайт WordPress должен обновиться сразу после того, как вы нажмёте кнопку сохранения. То есть вы должны иметь возможность нажать кнопку сохранения, открыть соответствующую страницу и сразу увидеть эти изменения. Что ещё более важно, то же самое должно относиться и к посетителям вашего сайта.

Вот что должно произойти.

Но поскольку вы читаете этот пост, вы, вероятно, поняли, что не всегда всё идёт по плану.

Почему мой сайт WordPress не обновляется?

Как мы упоминали во введении, наиболее частая причина того, что ваш сайт WordPress не обновляется, — это проблемы с кешированием.

Существуют различные типы кеширования, которые могут мешать вам видеть изменения на вашем сайте WordPress:

1. Кэширование браузера- сохраняет определённые статические файлы на локальных компьютерах посетителей в кеше веб-браузера.
2. Кэширование страниц- сохраняет статическую HTML-версию вашего сайта, а не использует PHP для её генерации «на лету» при каждом посещении.
3. А также кэширование CDN- ускоряет глобальную загрузку за счёт кеширования статического контента вашего сайта в сети серверов по всему миру.

Теперь вам не нужно разбираться в механизмах кэширования. Основная проблема в том, что более ранняя версия вашего сайта всё ещё сохраняется в «кеше».

Таким образом, даже если вы обновили версию на своём сервере WordPress, посетители (и вы) могут по-прежнему видеть старую и кэшированную версию вашего сайта, скрывая изменения, которые вы недавно внесли в эфир.

Мы потратим большую часть статьи, показывая вам, как очистить эти различные кеши и «перезагрузить» их самой последней версией вашего сайта. После очистки кеша вы и ваши посетители должны сразу увидеть изменения.

Помимо проблем с кешированием, ещё одна причина, по которой вы можете не видеть изменений на своём сайте WordPress, может быть связана с разрешениями на вашем сайте. Это особенно часто бывает, если вы создаёте динамические сайты, где разные пользователи видят разный контент, например, на сайте членства.

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

Разобравшись с этим, давайте разберёмся, как решить проблему.

Как исправить проблемы с обновлением сайта WordPress

Мы разделим эти шаги по устранению неполадок на четыре основных раздела:

Для первых трёх мы рекомендуем проработать их сверху вниз. То есть начните с очистки кеша браузера, а затем переходите к другим по порядку.

Как исправить проблемы с кешированием браузера

Кеширование браузера работает путём сохранения определённых ресурсов сайта в кеше браузера вашего компьютера. Это позволяет избежать многократной загрузки этих ресурсов прямо с сервера вашего сайта WordPress. Чтобы решить эту проблему, вы можете заставить свой браузер загружать самые свежие версии всех файлов с вашего сервера, а не загружать их из кеша.

Вот несколько способов добиться этого.

Аппаратное обновление вашего веб-браузера

Самое простое решение для устранения проблем с кешированием в браузере на одной странице — это жёстко обновить браузер.

При принудительном обновлении ваш браузер пропускает кэш и загружает все ресурсы веб-сервера.

Для начала откройте вкладку со страницей вашего сайта, где вы ожидаете увидеть изменения. Затем нажмите следующие комбинации клавиатуры:

• CTRL + F5 в Windows
• Cmd + R на Mac

Очистите кеш браузера

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

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

Используйте методы «очистки кеша»

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

Ещё одна немного более продвинутая тактика, позволяющая обойти это и убедиться, что ваши посетители всегда видят последнюю версию, — это использовать тактику «очистки кеша».

Например, предположим, что логотип вашего сайта — logo.png. Если вы обновите свой логотип и загрузите новый файл с таким же именем ( logo.png ), это изменение может не отобразиться сразу, потому что браузеры людей по-прежнему будут загружать исходный файл logo.png из своего кеша.

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

Например, вместо загрузки logo.png и замены старого файла вы можете загрузить logo-v2.png. Поскольку это новое имя файла, вы сможете обойти проблемы с тем, что изменения вашего сайта не отображаются из-за кеширования браузера.

Эта тактика также может быть полезна для скриптов, таких как таблицы стилей CSS. Поэтому, если ваши изменения CSS не отображаются в WordPress, это одна из тактик, которая может исправить это.

Другая тактика очистки кеша включает изменение пути к файлу или добавление строк запроса в дополнение к изменению имени файла. Несколько примеров:

• Оригинал : yoursite.com/style.css
• Имя файла — yoursite.com/stylev2.css
• Путь к файлу — yoursite.com/v2/style.css
• Строки запроса — yoursite.com/style.css?ver=2

Как исправить проблемы с кешированием WordPress

Хотя существуют разные типы кеширования WordPress, наиболее вероятной причиной является кеширование страниц.

Обычно ваш сервер «строит» готовый HTML-код вашего сайта с нуля для каждого посещения с использованием PHP. Затем ваш сервер отправляет готовый HTML-код браузеру посетителя для отображения вашей веб-страницы.

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

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

Многие решения для кеширования также не позволяют администраторам WordPress просматривать кешированный контент. Вот почему вы можете столкнуться с проблемой, когда изменения WordPress не отображаются при выходе из системы. Другими словами, когда вы вошли в свою учетную запись администратора, вы не видите кэшированного содержимого, а это означает, что вы можете сразу увидеть изменения. Но когда вы выходите из системы, вы видите старую кешированную версию (как и все посетители вашего сайта).

Исправление здесь — очистить кеш вашего сайта вручную.

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

Способ очистки кеша WordPress зависит от того, какое решение для кеширования вы используете. Мы покажем вам два решения:

1. Очистка кеша, если вы размещаете на Kinsta.
2. Очистка кеша в некоторых популярных плагинах кеширования.

Как очистить кеш для клиентов Kinsta

Kinsta реализует кеширование страниц для вас, поэтому вам не нужно использовать плагин кеширования WordPress. Есть два способа очистить кеш вашего сайта в Kinsta.

Во-первых, вы можете сделать это из панели управления вашего сайта WordPress через вкладку Kinsta Cache на левой боковой панели и кнопку Очистить кеш:

Во-вторых, вы также можете очистить кеш своего сайта через панель управления MyKinsta. Откройте свой сайт в MyKinsta. Затем перейдите на вкладку Инструменты и нажмите кнопку Очистить кеш под Кешем сайта:

Как очистить кеш в плагинах

Если вы не размещаете на Kinsta, возможно, вы используете плагин кеширования WordPress для обработки кеширования страниц.

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

Мы не можем показать вам, как это работает во всех плагинах кеширования, но мы покажем вам некоторые из самых популярных плагинов. Большинство плагинов кеширования ведут себя аналогичным образом, поэтому вы можете использовать ту же идею в других плагинах.

WP супер кэш

Вы можете выбрать опцию Удалить кеш на панели инструментов WordPress или в настройках плагина:

WP Самый быстрый кеш

Чтобы удалить весь кеш, вы можете нажать кнопку «Удалить кеш» на панели инструментов WordPress.

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

1. Откройте список постов / страниц / произвольных типов постов.
2. Наведите указатель мыши на часть содержимого, в которой не отображаются изменения.
3. Щёлкните ссылку Очистить кеш.

WP Rocket

Чтобы очистить кеш всего сайта, наведите указатель мыши на опцию WP Rocket на панели инструментов WordPress и выберите Очистить кеш:

Чтобы очистить отдельный фрагмент содержимого, наведите на него курсор в списке содержимого и нажмите Очистить этот кеш:

Как исправить проблемы с кешированием CDN

Если вы используете сеть доставки контента (CDN) для ускорения глобальной загрузки вашего сайта WordPress, это может быть ещё одной причиной, по которой изменения вашего сайта WordPress не отображаются.

CDN работает, кэшируя статический контент вашего сайта в своей сети серверов по всему миру. Затем он обслуживает эти файлы из ближайшего к каждому посетителю местоположения.

Однако, если ваш CDN кэшировал старую версию файла изображения или таблицы стилей CSS, это может привести к тому, что изменения WordPress не отображаются. Маловероятно, что это произойдёт с вашим контентом, но это может быть обычная проблема со статическими файлами, которые вы можете размещать в CDN, такими как изображения и скрипты.

Как и в случае с другими проблемами кеширования, вы можете исправить это, очистив кеш в вашем CDN. Конкретные шаги для этого будут зависеть от вашего CDN. Ниже мы покажем вам, как это сделать в Kinsta.

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

Как очистить кеш Kinsta CDN

Kinsta включает в себя встроенный CDN без дополнительных затрат. Вы можете очистить кеш своего CDN с панели управления MyKinsta.

В MyKinsta откройте область панели инструментов для сайта WordPress, на котором у вас возникли проблемы. Затем перейдите на вкладку Kinsta CDN и нажмите кнопку Очистить кеш CDN:

Как исправить проблему с ролями / возможностями пользователей

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

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

Это может стать ещё более сложным, если у вас есть членский сайт с несколькими разными уровнями членства.

Чтобы исправить это, убедитесь, что вы вошли в учётную запись WordPress с соответствующими разрешениями для просмотра рассматриваемого контента (или что вы не вошли в учётную запись в некоторых ситуациях).

Чтобы упростить отладку этих проблем и быстро переключаться между разными учётными записями WordPress, вы можете использовать бесплатный плагин User Switching.

Заключение

В большинстве случаев проблемы, связанные с изменениями WordPress, которые не отображаются на вашем сайте, связаны с проблемами кеширования (кеширование браузера, кеширование страниц или кеширование CDN).

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

В некоторых случаях у вас также могут возникнуть проблемы с невозможностью увидеть изменения, потому что у вас нет разрешения на просмотр этого контента. Это вряд ли произойдёт на простом блоге или сайте портфолио, но это может произойти на сайтах членства или других сайтах с ограниченным содержанием. Убедитесь, что вы используете учётную запись с соответствующими правами, чтобы исключить эту проблему.

расширение для сохранения кода элемента

Как сделать так, чтобы изменения в Инструментах разработчика браузера сохранялись после перезагрузки страницы

Инструменты разработчика веб браузеров — это мощнейший инструмент для отладки работы веб сайтов. Если вы ещё не знакомы с ним, то обратитесь к статье «Статический анализ исходного кода веб-сайта в браузере».

Используя Инструменты разработчика возможно выполнить любые изменения 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, потестирую их?

Как обновить сайт, не потеряв позиции в поисковиках и не запутав пользователей

Переезд или редизайн работающего популярного сайта — всегда риск для SEO. Мы в агентстве Atman выработали список правил, на что обратить внимание, чтобы обновить сайт и не потерять позиции в поисковиках. О них расскажем в этой статье.

Допустим, в цветочном магазине решили обновить сайт, который работает с 2012 года. С сайта приходят заказы, но интерфейс и дизайн устарели. Предприниматель уверен: новый сайт будет удобнее, и заказов станет больше. На старом сайте с SEO всё в порядке: например, страница с хризантемами находится в топ-10 выдачи Яндекса по запросу «купить хризантемы в Москве». В Яндексе такой запрос набирают больше тысячи раз в месяц.

Во время обновления на сайте решили переделать навигацию и добавить категории товаров. Из-за этого страница с хризантемами поменяла URL-адрес: переехала с shop.ru/chrizantema на shop.ru/flowers/chrizantema. Пользователи, зашедшие на старую страницу из поисковиков, стали получать ошибку 404. Поисковые системы заметят это и начнут обратный отсчет: если проблему с 404 не устранить, через пару недель страница пропадает из поисковой выдачи. Магазин потеряет трафик и продажи с сайта упадут.

SEO — это длительный процесс. Чтобы попасть на первые строчки выдачи по значимым запросам, потребуется несколько месяцев. Поблажек не бывает: если вы потеряете место, придётся пройти путь заново. Пока новая страница с хризантемами карабкается на верхние строчки в Яндексе и Google, эти цветы заказывают меньше, и магазин недополучает деньги. Получается, обновление сайта без оглядки на SEO может принести бизнесу убытки.

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

Зафиксировать текущие метрики сайта. Чтобы отследить, как обновление повлияло на посещаемость сайта, надо понимать отправную точку. К тому же, собрав статистику из Яндекс.Метрики или Google Analytics, вы сразу увидите, к каким страницам надо относиться с наибольшей осторожностью. Например, владельцы цветочного магазина из нашего примера сразу бы заметили, что на страницу с хризантемами идёт трафик из поисковиков: значит, нельзя допускать, чтобы вместо неё вылезала ошибка.

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

• посещаемость сайта;
• посещаемость наиболее популярных страниц;
• какие позиции в поисковой выдаче занимает сайт по важным запросам в Яндекс и Google.

Один из клиентов нашего агентства ATMAN — медицинская организация АНО «НОМИ». Они хотели обновить дизайн и структуру своего сайта, который уже был популярен среди профильной аудитории. Онкологи и гематологи заходили на сайт, чтобы читать научные статьи и смотреть записи лекций.

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

Запретить индексацию нового сайта на время разработки. Обычно во время разработки новый сайт размещают на тестовом домене. Чтобы поисковики не подумали, что появился какой-то новый сайт, который дублирует существующий, важно запретить им выводить тестовый сайт в поиске. Для этого нужно зайти в файл robots.txt и прописать, что все страницы запрещены для индексации или воспользоваться плагином для CMS вашего сайта. Тогда роботы поисковых систем поймут, что сайт пока не должен попадать в выдачу.

Перед обновлением зафиксируйте метрики посещаемости. Для тестового домена нового сайта настройте robots.txt или соответствующий плагин в CMS: поисковики не должны индексировать тестовый сайт во время разработки.

Добавить мета-информацию и фавикон. Во время разработки на каждую страницу нового сайта нужно добавить мета-заголовки, мета-описание и изображение для предпоказа. Заголовки и описания — это информация, которую пользователи видят на странице выдачи в поисковой системе. Изображение для предпоказа — это картинка для социальных сетей, она подгружается, когда вы вставляете ссылку на сайт в пост или сообщение. Мы рекомендуем использовать картинку размером 968 на 507 пикселей: она подходит для разных соцсетей.

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

В ATMAN обновили сайт языкового детского лагеря Inkeri. Предыдущий был сделан своими руками и перестал отвечать современным требованиям по дизайну и удобству.

Чтобы не потерять трафик из поисковых систем, мы составили список всех страниц старого сайта вместе с мета-текстами и УРЛ. После этого мы адаптировали тексты под новые страницы, а список УРЛ передали разработчикам для настройки редирректов.

Провести тест пользовательских функций и вёрстки. Чтобы убедиться, что во время обновления мы не ухудшим функциональность сайта для посетителей, нужно провести тесты. Для этого мы составляем список пользовательских функций и проверяем, чтобы их можно было реализовать в новой версии. Проверяем все кнопки, навигацию и вёрстку на экранах разного размера. Тесты нужны, чтобы убедиться, что сайт соответствует ожиданиям пользователей: всё, что они привыкли делать на старом сайте, работает и на новом.

Сгенерировать карту сайта. Если у сайта много страниц, необходимо подготовить его карту — файл sitemap.xml — и передать поисковикам. С этим файлом системы быстрее проиндексируют все страницы, и сайт раньше появится в поисковой выдаче. Для небольшого сайта карту можно сделать вручную, для крупного нужны инструменты для автоматизации. Для популярных CMS-систем есть плагины, например, Google XML Sitemaps для WordPress.

Настроить редиректы. Во время обновления важно соотнести структуру прошлого с сайта со структурой нового. Если появились изменения, придётся настроить редиректы — перенаправлять людей на новые страницы, если они обращаются к старым адресам.

Иногда во время обновления решают удалить или скрыть какие-то страницы. Тогда редиректы нужно настроить по смыслу. Допустим, после обновления исчезнет статья из блога. Если пользователь решит снова обратиться к ней по старому адресу, он должен увидеть что-то близкое по смыслу, иначе он растеряется. Например, можно настроить редирект на профиль автора статьи или на похожий материал. Если редирект не получается сделать осмысленным, направьте пользователя на главную: это тоже плохо, но это лучше, чем ошибка 404.

Добавить на сайт системы аналитики. На новом сайте обязательно нужно поставить как минимум те же счётчики, что стояли на прошлом. Это позволит сравнить статистику посещаемости до и после обновления и заметить проблемы. Если к старому сайту была подключена Яндекс.Метрика, а с нового данные идут только в Google Analytics, анализировать будет сложнее.

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

Во время обновления убедитесь, что настроили редиректы для страниц, которые будут удалены или поменяют URL-адрес. Не забудьте добавить мета-информацию, создать карту сайта и передать её поисковикам. Протестируйте вёрстку и сохранность пользовательских функций. Оповестите зарегистрированных пользователей о переносе и постарайтесь провести его во время наименьшей активности на сайте.

Оповестить пользователей. Если на сайте есть зарегистрированные пользователи, их нужно предупредить об обновлении. Если сайт переносится, и у вас нет доступа к паролям пользователей, им придётся заново пройти регистрацию. Достаточно отправить письмо с ссылкой на новый сайт и просьбой зарегистрироваться повторно.

Рассказать поисковикам о переносе. Если из-за обновления у сайта поменялся доменный адрес, об этом важно сообщить в «Яндекс.Вебмастер» и Google Search Console. Так поисковики будут в курсе, что сайт переехал, и новый домен будет восприниматься не как отдельный сайт, а как продолжение старого.

В Вебмастере зайдите на страницу «Индексирование», выберите «Переезд сайта», введите новый адрес и нажмите «Сохранить». Внесение изменений может занять несколько недель, поэтому подпишитесь на обновления от «Вебмастера», чтобы не пропустить новости.

В Google Search Console воспользуйтесь инструментом «Изменение адреса». Перед тем, как Google учтёт изменения, он запустит несколько проверок. Подождите, пока тесты завершатся и, если Google выявит проблемы, решите их и попробуйте снова. Когда проверки закончатся, в Search Console появится уведомление о том, что изменения приняты.

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

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

После обновления соберите данные по посещаемости и сравните со статистикой до переезда. Увидите расхождения в топе посещаемых страниц — ищите проблему. Если у сайта менялся домен, не забудьте сообщить об этом в Яндекс.Вебмастер и Google Search Console. Проверьте, что в социальные сети подгружается новый сниппет — картинка и метаданные.

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