Codepen io что это

Как пользоваться CodePen: подробное руководство для новичков

CodePen — онлайн-редактор для фронтендеров. Это песочница, в которой можно работать с HTML, CSS и JavaScript. Читайте подробное руководство по этому инструменту.

• Кому и когда может пригодиться CodePen
• Как пользоваться CodePen: базовые настройки и возможности
• Как работать с чужими публикациями, экспортировать и встраивать пены
• Как работать с редактором проектов, писать посты, создавать коллекции
• Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами
• CodePen: больше чем песочница кода

Кому и когда может пригодиться CodePen

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

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

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

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

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

После регистрации создайте новый пен: нажмите кнопку Pen в меню.

Создаём новый пен

На странице пена есть четыре окна: для HTML, CSS, JavaScript, а также окно превью. Писать код можно сразу после создания пена.

Пен готов к работе

Пен можно настраивать, для этого перейдите в раздел Settings. В первую очередь обратите внимание на раздел настроек Behavior. Я всегда выключаю автообновление превью, чтобы не отвлекаться на обновляющийся после каждого введённого символа экран.

В настройках HTML, CSS и JS при необходимости подключите препроцессоры, фреймворки и библиотеки, которые планируете использовать.

Подключаем библиотеку Watch.js

В меню Pen Details можно указать название, описание и теги. Метаданные помогут другим пользователям находить ваш пен. В меню Editor доступны настройки отступов. Расширенные настройки редактора доступны в разделе Settings личного профиля.

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

Запускаем пен повторно, чтобы посмотреть превью после внесения изменений

В меню Change View можно выбрать предпочтительный лэйаут, переключиться в полноэкранный режим или режим отладки.

Выбираем режим и лэйаут

Владельцам PRO-аккаунта в CodePen доступны режимы с расширенными возможностями:

• Live View — демонстрация пена в режиме реального времени.
• Collab Mode — режим групповой работы над пеном.
• Professor Mode — режим для преподавателей.
• Presentation Mode — режим для демонстрации пена с помощью проектора.

«Продвинутые» режимы доступны владельцам PRO-аккаунта

Чтобы получить доступ к консоли, нажмите на соответствующую кнопку в левом нижнем углу экрана. Консоль можно очистить с помощью кнопки Clear.

Работаем с консолью

Владельцам PRO-аккаунтов доступна возможность использовать в пене загруженные изображения, а также файлы CSS и JavaScript. Чтобы загрузить изображение или файл, нажмите кнопку Assets в левом нижнем углу экрана.

Загрузка фото и других файлов

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

Как работать с чужими публикациями, экспортировать и встраивать пены

На CodePen можно работать с любым публичным пеном. Для этого нужно зайти на страницу пена и форкнуть его с помощью соответствующей кнопки в правом нижнем углу экрана.

Кнопка Embed в правом нижнем углу экрана позволяет встроить пен на сайт. Встраивание доступно в нескольких режимах: HTML, iframe, Prefill Embed и шорткат для WordPress.

В меню Export есть несколько вариантов экспорта пена. Экспорт доступен в виде архива с кодом или GitHub Gist. Владельцы PRO-аккаунта могут экспортировать архив с приложением, а затем запустить пен на локальном сервере.

Кнопка Share позволяет поделиться пеном в соцсетях или отправить ссылку на пен на свой телефон с помощью sms.

Полезная функция: вы можете поделиться ссылкой не на весь пен, а конкретно на код в окне HTML, CSS или JavaScript. Для этого в меню Change View выберите соответствующую опцию.

Прямые ссылки на код

Как работать с редактором проектов, писать посты, создавать коллекции

Редактор проектов доступен на условиях бета-тестирования. На бесплатном тарифе пользователь может создать один проект. На профессиональном тарифе ограничений нет.

В редакторе проектов можно создавать директории и файлы и организовывать код так, как это делается в реальных проектах. Вы можете редактировать код в отдельных файлах, а не в общем разделе HTML, CSS или JavaScript, как при работе с пенами. В редакторе проектов можно загружать изображения.

Интерфейс редактора проектов

В разделе Post можно писать заметки. Редактор поддерживает Markdown и визуальный режим. Есть возможность добавлять в посты изображения и встраивать пены.

Возможности для блогеров

Пены можно организовывать в коллекции. Чтобы создать коллекцию, нажмите кнопку Collection в меню. Чтобы добавить свой или чужой пен в коллекцию, нажмите кнопку Add to collection в правом нижнем углу экрана и выберите нужную коллекцию.

