g16052015@mail.ru

8-962-598-58-91

Быстрая отладка скриптов или что такое CodePen

Иногда у каждого разработчика возникает необходимость в больших проектах отладки фрагмента кода или скрипта. Для этого как нельзя лучше подходит CodePen.

CodePen, по описанию в Википедии является интернет-сообществом, с многомиллионной аудиторией. Но на мой взгляд CodePen, созданный в 2012 году разработчиками Алексом Вазкуезом, Тимом Сабатом и веб-дизайнером Крисом Койером, давно стал незаменимым инструментом для разработчиков, фрондэндщиков и верстальщиков, и вышел из границ простого интернет-сообщества .

Давайте проведем небольшой обзор данного инструмента.

 

 

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

Кликаем в левом сайтбаре на строку Pen и перед нами откроется удобный интерфейс

 

 

Он разбит на четыре части, где верхние 3 обозначены соответствующими отметками (HTML, CSS, JS) и на 1 нижнюю для отображения результатов вашего творчества.

Давайте создадим небольшой проект. Это можно сделать написав несколько строк разметки HTML в ручную, но можно сделать быстрее использовав Emmet.

 

 

Для примера создадим простую фигуру, например красный квадрат и поместим его в центр. Для этого в левом разделе, внутри тега BODY создадим блок с классом. И в среднем разделе опишем его стили.

 

 

Очень удобно и быстро. Сразу же можем увидеть результат. Теперь черед за JS. Добавив пару строк кода меняем цвет нашего квадрата.

 

 

Для удобства отладки JS скриптов имеется консоль, где можно диагностировать ошибки. Кроме этого имеется возможно использования препроцессоров и js библиотек.

CodPen можно использовать не только для экспериментов и творчества. Он подходит для выполнения и демонстрации тестовых заданий.

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять