как править исходный код страницы
Инструмент для удобного редактирования кода прямо в браузере
UPD: Заголовок был изменен с «IDE – зло. Давайте использовать Notepad» на более адекватный.
Иногда кажется, что разработчики некоторых крупных интернет-проектов до сих пор пишут код в Блокноте и думают, что все остальные должны поступать также. Шутка, конечно, но почему в большинстве популярных CMS до сих пор отсутствуют удобные инструменты для редактирования кода, я понять не могу. Как ни стараюсь.
Если вам иногда не хватает подсветки синтаксиса при редактировании кода в браузере — добро пожаловать под кат.
Источник проблемы
История началась в то давнее время, когда мне пришлось сделать пару сайтов на Joomla 1.5. Уже тогда я не мог понять, почему в стандартном редакторе статей на базе TinyMCE отсутствовала подсветка синтаксиса при просмотре исходного кода. В WordPress я столкнулся с той же проблемой. «Хорошо, что мешает вам поставить сторонний плагин, заменяющий стандартный редактор на более мощный и жить спокойно?» — спросите вы. Да, в чем-то вы правы. К примеру, для того же WordPress’а есть более десятка подобных плагинов. Для Joomla и, я думаю, других CMS тоже хватает. Конечно, об их преимуществах и недостатках можно еще долго спорить, но позвольте, неужели в продуктах, которыми пользуются сотни тысяч людей ежедневно, нельзя сделать эту простую функциональность доступной из коробки?
Хорошо, предположим, вопрос с популярными CMS’ками мы закрыли. Скорее всего, путем перебора удастся найти более-менее подходящий плагин, который можно будет использовать во всех будущих проектах. Но тут начинается самое интересное. Если вы работали с мощными темами для WordPress’а, взятыми, к примеру, с ThemeForest, то сразу же поймете о чем я. Как правило, большинство из них предоставляет возможность кастомизации путем добавления пользовательского HTML/CSS/JavaScript кода в разные части сайта. К примеру, вот так:
И если HTML/JavaScript код, как правило, пишется один раз, то CSS частенько приходится редактировать. И что вы прикажете делать в таком случае? Использовать любимую IDE и постоянно переключаться в браузер и обратно чтобы внести необходимые изменения? Можно конечно. Но, согласитесь, это как-то не очень удобно. А еще есть плагины для того же самого WordPress’а, в которых так же можно писать код. И подсветку синтаксиса поддерживают из них лишь единицы. Готов поспорить, что кроме этого найдется еще куча случаев, когда кому-то зачем-то надо отредактировать кусок кода прямо в браузере.
Мое решение
На этой стадии я понял, что хочу, чтобы у меня была возможность удобно работать с кодом в вебе. В любой CMS, в любой теме или плагине. Везде.
Вот примерно так и родилась идея проекта CodeHighlight — расширения для Google Chrome, которое позволяет превращать любое текстовое поле в мини-IDE с подсветкой синтаксиса и проверкой исходного кода на ошибки. За основу была взята JavaScript библиотека Ace, которая умеет делать все необходимое. Осталось написать само расширение, которое смогло бы встраивать Ace в любой редактор текста.
Что получилось
Через пару дней я показал первую версию расширения своим знакомым. Они посоветовали добавить возможность выбора темы для редактора, а также подсказали еще один интересный кейс — подсветку исходников в текстовом документе. Им приходилось периодически просматривать код с raw.github.com. С этой задачей сложности также не возникло. Правда, для работы была взята другая библиотека — highlight.js.
Для начала было решено не делать интеграцию с TinyMCE и другими WYSIWYG редакторами. Однако, по просьбам малочисленных, но активных пользователей, в последнюю версию все-таки была добавлена интеграция с TinyMCE. Кстати, из сообщений пользователей стало понятно, что далеко не все пользуются сторонними плагинами для редактирования постов в Joomla и других CMS.
Будущее проекта
Итак, что мы имеем на сегодняшний день. Есть расширение с огромной аудиторией в 80 человек (да, навыки по раскрутке собственных проектов, как и у большинства программистов, у меня на высоте). Есть подозрение, что кому-то кроме меня оно может быть полезно. Я думаю, у других людей могут быть другие похожие кейсы, которые хорошо было бы решать с помощью подобного расширения.
Пока еще есть энтузиазм развивать проект дальше. Даже не смотря на то, что коммерческой выгоды в нем я пока не вижу. Просто не хочется зарывать в землю инструмент, который может кому-то хотя бы немного облегчить жизнь.
Изменение исходного кода страницы
Сразу хочу пояснить зачем может понадобится изменить исходный код страницы. Естественно, лидирующее место занимает выпендреж. Многие любят “помериться пиписьками”. Или просто подделать переписку или что-то подобное, чтобы посмеяться. Многие видели шутки про агентов поддержки вконтакте, так вот, я научу Вас самостоятельно подделывать такие переписки. Наверное не очень понятно к чему я вообще веду, потому лучше покажу на примере и в скриншотах, чтобы более понятно было.
Примеры измененного и оригинального кода
1. Оригинал страницы:
2. Подделка, созданная через исходный код страницы:
Изменение исходного кода
Путем изменения исходного кода можно подделать все, а если имеются даже минимальные знания в CSS и HTML, то для Вас не будет никаких границ. Можно изменять информацию о переведенных средствах в Webmoney, если оплата происходила через сайт. В общем, если есть фантазия, то сами пораскинете мозгами и решите с чем повеселиться.
Я буду показывать создание шутки с агентом поддержки, а именно с агентом 3-х сотым, так как его шутки наиболее актуальны в сети. Многие из них являются фейками, созданные таким образом, как я сейчас опишу.
1. Заходим на страницу, которую будем изменять. У меня это страница технической поддержки вконтакте:
2. Нажимаем кнопку F12 или наводим мышкой на тот элемент, который будем изменять. В моем случае это аватарка тех. поддержки и его имя. Наводим, нажимаем правой кнопкой по элементу и выбираем “просмотр кода элемента”.Находим поле, которое будем менять, нажимаем правой кнопкой, находим пункт Edit as Html и меняем. Далее смотрите скриншоты:
Тут я изменяю аватарку
Можно увидеть, что аватарка изменилась, она стала синей, а была оранжевая (я менял не цвет, а номер аватарки)
С аватаркой мы закончили, теперь приступим к изменению имени.
Имя изменено, теперь можно изменить и сам текст. Сам процесс изменения не буду показывать, ибо все аналогично, покажу конечный результат.
Особо хитрые люди могут использовать это для своих мошеннических манипуляций. Рассказывать про это не буду, догадаетесь сами, если понадобится
Исследование и редактирование HTML
Исследовать и редактировать HTML-код страницы можно в панели HTML.
Навигация по HTML-коду
Вверху панели HTML находится панель инструментов, состоящая из навигационной цепочки и поля поиска.
Навигационная цепочка для HTML-кода
Она показывает полную иерархию элементов содержащей выбранный элемент ветви документа:
Нажатие и удержание левой кнопки мыши на одном из элементов навигационной панели вызывает меню, позволяющее выбрать какой-либо из соседних элементов. Кнопки со стрелками на левом и правом концах панели цепочки прокручивают цепочку, если она длиннее доступного пространства.
С версии Firefox 34, при наведении указателя мыши на элемент навигационной цепочки соответствующий элемент подсвечивается на странице.
Поле поиска
Щёлкните в поле поиска, чтобы его раскрыть, потом введите, что вы ищете. Вы увидите подсказку с результатами поиска.
Нажмите «Enter». Будет выбран первый элемент этого типа на странице, а повторное нажатие «Enter» найдёт следующий.
Дерево HTML
Остальная часть панели показывает HTML-код страницы в виде дерева. Прямо слева от каждого узла есть стрелочка, нажатие на которую раскрывает узел. Если при нажатии на стрелочку удерживать кнопку Alt, раскрываются и узел, и все его потомки.
Наведение указателя мыши на узел в дереве подсвечивает соответствующий элемент на странице.
Узлы, скрытые с помощью display:none, показываются бледнее (как и совсем не отображаемые узлы, например ).
::before и ::after
Начиная с Firefox 35, можно исследовать псевдо-элементы, добавленные с помощью ::before и ::after :
Контекстное меню элемента
Некоторые частые операции с узлом можно выполнять с помощью контекстного меню. Чтобы открыть это меню, щёлкните правой кнопкой по желаемому элементу:
Меню содержит следующие пункты:
Новое в Firefox 40
Прокручивает веб-страницу, чтобы был виден выбранный узел.
Новое в Firefox 40
(только в меню, открытом для ссылки, например атрибута href) Открывает в новой вкладке то, на что ссылка.
Новое в Firefox 40
(только в меню, открытом для ссылки на код JS) Открывает в отладчике файл, на который ссылка.
Новое в Firefox 40
(только в меню, открытом для ссылки на CSS) Открывает код, на который ссылка, в Редакторе стилей.
Новое в Firefox 40
(только в меню для URL) Скопировать URL.
Редактирование HTML
Вы можете редактировать HTML — теги, атрибуты и содержимое — прямо в панели HTML: сделайте двойной щелчок по тексту, который вы хотите изменить, измените его, нажмите Enter, — и изменения сразу же будут применены.
Чтобы редактировать outerHTML (en-US) элемента, откройте контекстное меню элемента и выберите «Править как HTML». Вы увидите в панели HTML поле для редактирования текста:
Вы можете добавлять здесь любой HTML: изменять тег элемента, редактировать существующие элементы, добавлять новые. Как только вы кликнете вне поля редактирования, изменения будут применены к странице.
Копирование и вставка
Используя контекстное меню, можно копировать узлы в дереве HTML и потом вставлять их.
Перетаскивание
Новое в Firefox 39.
С версии Firefox 39 можно редактировать HTML перетаскиванием узлов в дереве HTML. Просто нажмите и удерживайте кнопку мыши на каком-нибудь элементе, и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку, элемент будет вставлен в соответствующем месте:
Как изменить 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 в котором будем производить изменения копируем и вставляем в вышеуказанное поле.
После загрузки редактируем код и смотрим результат, если нас все устраивает и мы нажимаем на кнопку Опубликовать. Все изменения в дизайне сайта будут такими же как в предварительном просмотре.
При неготовности опубликовать произведенные изменения. Нажимаем на пиктограмму в виде шестеренки. Открывается дополнительное окно
где можем сделать пометку Сохранить. Изменения будут сохранены, и можно будет поделиться. С внесенными изменениями, без публикации. Останется как черновик.
Также можно Запланировать публикацию произведенных изменений, на будущую дату: День, Месяц, Год и Время выставляем по своему желанию.
Далее мы можем посмотреть полную историю произведенных нами изменений. Это очень удобно в истории отражены изменения данных до и после.
Или мы можем просто отменить изменения. Нажав на пиктограмму корзины.
Для чего нужен код страницы в браузере и как его посмотреть
Многих пользователей интересует вопрос, как посмотреть код страницы в браузере. При помощи таких данных можно узнать множество полезной информации. В данной статье рассказывается, как открыть код и на что обратить внимание, при изучении текста.
Как запустить код страницы в браузере
Чтобы приступить к изучению данных, в первую очередь серферу нужно перейти на нужный сайт. В любой области страницы кликните правой кнопкой мыши, вызвав контекстное меню. В списке доступных команд выберите необходимую. Стоит отметить, что вызывать меню необходимо в месте, где отсутствуют ссылки и изображения. Данный метод подходит для всех без исключения браузеров.
Если по какой-либо причине в контекстном меню отсутствует необходимый пункт, то пользователю следует нажать на три полоски справа, запустив параметры обозревателя, выбрав «Дополнительно».
Далее остановитесь на «Дополнительные инструменты», кликните по искомому элементу.
Максимально быстро открыть нужный текст, рассказывающий о сайте, можно комбинацией клавиш «Ctrl+U».
Что скрывает открытая страница
После запуска нужной информации, многие пользователи не понимают, что именно здесь написано. Пронумерованные строки с различными цветными буквами и знаками рассказывают, как именно создавался сайт. Если желаете разобраться, о чем говориться на странице, следует узнать, на какие участки разделен Html код.
Исходный текст включает в себя:
Чтобы приступить к изучению информации, нажмите на текст правой кнопкой мыши, выберите «Исследовать элемент».
Справа откроется дополнительное окно с инструментами разработчика. Здесь пользователи могут узнать, какой именно блок анализируется, увидеть, какие скрипты, шрифты и изображения использовались для создания ресурса.
Как изменить код сайта
Некоторые из серферов желают попробовать изменить данные сайта, используя инструменты разработчика. Чтобы справится с задачей, необходимо знать язык программирования, ведь именно на нем прописывается любой интернет-ресурс.
Для запуска инструмента, откройте меню, выберите «Дополнительно».
Остановитесь на «Дополнительные инструменты», кликните по искомому элементу.
Откроется окно, нажмите на «Elements». В верхней части написано множество знаков. Наведите курсор мыши на один из них, вызовите контекстное меню.
В высвеченном окне выберите «Edit as HTML».
Теперь пользователь может вносить изменения в текст, которые автоматически сохранятся после выхода из режима редактирования.
Чтобы понять, что скрывает в себе код страницы в браузере,нужно обладать определенными знаниями. Начинающему пользователю будет нелегко разобраться в показанных иероглифах и узнать скрытую в них информацию.