Добавляем пен в коллекцию

Социальные возможности CodePen: как настроить личный профиль и следить за интересными людьми и темами

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

Начните использовать социальные возможности CodePen с настройки личного профиля. В раздел Showcase добавьте пены, которые хотите показывать другим пользователям в первую очередь. Этот раздел можно рассматривать как портфолио. Для редактирования раздела нажмите кнопку Organize Showcase в профиле.

Перетяните лучшие пены в раздел Showcase.

Выберите лучшие работы и отправьте их в портфолио

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

Следим за активностью пользователей

В разделе Explore можно найти интересный контент. Например, в Popular выводятся популярные публикации, в Following можно посмотреть публикации пользователей, на которых вы подписаны. В Topics можно выбрать интересные вам темы.

Ищем контент по интересам

В разделе Grow можно найти работу или сотрудников. Для этого выберите пункт Job. Список вакансий открыт для всех пользователей. Объявление о поиске сотрудников — платная функция, стоимость составляет 299 долларов за 60 дней.

Ищем работу и работников на CodePen

В разделе Grow — Challenges каждую неделю появляются новые челленджи для фронтендеров. Лучшие решения администрация CodePen закрепляет на главной странице. Это позволяет авторам заявить о себе и увеличить количество подписчиков.

CodePen: больше чем песочница кода

CodePen действительно позволяет быстро написать и протестировать код. Онлайн-редактор поддерживает подключение библиотек, фреймворков и препроцессоров, имеет гибкие настройки.

В CodePen есть режимы для преподавателей и лекторов. Их удобно использовать для демонстрации кода студентам и участникам конференций. Отдельного внимания заслуживают социальные функции CodePen. Здесь можно искать интересный контент, фолловить интересных людей. Есть раздел для поиска работы и сотрудников, а также конкурсы на лучшие решения тематических испытаний.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Площадка для тестирования CodePen

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

Наиболее популярные сервисы такого рода это CodePen и jsFiddle. Лично мне больше нравиться jsFiddle, но у него есть один существенный для меня недостаток (точнее — их два на самом деле). В этом сервисе можно выполнить замену CSS на SCSS, но подключить библиотеку Compass — нельзя. И еще там нет автоматического обновления создаваемого проекта.

Другой сервис — CodePen является идеальным инструментом для веб-мастера или верстальщика. В нем есть все, что нужно и ничего лишнего. Может быть, это потому, что проект был создан хорошо известным Cris Coyier?

Данная статья, возможно, никогда не была бы написана, если не одна причина — я не знал, как в этом сервисе подключить поддержку SCSS + Compass. Решение лежало на поверхности, достаточно было “остановиться на бегу” — выделить немного времени на изучение этого проекта.

Ниже привожу подробное и красочное описание работы с CodePen в картинках. Точнее — это будет описание основных, самых основных или ключевых моментов при написании кода в CodePen.

Главная страница CodePen

Первое, что необходимо, это конечно же зайти на данный ресурс по адресу http://codepen.io. Тем, кто первый раз попал сюда, может зарябить в глазах, но это с непривычки:

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

Внизу каждого “окошка” с готовой работой показаны метаданные — информация об авторе. К примеру, рассмотрим код, созданный автором по имени Yaroslav. Видим, что веб-мастер экспериментировал с созданием на CSS различных продвинутых типов

background

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

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

Настройка CodePen — начало

В принципе, больше ничего нас в главном окне CodePen не интересует — ведь нам необходимо самим создавать “нетленные” работы! Для этого сначала нужно зарегистрироваться на CodePen, после чего получаем свой личный кабинет с настройками. Так как первоначально задача стояла в подключении SCSS + Compass в CodePen, то будет решать ее с первых шагов. В правом верхнем углу есть синий значок-аватар, по которому нужно щелкнуть мышью. Раскроется список, в котором необходимо выбрать строку “Your Settings”:

Все настройки CodePen уместились на одной странице и это замечательно! Окно разделено на четыре секции — Syntax Hightlighting, Fonts, Key Bindings, Preprocessor & Library Defaults. В принципе, здесь все интуитивно понятно:

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

Секция Fonts помогает выбрать шрифт и размер шрифта. Выбор шрифтов небольшой, но лучше оставить Monaco — он лучше всех смотрится. Размер шрифта можете выбрать, какой вам нравиться.

Секция Key Bindings совсем простенькая — здесь можно выбрать сочетание клавиш при работе в CodePen. Normal — это обычный набор сочетаний клавиш, а Vim для тех, кто привык и хорошо себя чувствует в линуксовом (весьма своеобразном) редакторе Vim.

