Как изменить исходный код страницы на андроид

Браузеры для Android с функцией исследования элемента

Исследование элемента (оно же веб-инспектор) – это полезная функция, которая существует во всех ПК-браузерах и позволяет отлаживать верстку в режиме «Live» без внесения изменений непосредственно в файлы сайта.

Простыми словами – у вас есть сайт, и вы визуально (на своей стороне) можете изменить цвет, например, кнопки или размер шрифта без изменений самого сайта. Помимо этого, вы можете исследовать тот или иной элемент на странице, просмотреть его верстку и ознакомиться с его стилями.

С ПК в принципе все понятно, ведь именно на них идет основная часть всех разработок. Но есть умельцы, кто программирует или создает сайты на смартфонах/планшетах. Казалось бы неким безумием (сами понимаете удобство и возможности смартфонов), но вполне имеет место быть. Признаюсь, я сам на начальном этапе своего обучения пробовал создавать простенькие игры на телефоне с помощью Basic, но сейчас не об этом.

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

HTML/CSS Website Inspector – мощный браузер с веб-инспектором для Android

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

Отличительными особенностями являются:

1. Поиск и редактирование HTML-элементов.
2. Веб-консоль. Позволяет выполнить JavaScript.
3. Просмотр всего исходного кода сайта с возможностью его редактирования.
4. Функция исследования элемента. Позволяет показать код элемента, который выбран на странице.

1. Реклама в приложении.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Помимо этого, хочется отметить, что на момент написания статьи приложение активно развивалось автором и имело более 1 000 000 установок.

Поддержка Android 4.1+. Интерфейс на английском языке.

Web Inspector (Open Source) – браузер с инструментами разработчика для Android

Это приложение, в отличие от первого, немного проще, менее популярнее (всего чуть более 10 000 установок) и обновлялось несколько лет назад.

Несмотря на это, наделено своими интересными функциями, в числе которых:

1. Список сетевых ресурсов (изображения, скрипты, стили и прочее).
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Поиск (исследование) и редактирование отдельных элементов. Дополнение – возможность показать ближайшего родителя.

1. Нет возможности посмотреть весь исходный код страницы.
2. Нет возможности визуально отслеживать CSS-стили элементов.
3. Нет возможности редактировать стили, вынесенные в отдельный файл.

Поддержка Android 4.0+. Интерфейс на английском языке.

Droid Web Inspector – браузер с полным набором инструментов разработчика для Android

Это приложение должно было быть первым в списке ввиду своего богатого функционала, но тогда бы вы не обратили внимание на другие, ничуть не уступающие ему браузеры.

Браузер с консолью разработчика, в функции которой входит:

1. Очистка кэша.
2. Веб-консоль. Отображает список HTTP/S запросов и позволяет выполнить JavaScript.
3. Полный исходный код страницы (HTML) с функцией отслеживания и редактирования стилей элементов.
4. Отображение дерева DOM.
5. Отслеживание JS- и CSS-файлов с возможностью их редактирования.
6. Отображение сетевых ресурсов (изображения, скрипты, стили и прочее).

1. Не идет на старых версиях Android.
2. Отсутствует исследование отдельных элементов. Возможно, баг моего телефона, но все элементы доступны в общем коде HTML.

В отличие от приложения Web Inspector (Open Source), на момент написания статьи имело всего чуть более 5 000 установок, но, несмотря на это, активно развивалось автором.

Поддержка Android 5.0+. Интерфейс на английском языке.

Как посмотреть код страницы на телефоне или как обходиться в работе без ПК

Хозяйке на заметку: Если вы работаете на телефоне или планшете и вам нужно посмотреть код страницы или найти что-то в коде HTML, выполните следующие простые действия:

1. Откройте требуемую страницу в Google Chrome на телефоне или планшете
2. Допишите в начало адреса страницы «view-source:» и нажмите [Enter] (перейти)
3. Выберите в меню (три точки справа) пункт «Найти на странице»
4. Введите нужный текст для поиска

