Просмотров: 14

jsFiddle. Редактор кода «в облаках». Как тестировать веб-страницы онлайн?

У меня появилась задача: нужно иметь возможность тестировать HTML, CSS или Javascript код онлайн, прямо в браузере. Важно, чтобы этот код могли посмотреть и в случае необходимости подкорректировать другие люди.

Нужен, своего рода, редактор кода «в облаках».

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

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

jsfiddle

Вот ссылка на официальный сайт:

http://jsfiddle.net/

Давайте посмотрим, что и как можно с его помощью делать:

1. Самое главное – можно добавлять и редактировать HTML, CSS, Javascript-код и просматривать результат его отображения в браузере.

jsfiddle

4 окна. Вводим соответствующий код в любое из них и получаем то, как будет работать страница в браузере в окне “Result”.

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

05-03-2013 6-46-40

2. Подключение сторонних библиотек javascript (Jquery, Prototype и др.)

05-03-2013 6-48-10

3. Тестировать отображение на мобильных устройствах.

05-03-2013 6-49-40

4. Создавать архив из тестируемых веб-страниц и делиться ими в соц. сетях и на своем сайте.

Вот как может выглядеть вставленный код:

Либо, можно давать ссылку сразу в редактор в нужных местах веб-страницы. Это может выглядеть так:

http://jsfiddle.net/dimachen/sjcbm/2/

 

Можете, для примера, потренироваться на этом полигоне.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>