Секция Preprocessor & Library Defaults самая большая и самая необходимая для нас, ведь ради нее мы и зашли в настройки. В этом разделе можно установить, какие препроцессоры для HTML, CSS и JavaScript будут использоваться в каждом новом проекте, создаваемом в CodePen. В строке HTML Preprocessor ничего не делаем, так как препроцессорами для HTML не пользуемся. В строке CSS Preprocessor выбираем из списка SCSS, а в следующей строке CSS Preprocessor Add-on выбираем библиотеку под SCSS — Compass (for Sass). Строка CSS Reset служит для выбора “CSS-ластика”: CSS Reset или Normalize. Можно также обратить внимание на строчку Prefix Free?, в которой есть возможность поставить галочку:

Prefix Free — это JavaScript, созданный для того, чтобы работать с браузерными префиксами на самом современном уровне. Другими словами, этот скрипт фильтрует созданный CSS-код на предмет наличия в нем браузерных (вендорных) префиксов и проверяет, какие из них нужно использовать на сегодняшний день, а от каких уже можно отказаться. Польза Prefix Free в очистке CSS-кода от лишнего мусора и увеличение скорости загрузки в браузере.

Но продолжим разбор секции Preprocessor & Library Defaults. Три последние строчки относятся к поддержке JavaScript в CodePen. В строке JS Preprocessor выбирается препроцессор JavaScript, в строке JS Library — подключаем библиотеку JavaScript, а в строчке Modernizr? отмечаем, нужна ли нам встроенная поддержка JavaScript-библиотеки Modernizr.

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

Вот и все, что можно или нужно сделать в настройках CodePen. Сохраняем изменения, нажав большую зеленую кнопку Save All Settings в нижнем правом углу окна.

Быстрая настройка CSS-препроцессоров в CodePen

Стоит также сказать, чтобы настройки, рассмотренные выше, можно внести в создаваемый проект “на лету”. Для этого нужно щелкнуть мышью на значке шестеренки в окне кода CSS. Появиться небольшое окошко с выбором одного из четырех CSS-препроцессоров: SASS, SCSS, LESS, Stylus. Также можно выбрать CSS-ластик: Normalize, Reset или вообще никакого (Neither). Включить библиотеку Prefix-Free; подключить внешнюю таблицу стилей CSS или же другой проект, указав в строке External CSS File or Another Pen абсолютный путь к этому файлу:

Кнопка Analyze CSS via CSS Lint служит для проверки CSS-кода в CodePen на синтаксические ошибки с помощью известного проекта CSS Lint (под редактор Sublime Text также есть подобный плагин). На рисунке “Основное окно CodePen” внимательный читатель может заметить ошибки, на которые обязательно “заругается” CSS Lint. В частности,

font-size: 62,5%

Основное окно CodePen

С настройками CodePen разобрались, теперь давайте вкратце рассмотрим основное окно в этом редакторе. Оно разбито на три части для написания кода на HTML, CSS и JavaScript. Внизу расположено окно предварительного просмотра. Не стоит даже упоминать, что можно легко изменить расположение и вид этих окон:

Вверху находятся четыре большие кнопки: Save, Fork, Info, Share. Кнопка Save — конечно же для сохранения проекта (Pen). Если имеются несохраненные изменения, то вверху этой кнопки появляется оранжевая полоска, как напоминание о необходимости сохранить изменения. Кстати, забыл упомянуть, что в CodePen проект называется Pen (вот так незатейливо). Кнопка Fork — для создания ответвления (fork) проекта. Кнопка Info — внести информацию о создаваемом Pen: его заголовок, описание и мета-теги:

Кнопка Share весьма и весьма полезна. С помощью нее можно поделиться созданным проектом (кодом) с другими людьми. Собственно, именно для этой цели сервис CodePen и создавался. Там же можно скачать проект в виде zip-архива или выложить его на GitHub. И даже отправить ссылку в виде SMS на указанный номер телефона:

На CodePen можно встраивать один проект (Pen) в другой проект (Pen). Более того, созданный Pen можно встраивать в виде готового куска кода в другие проекты (не обязательно созданные в CodePen), в том числе и под CMS WordPress. Это уже совсем круто!

Работаем с SCSS + Compass в CodePen