Телефон вместо компьютера

Вообще на эту заметку меня сподвигла статья в Ферре «Почему смартфон так и не заменил компьютер, хотя нам давно это обещали» , которую я прочитал за утренним кофе. Вообще, я во многом не согласен с Денисом Поповкиным, автором статьи. Наверное потому, что телефоны УЖЕ заменили компьютеры. И это легко увидеть. Автор подходит со свой колокольни, со своей проблематикой, но мне она кажется довольно однобокой. Если же в общем говорить о том, чем является «работа на компьютере», то можно выделить следующие пункты:

• Работа на работе (офис, бизнес-задачи)
  • Коммуникации (почта, всякие мессенджеры, Скайпы, совещания и т.п.)
  • Документооборот (документы, таблицы, формы)
  • ERP / CRM (клиенты, задачи, финансы, бизнес-процессы)
  • Специализированный софт (ну тут уже зависит от темы)
• Работа на выезде (командировки, клиентские встречи, презентации, курсы)
  • Коммуникации (почта, мессенджеры)
  • Презентации и демонстрации
  • Документооборот
• Работа дома
  • Коммуникации (мессенджеры, Скайпы и т.п.)
  • e-Commerce (шоппинг)
  • Интернет и развлечения
  • Хобби (например, фотография, видео, кодирование и т.п.)
  • Редко, ведение домашнего хозяйства (финансы, планирование и т.п.)

Вот, пожалуй, и всё.

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

Ну а первые два пункта, думаю, всё зависит от направленности бизнес-задач. Конечно же, фотошоп или какой нибудь CAD на телефоне запустить очень и очень проблематично, если вообще возможно, но все остальные задачи решаются легко, хотя и немного непривычно первое время. Например, я уже не раз и не два отправлялся в командировки на неделю и более вообще без ноутбука, планшет, мышка и хорошая BT-клавиатура (это важно!) вполне заменяют рабочее место.

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

Всевозможные ERP / CRM — опять же, зависит от реализации. У нас в компании худо бедно наша система работает с мобильника (хотя клиенты и жалуются, что не очень удобно. Мы это слышим и что-то даже исправляем). Про всякие 1С молчу, это — харам, мы не пользуемся!

Далее, автор пишет:

Следующий момент — сами приложения. Казалось бы, да — можно напечатать текст даже на смартфоне. Хорошо, но нам ещё нужно подобрать изображения для статьи, обрезать их под нужное соотношение сторон и ширину пикселей, а потом вставить в админку CMS.

Ребята, открою вам страшную тайну: у вас CMS — говно! Нормальные CMS давно и успешно решают любые задачи, связанные с публикацией либо полностью автоматически («обрезать их под нужное соотношение сторон и ширину пикселей»), либо великолепно это делают с любого устройства. Например, эту заметку я пишу хоть и на десктопе (большей частью), но и на телефоне в том числе:

Так что, проблема в конкретной CMS, а не в возможности удобной работы. У Ферры самописка из разряда «Самостряп-303», ну и если разработчики не предусмотрели таких функций — то это проблемы коллектива Ферры.

Специализированный софт — вот это да. Для меня специализированным софтом является прежде всего IDE для написания софта и работы с сайтами (собственно об этом и заметка), и вот здесь не все так гладко. Нет, сама IDE есть на планшете и мобильнике, но из-за особенностей клавиатуры и мышки Android писать софт не совсем удобно. Хотя допускаю, что я просто не настроил клавиатуру должным образом.

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

Например, вот такой нехитрый набор позволяет легко проводить лекции и презентации. В Московском Политехе я вот так недавно отчитал трехмесячный курс. В набор входят:

1. Современный смартфон
2. Доп.аккумулятор с подставой для смартфона
3. HDMI-донгл Miracast для трансляции презентации и экрана на любой проектор или ТВ-панель
4. Кликер для презентации с лазерной указкой
5. Складная клавиатура с тач-панелью
6. Резервный Powerbank на случай длительных занятий (более 4 часов)

