Запуск и тестирование jsfiddle по URL на мобильном

Быстрый ответ

Для перехода к результату работы в JSFiddle по прямой ссылке, необходимо к вашему URL добавить суффикс /show. Примерное начертание URL:

https://jsfiddle.net/your_fiddle/

Тогда прямая ссылка будет иметь вид:

https://jsfiddle.net/your_fiddle/show

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

Доступ с мобильных устройств

Если желаете проверить ваш JSFiddle на мобильном устройстве, просто добавьте /showк вашему URL:

https://jsfiddle.net/_USER_/_FIDDLEID_/show // замените _USER_ на ваш логин, а _FIDDLEID_ на идентификатор вашего проекта

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

Чистое поделиться результатом

Для демонстрации результата вашей работы без редакторского окружения используйте URL с добавленным /show:

https://jsfiddle.net/your_fiddle/show // Всё просто и стильно!

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

Встраивание результата

Чтобы встроить результат из JSFiddle в другую страницу, добавьте к URL /embedded/result/:

https://jsfiddle.net/_USER_/_FIDDLEID_/embedded/result/ // Не забудьте заменить _USER_ на ваш логин, а _FIDDLEID_ на идентификатор вашего проекта

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

Визуализация

Навигация по работам на JSFiddle — это как вход в специфическую дверь:

URL JSFiddle:     [🚪🔗]
Вход через дверь: [Клик или URL]

Как только вы зайдёте в браузер:

🎨 Ваши HTML/CSS/JS проекты оживают!

Открытие результата с помощью URL можно уподобить передаче ключа от вышеупомянутой двери:

Передаём ключ (URL): 🔑 -> Другу
Друг увидит:         [🎨Твое Творение]

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

Оттачиваем навыки работы с URL

Настройка вида результата

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

https://jsfiddle.net/your_fiddle/embedded/html,css,result/light/

В фиддле будут видны только блоки HTML, CSS и результат. Выбор за вами!

Подробнее об этом расскажет наш спикер на видео

Изменение встроенного вида

Для того чтобы достичь вида встроенного элемента, позволяющего просматривать только CSS и JS, измените URL следующим образом:

https://jsfiddle.net/your_fiddle/embedded/css,js/

Можно выбрать любые секции: html, css, js, result. Очень удобно!

Устранение неполадок с фиддлом

Прямая ссылка иногда может не функционировать в соответствии с ожиданиями; вот что следует проверить при возникновении проблем:

• Проверьте, что ваш фиддль установлен как доступный для всех.
• Убедитесь, что все используемые ресурсы доступны и совместимы с CORS.
• Проверьте корректность подключения всех внешних библиотек, задействованных в вашем фиддле.

Полезные материалы

1. Как использовать параметры URL в JavaScript — подробное объяснение работы с параметрами URL, чрезвычайно важного для успешного отображения результатов JSFiddle с определёнными настройками.
2. Оптимизация загрузки скриптов — рекомендации по эффективной загрузке скриптов, включая размещение внешних ресурсов, аналогичных используемым в JSFiddle.
3. <iframe>: Элемент встроенного кадра — материал на MDN Web Docs о применении тега <iframe> для встраивания результатов JSFiddle в HTML.
4. API JSFiddle — описание, раскрывающее детали API JSFiddle, что может открыть дополнительные возможности для опытных пользователей.