Настройку подключения SCSS + Compass в CodePen мы выполнили, осталось посмотреть, реально ли все работает. Да, действительно все нормально! Собственно, сам код SCSS внимательный читатель мог увидеть уже на рисунке “Основное окно CodePen”, когда говорилось о трех основных окнах CodePen. Там же можно было заметить, что рядом с надписью CSS появилась еще одна — (SCSS), что говорит о включенной поддержке SCSS.

На рисунке хорошо видны переменные SCSS и подключения mixin’ов из библиотеки Compass для создания радиуса скругления (

Как пользоваться CodePen: руководство для начинающих

CodePen — популярный онлайн-редактор кода, которым пользуется множество разработчиков по всему миру. Он предназначен для работы над фронтенд-проектами на HTML, CSS и JavaScript. Если вам нужно создать проект с бэкендом, лучше выбрать другой редактор.

Как зарегистрироваться и получить бесплатный аккаунт

Когда вы заходите на сайт CodePen, вам предлагается залогиниться при помощи аккаунта в Twitter, Facebook или GitHub. Также можно зарегистрироваться на сайте, используя адрес электронной почты, логин и пароль.

После создания аккаунта вы получите письмо от CodePen. Откройте его и верифицируйте свой email.

Разница между пенами и проектами

После верификации email-адреса, вы попадете прямо в Pen-редактор. Если редактор не покажется, кликните на вкладку Pen в левой части страницы.

Pen-редактор делится на три раздела: HTML, CSS и JavaScript.

Редактор пенов не поддерживает множественные файлы, т. е. предполагается, что в вашем проекте будет не больше одного файла на каждом языке. Отсюда вывод: пены (Pens) годятся только для маленьких проектов. Если планируете написать больше 5000 строк кода, лучше создавать не пен, а проект.

Пенов можно создавать сколько угодно, даже с бесплатным аккаунтом.

Проекты

Если хотите создать проект, кликните на вкладку «Project» в левой части экрана.

В редакторе проектов можно работать с несколькими HTML, CSS и JavaScript файлами.

Имея бесплатный аккаунт, вы сможете создать только один проект, в котором будет максимум 10 файлов. Если вам нужно больше возможностей, придется заплатить за Pro-версию.

Базовые функции редактора пенов

Форматирование

Кликнув на стрелочку выпадающего меню в любом из трех редакторов, вы увидите опцию Format.

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

Можно также заглянуть в раздел Behavior в Pen Settings (настройках пена) и выбрать опцию Format on Save (форматировать при сохранении).

Анализ

Открыв выпадающее меню в любом из трех редакторов, вы увидите опцию Analyze. Этот инструмент позволяет находить и исправлять ошибки в коде.

Опции просмотра

Кликнув на Change View, вы сможете настроить макет редактора или переключиться на другие варианты просмотра.

Использование консоли

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

Добавление ссылок в раздел head (HTML)

При создании пенов вам не нужно включать в свой код DOCTYPE, html, head или body. Вся эта информация встроена в редактор.

Но если вам нужно добавить ссылки в head, например иконки Font Awesome или Google Fonts, вы можете это сделать во вкладке с настройками, в разделе head.

Добавление CSS-библиотек и фреймворков

В настройках пена есть возможность добавить CSS-библиотеки и фреймворки. Например, Bootstrap, Tailwind CSS и Bulma.

Добавление JavaScript-библиотек и фреймворков

В настройках пена, в разделе JavaScript можно добавить в пен популярные библиотеки и фреймворки, такие как React, Angular и Vue.

Шеринг пенов в соцсетях

Если захотите поделиться своим пеном в блогах или соцсетях, нажмите на кнопку Share в правом нижнем углу.

Экспорт пенов

Если хотите загрузить свою работу на компьютер, это можно сделать при помощи кнопки Export. Она находится там же, в правом нижнем углу.

В результате экспорта будет создана папка с вашими файлами.

Встраивание пенов в блоги и статьи

Если хотите показать пример кода в посте блога, можно встроить ваш пен прямо в код страницы. Для этого нажмите кнопку Embed в правом нижнем углу редактора.

Как сделать форк пена

Сделать форк — значит создать копию пена. При этом вы будете иметь доступ ко всему коду и сможете изменять его по своему усмотрению.

Прежде всего, найдите пен, форк которого хотите сделать. Затем кликните кнопку Fork в нижнем правом углу.

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

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

CodePen позволяет добавлять в пены HTML, CSS или JavaScript препроцессоры, а также NPM-пакеты.

В настройках пена, во вкладке HTML, можно выбрать из опций Haml, Markdown, Slim и Pug.

Во вкладке CSS можно выбрать из Less, SCSS, Sass, Stylus и PostCSS.

Что касается JavaScript, тут вы можете выбирать из Babel, TypeScript, CoffeeScript и LiveScript.

Также можно добавлять в пены NPM-пакеты, такие как react-bootstrap.

Базовые функции редактора проектов

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

Шаблоны

В редакторе есть несколько шаблонов для проектов на HTML и CSS, а также для React-проектов.

Если перейдете на платную версию, получите доступ к шаблонам на Tailwind CSS и Bootstrap.

Файлы и директории

Чтобы добавить новый файл или папку, кликните соответствующую кнопку в левом нижнем углу.

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

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

Шеринг проектов

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

Экспорт проектов

Файлы проекта можно экспортировать — загрузить на свой компьютер — при помощи кнопки Export в том же правом нижнем углу.

CodePen challenges

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

У вас также останется доступ к задачам прошлых месяцев.

Надеюсь, эта статья вам понравилась. Желаю удачи в вашем путешествии по миру фронтенда!

Как пользоваться codepen.io?

Подскажите как пользоваться сайтом, я часто там что нибудь нахожу, подставляю всё как нужно и не работает.
Вот например https://codepen.io/CreativeJuiz/pen/oCBxz
Я делаю всё как там, подключил jquery а не работает. Нужно ещё что то подключить, а откуда это узнать?

• Вопрос задан более трёх лет назад
• 4884 просмотра

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

Простой 4 комментария

Алекс Глебов @SkiperX Куратор тега CSS
ошибки в консоли смотрите
в примере чистый js, без jquery
Nohaga @Nohaga Автор вопроса

Алекс Глебов, Uncaught TypeError: Cannot set property ‘onclick’ of null
в строке theToggle.onclick = function() =)

но ведь должно работать же, всё правильно скопировал

Nohaga @Nohaga Автор вопроса

Алекс Глебов, в этом случае обернул в $( document ).ready(function()
всё заработало, но постоянно копирую что то оттуда и не работает, по разным причинам =(

Алекс Глебов @SkiperX Куратор тега CSS

Nohaga, это событие готовности всех элементов dom дерева
Ваш js был выше элементов и когда исполнялся их еще не было.

вам просто нужно изучить js
learn.javascript.ru
отсюда главы основы, структура данных
потом Документ и объекты страницы и события

Потом погуглить популярные jquery
Для верстки хватит за глаза

Решения вопроса 0
Ответы на вопрос 2

Конкретно этот пример самый дефолтный на чистом коде. Не знаю по какой причине он может у вас не работать. Его достаточно просто скопировать и вставить в свой HTML-файл. Часто бывает, что написанный код использует какой-то процессор. То есть это не чистый код и по дефолту браузер его обработать не сможет. Он не будет работать если вы его просто вставите без обработки. Используемый процессор будет приписан в скобках в заголовке. Например HTML (Pug) — CSS (Stylus) — JS (Babel) и так далее. Если используется процессор, то чтобы получить чистый код прямо в окне Codepen достаточно просто выбрать в выпадающем меню блока (стрелка вниз) пункт View Compiled . и код будет сразу же преобразован. Преобразованный код уже можно смело вставлять к себе и он будет обрабатываться браузером по дефолту. Так же могут быть подключены дополнительные библиотеки без которых код не будет работать. Чтобы посмотреть список подключенных библиотек надо нажать на настройки блока (шестеренка) и посмотреть есть ли в списке ссылки на них. Если есть ссылки на библиотеки соответственно вам тоже нужно их подключить в код. Ну а проще всего конечно зарегистрироваться на сайте. Нажать в правом нижнем углу Export -> Export .zip и получить архив с содержимым. Соответственно index.html это будет HTML-код. В папке css будет файл с CSS-кодом. В папке js будет скрипт с JS-кодом. Все эти файлы будут на чистом коде. Если использовались дополнительные процессоры, то код под них будет в соответствующих папках.

Ответ написан более трёх лет назад
Комментировать
Нравится 6 Комментировать
seregadushka @seregadushka

Получается по тексту, что запуск index.html из Export.zip должен работать в любом случае. Но не работает. Файлы из Export .zip с голыми index.html и style.css проблем не вызывает. А вот когда посложнее, с JS — то не рабоает.

Ответ написан 16 июл. 2023
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• JavaScript

Как вставить инлайновый скрипт на DOM веб страницы при разработке расширения для гугл хром?

• 1 подписчик
• 2 часа назад
• 52 просмотра