Все это весит менее 500 гр. и легко помещается в маленькую сумку или барсетку.

В качестве резюме можно сказать, что ПК, конечно же, полноценно телефон пока не заменяет, но львиную долю задач на смартфоне или планшете вполне можно делать и делать успешно. Важно лишь правильно подобрать софт.

Иван Никитин

Похожие записи

Встречайте PWA! Windows улучшает поддержку Progressive Web Apps

• 03.12.2019

Как удалить ботов в Инстаграм?

• 29.11.2019

Блокировки Telegram и DigitalOcean. Пострадали многие — решение есть!

• 13.11.2019

2 комментария

Milo Lika

Здравствуйте.
Вообще-то это комментарий к Вашей старой статье про вынимание «защищённого» текста.
https://ivannikitin.com/2012/03/09/anti-copy-protection
Если совсем грустно, и текст — картинка, сохраняешь эту картинку. Ужимаешь её до 115х115см в, допустим, MS Picture Manager. Потом нужен Adobe Acrobat Pro. Конвертируешь картинку в PDF и натравливаешь на неё адобовский оптический распознаватель знаков. Проблема в том, что эта процедура ужасно геморройна.
Вот есть сайт https://litnet.com В потрохах его HTML файла слово «Шкаф», например, выглядит так:
Шкаетф
Соответственно, если тупо копировать текст, копируется «Шкаетф».
Значит поэкранно в Фаерфоксе снимаем картинки при помощи «screenshot —fullpage» и распознаем. А экранов в книге, допустим, 100.
Не присоветуете ли что-нибудь?
Спасибо

Иван Никитин

Нет, особо не присоветую. Если описанный метод не работает, то проще найти книгу где-то на просторах Интернета или торрентов….

8 лучших редакторов кода для мобильных устройств

Зачем нужен редактор кода в смартфоне? Это свобода писать код когда и где угодно. Предугадать, когда в голову придет гениальная идея (или понадобится срочно внести исправление в проект), невозможно. Зато вполне можно заранее установить приложение-редактор в смартфоне и в случае необходимости набирать код с большим удобством, чем в блокноте.

Dcoder

Как утверждается на сайте Dcoder, это самая быстрая мобильная IDE. Она доступна в веб-версии, а также в виде приложений для iOS и Android. Поддерживает большое количество языков (больше 35), включая HTML, CSS, JavaScript, C, C++, Python и Java.

В Dcoder есть автоматическое проставление парных скобок и создание отступов, подсветка синтаксиса. Также вы сможете выбрать тему оформления приложения.

Разработчики Dcoder гордятся маленьким весом своего приложения: всего 6MB. Такую легковесность удалось достичь благодаря использованию облачных компиляторов и облачного хранилища для кода. Но тут есть и обратная сторона: чтобы использовать приложение, нужно непременно быть онлайн.

Turbo Editor

Простой, но при этом мощный текстовый редактор для Android. Имеет открытый исходный код (т. е., при желании и должном умении вы сможете его усовершенствовать по своему вкусу). В этом редакторе вы найдете подсветку синтаксиса для HTML, XHTML, CSS, LESS, JavaScript, PHP, Python и многих других языков, а также режим чтения, автосохранение файлов при выходе из приложения, просмотр результатов работы в браузере.

Quoda

Quoda это простой в использовании редактор кода для Android. Как и другие редакторы в нашем списке, Quoda поддерживает много языков, включая C, C++, C#, CSS, HTML, Java, JavaScript, Lua, Markdown, PHP, Python, Ruby. Есть подсветка синтаксиса, расширенная клавиатура, функционал поиска и замены с применением регулярных выражений и учетом регистра.

В платной версии доступны автодополнение кода, интеграция SFTP/FTP(S) и облачных хранилищ, а также предпросмотр страниц в разметке HTML/Markdown (на планшетах).

QuickEdit

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

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

Our Code Editor Free

Как следует из названия, этот редактор бесплатный (но есть показ рекламы). А как указано в описании на Google Play, это целая IDE для Android. Причем она может работать без подключения к интернету. Правда, в таком случае вам не удастся поработать с файлами в облачных хранилищах (а вообще такая возможность есть).

Android Web Developer (AWD)

AWD — это IDE для веб-разработки. Языков и форматов поддерживает не много: PHP, CSS, JS, HTML, JSON. Есть возможность дистанционной работы с проектами (по протоколам FTP, FTPS, SFTP, WebDAV).

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

Android Interactive Development Environment (AIDE)

AIDE — это интегрированная среда разработки для создания Android-приложений прямо на Android-устройствах. Поддерживает Java, C/C++, HTML5, CSS и JavaScript.

В этом приложении вы найдете автодополнение кода, проверку ошибок, подсветку синтаксиса для Java и XML. Есть интеграция с Dropbox. Благодаря совместимости с Eclipse можно открывать Eclipse-проекты. Для профессиональной разработки поддерживается Git.

Отличительная черта этого приложения — интерактивные уроки кодинга с пошаговыми инструкциями (курс программирования на Java, Android-разработки, создания игр).

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

Codeanywhere

IDE для работы на Android-устройствах. Включает в себя редактор кода, FTP-клиент и терминал. Поддерживает огромное количество языков (больше 100). Есть возможность подключения к сторонним сервисам (Dropbox, Google Drive, OneDrive, Amazon S3, Github, Bitbucket).

Если у вас нет собственного сервера, Codeanywhere может запустить для вас Linux-контейнер, в котором будут доступны, к примеру, WordPress, Drupal, Magento.

По мотивам статьи «Top 8 Code Editors for Mobile Application Development».

Как изменить html код страницы в браузере

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

Для изменения исходного кода страницы не обязательно хорошо знать HTML и CSS. Далее вы это сами увидите.

Редактирование html кода в браузере

Мы будем менять данные на сайте. Изменения в коде будут видны только нам. При обновлении страницы они исчезнут.

Откройте в браузере страницу сайта, в которой необходимо изменить код. Это можно

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

В контекстном меню нажимаем Edit as HTML и у нас появится выделенный код.

При такой редакции мы видим сразу результат.

Вверху картинки отмеченное красной рамкой HTML код, находящийся в шапке сайта, стиль которого будем менять.

Внизу красной стрелкой показано style.css:473 и находится в Консоли> Внешний вид>Редактор темы>файл style.css строка 473. Как можно это использовать?

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

Или эти изменения можно внести в Консоли административной панели сайта, используя Редактор темы файлов.

С помощью подмены HTML кода, мы сможем изменить открытую веб-страницу как захотим.
Умение изменить исходный код страницы – дает отличный навык для продвинутого пользователя Интернета.

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

Редактирование CSS во встроенном редакторе

Знаете CSS – можно отредактировать и сделать предварительный просмотр изменений во встроенном редакторе CSS.

Для этого в заходим в Консоль админ панели и при наведении курсора на Внешний вид выпадает меню где нажимаем на Редактировать CSS

Открывается с левой стороны окно для редактирования.

Нажимаем на Дополнительные стили и открывается поле для загрузки кода CSS.

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

После загрузки редактируем код и смотрим результат, если нас все устраивает и мы нажимаем на кнопку Опубликовать. Все изменения в дизайне сайта будут такими же как в предварительном просмотре.

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

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

Также можно Запланировать публикацию произведенных изменений, на будущую дату: День, Месяц, Год и Время выставляем по своему желанию.

Далее мы можем посмотреть полную историю произведенных нами изменений. Это очень удобно в истории отражены изменения данных до и после.

Или мы можем просто отменить изменения. Нажав на пиктограмму корзины.