00:00 Интро 00:13 В чём проблема 01:56 Обзор демки 03:58 Тест на телефонах 05:02 Отладка на iOS 06:46 Отладка на Android 07:41 Симулятор Xcode 09:27 Эмулятор Android Studio 10:54 Починка лапки 11:33 Не всё так просто 12:44 Выводы 14:20 Аутро
То чувсство когда увидел currentcolor в svg и понял в чём дело а Вадим 5 с лишним минут подводит к этому ответу :) Но видео ОООЧЕНЬ полезное, для того чтобы показать как дебажить на мобильных девайсах тем, кто с этим не знаком, всё супердоступно!
Да я тоже сразу всё понял, опыт не пропьёшь :) Но во-первых, там реально сложное окружение было и могла быть какая-то фигня, а во-вторых, важно было пощупать. Зато теперь есть готовое окружение для тестирования, которое всё не доходили руки собрать.
Принесли баг с синей кнопкой. Джун: принудительно на шару задает цвет, тратит одну минуту и дальше разгребает задачи в поте лица. Сеньор: ставит на стоп текущие таски, проводит ресёрч, непринужденно выкачивает девтулзы, экспериментирует с эмуляторами, принудительно задаёт цвет, тратит весь день, уходит домой, профит.
@@pepelsbey по радостным крикам "ура, заработало" ) (ну шутка же, ну) А если серьёзно, то для полноты картины не хватает упоминания веб сервисов с живыми девайсами, тот же бравзерстек (правда они совсем ошалели и бесплатно теперь только одну минуту дают, что непригодно для отладки). Удобно когда под рукой нет ни мака, ни айфона, ни времени на выкачивание гигов интернета.
@@HomaFromPTZ мало того что одну минуту, так она ещё и считается сразу, ещё до того как устройство загрузится, остаётся порой секунд 30, плюнул и купил макбук, так дешевле
@@pepelsbey Хорошо, когда есть реальные устройства на работе. Когда не было, то обычно все заканчивалось кличем в общий рабочий чатик. Там, как правило, было несколько человек с айфоном. Их и эксплуатировали)
Я предпочитаю пользоваться BrowserStack. Да, этот сервис иногда тормозит, но исправить ошибки на самых разных платформах позволяет. И да, Developer Tools там тоже есть :)
Это ваша работа - разрабатывать кроссбраузерные и кроссплатформенные интерфейсы. Текстового редактора на Линуксе для этого не достаточно. Самый дешёвый, но весьма мощный Macmini на M1 стоит 75 000 рублей. Можно купить б/у ноут, или тот же Macmini ещё дешевле.
ЭТО ПРОСТО АХРЕННЕНННООООО !!!! ЭТО ТАКОЕ ОТКРЫТИЕ ДЛЯ МЕНЯ!!!! ОГРОМНОЕ СПАСИБО, Шикарная тема!!!! Мега крутая!!!! Работаю в маленькой продуктовой компании и беда с айфонами присутствует. Теперь этой боли не будет!!!!!!!!
Видео охонь!) пару моментов: 1. Можно спокойно поставить MacOS на виртуальную машину, а там уже Safari (тут уже отписались про это, не совсем легально, да, но если нет возможности, то других вариантов нет) и Xcode с эмулятором , но тут конечно для комфортной работы потребуется комп помощнее, чем офисный вариант 2. Вадим, пожалуйста, поменьше переключений камер "слева-справа". Идеально было раньше - когда фронтально одна камера P.S. всё ещё ждёмс видео "делаем табы по феншую" но этот рассказ охонь!
За 5 лет работы на одном проекте с кросс-платформенным приложением сделал вывод - эмулятор не всегда правильно показывает как будет на реальном девайсе, и так же справедливо обратное утверждение. И опять же, артефактов при отладке тоже хватает, меняешь свойства в инспекторе сафари, вроде все ок, а когда применяешь изменения в коде и обновляешь страницу - бац, не работает. Короче, все перепроверять приходится по несколько раз и эмулятор - не панацея, приходится содержать еще зоопарк реальных девайсов)
Судя по 5 годам, это касается кросс-приложения, созданного на React Native или Xamarin? Интересно, с Flutter те же грабли? Существуют ли проблемы, которые принципиально не отловить без устройства, запустив приложение в эмуляторе на макоси?
Да недавнего времени в компании использовали BrowserStack. Теперь переехали на LambdaTest. В целом разработка происходит в хроме. Изредка открываю какие-то сложные моменты на реальных мобильных устройствах, чтобы убедиться в своих решениях и пощупать интерфейс в реальном окружении. Все кроссбраузерное тестирование ложится на плечи тестировщиков. Сафари в своё время попил не мало крови, особенно когда делал текстовый редактор на мобилке с залипающим меню форматирования текста …
Вадим, спасибо за новые видео и за гражданскую или лучше человеческую позицию! Как QA немного забавно было смотреть именно это видео - кажется, что это супер очевидные вещи. Видимо, со временем внутри происходит автоматическое обесценивание себя (дети совка 🥲). А вообще очень годный контент. И человек хороший. Peace be upon you!
Отличный выпуск, спасибо! Очень доступно, без лишних деталей, но тема раскрыта) Сам пользуюсь этими инструментами, но есть интересные особенности: десктопный Safari не даёт отлаживать содержимое WebView в нативных приложениях на iOS. Но если запускать приложение в эмуляторе, то проблем не будет. И похожая проблема с Android: чтобы отлаживать WebView в десктопном Хроме, нужно в нативном приложении специально дать разрешение. Было бы интересно ещё обсудить инструменты для «перехвата» и изменения реквестов/респонсов на локальной машине. Начиная с Overrides в Хроме, закачивая прокси (Charles, Proxyman). Бывает полезно, чтобы отладить JS на чужом сайте, или подставлять нужные ответы от API, иногда такие штуки очень помогают.
Тестирование это тоже искусство и если есть команда то лучше конечно иметь под рукой хотя бы пару тестировщиков, а если нет то придется потратить время и все проверить самому и сильно доверять эмуляторам тоже не стоит не всегда они могут показать проблему. На счет Safary это отдельная тема он современный IE как то была заморочка со шрифтами везде норм но в нем откуда то вылезла жирная обводка.
Посмотрела Ваше последнее видео о войне. Хочу сказать огромное СПАСИБО Вам, Вадим, за то, что говорили об этом и не молчали, как многие другие. Это очень важно! Надеюсь, что война закончится в ближайшее время. Как раньше уже никогда не будет, но мы теперь знаем, КТО ЕСТЬ КТО. И надежда о том, что в России есть такие люди как Вы, еще жива. Спасибо Вам.
Вы хотите сказать, что у Safari 90% рынка и браузер перестали разрабатывать на 5 лет? Нет конечно. Это была главная проблема IE, которая вызвала стагнацию рынка. Это совсем не так с Safari.
К сожалению, вы просто ресайзите экран десктопного Safari в этом инструменте. Вы не можете получить реальный рендеринг в iOS без симулятора или реального устройства.
Макбук то не нужен. А вот iphone - да. Это видео только доказывает это. У меня старый айфон и ios-safari-remote-debug-kit для отладки. Правда там, действительно, целую статью можно писать по настройке, чтобы покрыть все нюансы такого подключения. Конечно, с макбуком было бы легче, но на Win/Lin вполне можно отлаживать.
@@pepelsbey где же все то? Вы же сами показываете, что в iOS свои стили и баги там тоже свои бывают(тот же скроллинг). И пользователей айфонов более, чем дофига. Айфон - необходимое требование сегодня, МакБук - нет. Дебажить айфон можно и без него. С фактом, что проще будет купить ненужный девайс, а не настраивать костыли я и не спорю - каждый сам решает.
Мобильный Safari та еще шляпа. Например, скрытие появившегося в iOS 15 Tab Bar'а не тригерит resize вьюпорта. Т.е. если у тебя приложение размером в один viewport, то у тебя либо Tab Bar всегда виден либо унылая полоса внизу экрана. Зачем, почему, а главное на..уя? А так, по сути покупал iPhone только ради дебага проектов) Теперь нужно еще и мак покупать. Удобно.
@@rodigy 100%, меня также развели, сидел спокойно на виндоусе, пока заказчики не начали жаловаться, сначала айфон, потом макбук, теперь айпад, везде свои приколы. А так без разницы на чём работать, хотя виндоус привычнее
Всем сердцем не люблю МакОс, неудобно, неприятно работать и абсолютно не хочется привыкать к такому) на работе для таких случаев есть макМини и реальные устройства два айпада и несколько айфонов у коллег. Но каждый раз, когда находится очередной баг в эпл - день будет плохой). На винде и на андройд всё легко, понятно и удобно, на мой взгляд. Жду обновление сафари на винде, чтобы тестировать подобное)
Отлично всё рассказали, сам лет 7 назад с этим столкнулся, посмотрел видос - прямо ностальгия. Только иметь реальный MAC совсем нет необходимости, Windows+VmWare/VirtualBox с легкостью решают эту проблему, да производительность, конечно, хромает - но для отладки верстки хватает с головой. Ну и как ещё одно решение, хакинтош - целая наука, на которую не вижу смысла тратить время, когда можно всё сделать за 5 минут на винде. Но если есть средства, то, да лучше купить макбук и не знать вообще проблем.
Поставить под Виртуалкой МакОСЬ на АМД процессоры это такой геморой, что просто слов нет. Я перепробовал разное - так и не встала. А вот на реальном железе АМД поставилась у меня за 20 минут без каких либо плясок. Тут мне повезло, нашлась соответствующая готовая конфигурация под мое железо, кто-то уже настроил.
Ну согласись, что все это костыли, и ещё нужно знать как это устанавливать. А если не получилось, придется с бубном вокруг этого всего крутиться и прыгать. Сомнительное занятие, легче просто иметь макбук) тем более, если ты разработчик тебе либо могут выдать на работе, либо ты его сам купишь и он отобьется в первые два месяца)
Разница между симулятором и эмулятором в том, что первый иммитирует только софт, который может быть на том или ином телефоне. Эмулятор же, в свою очередь, иммитирует как софт так и само "железо", то есть он более близок к реальному девайсу чем симулятор
Хакинтош - это головная боль. Я ставлю мак ос на виртуальную машину. Делается это не сложно. Да, не так шустро как на реальном железе, но за то доступно всем. То ли ещё будет, когда мак ос перестанут делать для x86. Сейчас у меня Monterey, на virtualbox под линуксом. На винде работает чуть хуже.
Интересно, чем хакинтош на виртуальной машине больнее хакинтоша на реальном железе? Виртуалки пробовал с перерывом в 10 лет, наивно полагая, что времени для прогресса прошло достаточно, оба раза железо было хоть и не топовым, но актуальным и шустрым. Особого прогресса в сфере виртуальности обнаружено не было, тормоза, вгоняющие в депрессию.
Есть сервисы (не реклама) предоставляющие доступ к физическому устройству с Сафари и всеми другими кейсами. Можно, даже правильно, не иметь весь зоопарк устройств. А то вот жалуются что на Сяоми, когда ссылку открывают в телеграмм что-то там дёргается на встроенном китайском браузере... Хорошо что Китай один, но это не значит что я должен иметь по каждой железяке со всего мира.
@@mit7871 зависит от задач. Если на постоянной основе, то лучше обзавестись (выбить из компании, аргументировать, что не могу проверить для господ с айфонами). А если разово, то хватит и триала, лаги можно потерпеть.
Я сталкивался со случаем когда баг не воспроизводился в одном таком сервисе. Чтобы он появлялся, нужно было тыкать в реальный тачпад эпл устройства. Так что сервисы это конечно круто, но не панацея
6:35 Ну, не знаю, не знаю... С первых минут подумал про user agent style sheet, и что там по дефолту стоит color: blue или типа того. Он постоянно и везде бесит, для этого существуют всякие css-reset. На ссылках тоже есть такое. И маржины-паддинги у половины тегов. Однако, чтобы у свг работал color, необходимо в свг коде прописать color=currentColor. Видимо, мобильный сафари работает в обход этого правила. Вот это уже стрёмно.
А нельзя ли использовать нормалайз чтобы сбросить все стили? Или я чего то не понимаю?? Заранее прошу строго не судить за вопрос, потому как я ещё совсем новичок во фронтенде
Еще есть в инете готовые образы для VMWare c macOS и XCode эмулятором. Для случаев "раз в месяц проверить" - пойдет. Иногда жрет проц 4 ядра на все 100%, похоже на баг, решения найти пока не смог.
Не ресетом, а нормалайзом. Я лично избегаю глобальных стилей на проектах, но суть этого видео конечно же в другом: браузеры разные и нужно иметь возможность тестировать во всех.
Никуда не уверен но то что с Маком фронтендеру будет отлично супер это да. Все современные языки программирования. NodeJS/Go/Dart(Flutter) - без проблем под MacOS. Кросплатформенная Моб разработка этот тот случай что никуда. Андроид и Айос одновременно собирает только Мак. Системное программирование C++/C/Rust - тут понятное дело Linux. Вообще для бекенд разработки и Linux хороший выбор Dell Latitude GameDev - если десктопный то тут Одна ОС для Лаунча игр это Windows - соответственно тут какой то Lenovo Legion будет хорошим выбором
OpenCore позволяет накатить много разных осей на одну железяку. Если железяка - это мак, то все будут работать и так, а вот немак надо выбирать максимально совместимый с маком по железу, зато тут можно выиграть по мощи за те же деньги или по деньгам за ту же мощь )
1. Привет, а что насчет обнуляющих стилей, вы их не используете? 2. Пожалуйста, приведите пример похожего случая "посложнее", который так легко не исправить.
Я стараюсь избегать ресетов и нормалайзов, это глобальные стили, от которых не хочется зависеть. Но иногда обращаюсь к нормалайзу как к сборнику рецептов.
Я работаю с разработкой Гибридных приложений (Angular + Ionic). Например, теже самые пуш нотификации работают только на реальных девайсах. Я работу с нативными плагинами ( трекниг беграунд локации, просто локация и тд) маст хев нужно проверять на реальных девайсах
Там внутри написано fill=currentcolor, то есть заливка наследует значение CSS-свойства color. Проблема именно в этом - у кнопки на iOS цвет текста по умолчанию синий.
Принцип простой) реализация кончено больная боль) пока спасал browserstack) Думал о покупка Mac mini) а мониторы тоже поменять надо, потому что их ppi не подходит)
@@pepelsbey А монитор подходящий (4к минимум) к этому Macmini за сколько можно купить? MacOS же не умеет шрифты нормально рендерить на full hd мониторе.
Использую browserstack, все сделано за вас, все платформы, все популярные браузеры, модели iOS, MacOS, Andriod, Windows. Так что это хорошая альтернатива всем этим танцам с бубном
Хорошо, что у вас есть доступ к Browserstack, но это всё-таки не полностью заменяет тестирование на реальном устройстве - разве что позволяет не ставить эмуляторы. Ну или если у вас Windows, то даёт доступ к браузерам Apple.
Привет, подскажи плз как быть с плавающей панелью в сафари на телефоне при задании блока 100vh? Эта панель постоянно плавает и не получается настроить корректно.
По спецификации vh - это именно высота экрана без учёта панелей браузера, об этом стоит помнить. Проблемы бывают не только с vh, но и с vw, который не учитывает ширину полос прокрутки и можно легко получить горизонтальный скролл. В будущем это исправится с новыми единицами измерения svh, lvh, dvh, они уже в бете Safari 15.4 twitter.com/jensimmons/status/1494377603142197255
Движок тот же, а вот мобильный режим эмулирует неплохо. Работает мобильные медиа-выражения вроде (pointer: coarse), можно проматывать свайпом мышкой. Весьма полезно для базовой разработки. В Сафари, например, только меняется размер экрана/плотность пикселей и ничего больше.
Погодите, интересно. Вадим, я может пропустил, но почему основной браузер - Firefox? Просто любопытно. Хром с навесками в виде тулзов вроде как очень даже универсален. Поделись, плиз опытом Ps. Кто на Реакте - пригодится. В работе с AntD попадаются сюрпризы, которые выскакивают на мобилках и симулятор меня не раз выручал;)
Чтобы поддерживать разнообразие браузерных движков и кроссбраузерность своего кода. А ещё это браузер, в котором есть некоторые уникальные решения, которые помогают мне удобнее пользоваться вебом.
Если вы про локальный сервер и IP-адрес, то это сильно проще, чем гонять туннели через интернет. В остальном это никак не помогает ни с эмуляторами, ни с устройствами. Но в целом - да, есть такой инструмент, иногда удобно :)
Другое: туда я прихожу пообщаться с друзьями (это важно сейчас), это сравнительно просто записывать без картинки, плюс это не лично мой проект и решение вернуться было общим.
@@ГербертГерберт-о4э каждый сам решает где эта грань находится между тем, это ок, а где нет. Вопросы есть к тем, кто просто живут как ни в чем не бывало, будто бы их это никаким образом не касается или даже вообще не в курсе что что-то произошло
Это веб, тут есть единые нерушимые стандарты, а есть отдельные платформы, которые в праве иметь свой взгляд на удобство пользователей. Так всегда было и будет, просто примите )
У всех браузеров есть свои особенности. Вопрос в том, знаете вы - их или нет. Можете ли проверить, понять и отладить - или нет. Видео об этом, другие стили для контролов форм - не баг.
Возможно что эмулятор позволяет полностью запустить копию той машины, которую вы пытаетесь эмулировать. А симулятор - просто симулирует какое-нибудь состояние какого-нибудь устройства :)
Да, пришлось научиться отлаживать в симуляторе ios. Вот прям на днях пытался решить проблему зависания скроллов внутри модалки. Оказывается мои пакетные функции body-scroll-lock на ios ставят body не overflow hidden, а position fixed. Получается fixed внутри fixed, возможно проблема в этом. А дело всё в том, что до недавнего времени именно на ios не работал overflow hidden на body.
Да ну не хвастайтесь вы так сильно :) Вы тоже чего-то не знаете, наверняка. И я чего-то не знаю. Давайте сосредоточимся на обмене опытом и не будем показывать пальцем.
00:00 Интро
00:13 В чём проблема
01:56 Обзор демки
03:58 Тест на телефонах
05:02 Отладка на iOS
06:46 Отладка на Android
07:41 Симулятор Xcode
09:27 Эмулятор Android Studio
10:54 Починка лапки
11:33 Не всё так просто
12:44 Выводы
14:20 Аутро
Бро, возвращайся на ютуб. Нам тебя не хватает :)
То чувсство когда увидел currentcolor в svg и понял в чём дело а Вадим 5 с лишним минут подводит к этому ответу :) Но видео ОООЧЕНЬ полезное, для того чтобы показать как дебажить на мобильных девайсах тем, кто с этим не знаком, всё супердоступно!
Да я тоже сразу всё понял, опыт не пропьёшь :) Но во-первых, там реально сложное окружение было и могла быть какая-то фигня, а во-вторых, важно было пощупать. Зато теперь есть готовое окружение для тестирования, которое всё не доходили руки собрать.
Принесли баг с синей кнопкой.
Джун: принудительно на шару задает цвет, тратит одну минуту и дальше разгребает задачи в поте лица.
Сеньор: ставит на стоп текущие таски, проводит ресёрч, непринужденно выкачивает девтулзы, экспериментирует с эмуляторами, принудительно задаёт цвет, тратит весь день, уходит домой, профит.
Ну и как ваш джун проверяет, что кнопка стала чёрной?
@@pepelsbey по радостным крикам "ура, заработало" ) (ну шутка же, ну)
А если серьёзно, то для полноты картины не хватает упоминания веб сервисов с живыми девайсами, тот же бравзерстек (правда они совсем ошалели и бесплатно теперь только одну минуту дают, что непригодно для отладки). Удобно когда под рукой нет ни мака, ни айфона, ни времени на выкачивание гигов интернета.
Можно будет отдельное видео записать про другие способы, но этот самый удобный, если есть подходящая техника.
@@HomaFromPTZ мало того что одну минуту, так она ещё и считается сразу, ещё до того как устройство загрузится, остаётся порой секунд 30, плюнул и купил макбук, так дешевле
@@pepelsbey Хорошо, когда есть реальные устройства на работе. Когда не было, то обычно все заканчивалось кличем в общий рабочий чатик. Там, как правило, было несколько человек с айфоном. Их и эксплуатировали)
Я предпочитаю пользоваться BrowserStack. Да, этот сервис иногда тормозит, но исправить ошибки на самых разных платформах позволяет. И да, Developer Tools там тоже есть :)
И для отладки JavaScript, исходники в виде maps приходится делать доступными внешнему миру? Не секьюрно. Или там есть возможность проброса в локалку?
@@peace-jn9nl есть. Ты можешь смотреть свой сервер, будто ты локально работаешь, это очень удобно)
@@peace-jn9nl есть проброс на локалку. Секурно
спасибо apple которая решила что мне нужен комп за 100к+ просто для открытия сафари
150к+
Это ваша работа - разрабатывать кроссбраузерные и кроссплатформенные интерфейсы. Текстового редактора на Линуксе для этого не достаточно. Самый дешёвый, но весьма мощный Macmini на M1 стоит 75 000 рублей. Можно купить б/у ноут, или тот же Macmini ещё дешевле.
75 или дешевле
@@pepelsbey если человек идёт работать водителем депутата, у него обязательно должен быть свой майбах?)
почему то всё заводится везде кроме сафари. ну да ну да проблема в нас что мы ноем)))
увы, проблема не в разработчиках.
Буквально вчера гуглил как открутить девтулзы на мобильном телефоне. Спасибо большое за видео)
Узнал сколько весит XCode, спасибо Вадим))
ЭТО ПРОСТО АХРЕННЕНННООООО !!!! ЭТО ТАКОЕ ОТКРЫТИЕ ДЛЯ МЕНЯ!!!! ОГРОМНОЕ СПАСИБО, Шикарная тема!!!! Мега крутая!!!! Работаю в маленькой продуктовой компании и беда с айфонами присутствует. Теперь этой боли не будет!!!!!!!!
Видео охонь!) пару моментов:
1. Можно спокойно поставить MacOS на виртуальную машину, а там уже Safari (тут уже отписались про это, не совсем легально, да, но если нет возможности, то других вариантов нет) и Xcode с эмулятором , но тут конечно для комфортной работы потребуется комп помощнее, чем офисный вариант
2. Вадим, пожалуйста, поменьше переключений камер "слева-справа". Идеально было раньше - когда фронтально одна камера
P.S. всё ещё ждёмс видео "делаем табы по феншую"
но этот рассказ охонь!
А мне понравилась смена ракурсов, он еще так раз, типа не успевает за сменой камер, и повернул голову)
Это новая студия, я пока разбираюсь как снимать удачно
Очень нравится ваш канал, надеюсь будут выходить новые видео.
За 5 лет работы на одном проекте с кросс-платформенным приложением сделал вывод - эмулятор не всегда правильно показывает как будет на реальном девайсе, и так же справедливо обратное утверждение. И опять же, артефактов при отладке тоже хватает, меняешь свойства в инспекторе сафари, вроде все ок, а когда применяешь изменения в коде и обновляешь страницу - бац, не работает.
Короче, все перепроверять приходится по несколько раз и эмулятор - не панацея, приходится содержать еще зоопарк реальных девайсов)
Судя по 5 годам, это касается кросс-приложения, созданного на React Native или Xamarin? Интересно, с Flutter те же грабли? Существуют ли проблемы, которые принципиально не отловить без устройства, запустив приложение в эмуляторе на макоси?
За твою позицию респект - удачи тебе во всем человек!
Лучший преподаватель . Понятно и доступно изгалаете материал
Спасибо!!!, было очень полезно👏
Да недавнего времени в компании использовали BrowserStack. Теперь переехали на LambdaTest. В целом разработка происходит в хроме. Изредка открываю какие-то сложные моменты на реальных мобильных устройствах, чтобы убедиться в своих решениях и пощупать интерфейс в реальном окружении. Все кроссбраузерное тестирование ложится на плечи тестировщиков. Сафари в своё время попил не мало крови, особенно когда делал текстовый редактор на мобилке с залипающим меню форматирования текста …
Именно из-за подобных проблем и перешел на бекенд) Вадим, спасибо! Скинул видос друзьям фронтендерам
спасибо, жаль не было этого видео 5 лет назад :D
Спасибо, очень полезное видео! Ёще добавлю, есть сервис appetize там реальный эмулятор IOS различных версий на разных устройствах + немного andrioida
Вадим, спасибо за новые видео и за гражданскую или лучше человеческую позицию! Как QA немного забавно было смотреть именно это видео - кажется, что это супер очевидные вещи. Видимо, со временем внутри происходит автоматическое обесценивание себя (дети совка 🥲). А вообще очень годный контент. И человек хороший. Peace be upon you!
Спасибо Вадим. Очень интересно!
Тоже нашел в продашене у нас синюю кнопку, но все никак не выдавали таску, чтобы разобраться, вот оно в чем дело ))
Отличный выпуск, спасибо! Очень доступно, без лишних деталей, но тема раскрыта)
Сам пользуюсь этими инструментами, но есть интересные особенности:
десктопный Safari не даёт отлаживать содержимое WebView в нативных приложениях на iOS. Но если запускать приложение в эмуляторе, то проблем не будет.
И похожая проблема с Android: чтобы отлаживать WebView в десктопном Хроме, нужно в нативном приложении специально дать разрешение.
Было бы интересно ещё обсудить инструменты для «перехвата» и изменения реквестов/респонсов на локальной машине. Начиная с Overrides в Хроме, закачивая прокси (Charles, Proxyman).
Бывает полезно, чтобы отладить JS на чужом сайте, или подставлять нужные ответы от API, иногда такие штуки очень помогают.
Мне в основном хватало CrossBrowserTesting. Пришлось только один раз воспользоваться Mac mini.
Тестирование это тоже искусство и если есть команда то лучше конечно иметь под рукой хотя бы пару тестировщиков, а если нет то придется потратить время и все проверить самому и сильно доверять эмуляторам тоже не стоит не всегда они могут показать проблему. На счет Safary это отдельная тема он современный IE как то была заморочка со шрифтами везде норм но в нем откуда то вылезла жирная обводка.
супер вовремя, вчера качал хкод, плача и рыдая, в итоге не выдержал - отменил загрузку
Посмотрела Ваше последнее видео о войне. Хочу сказать огромное СПАСИБО Вам, Вадим, за то, что говорили об этом и не молчали, как многие другие. Это очень важно! Надеюсь, что война закончится в ближайшее время. Как раньше уже никогда не будет, но мы теперь знаем, КТО ЕСТЬ КТО. И надежда о том, что в России есть такие люди как Вы, еще жива. Спасибо Вам.
Согласен. Моё сердце с вами, мои дорогие.
Отличное решение наболевшей проблемы!!! Спасибо автору!!!
очень интересное видео!!
Буквально пару часов назад появился вопрос о проверке мобильной верстки в эмуляторе или на реальном устройстве, и тут выходит это видео) Спасибо!
место IE занял Safari
Вы хотите сказать, что у Safari 90% рынка и браузер перестали разрабатывать на 5 лет? Нет конечно. Это была главная проблема IE, которая вызвала стагнацию рынка. Это совсем не так с Safari.
Спасибо, это было очень информативно
спасибо большое за информацию!
Спасибо, Вадим.
спасибо за видос. В этот раз актуальный контент. Пользуюсь тулзой ResponsivelyApp для эмуляции в ios.
К сожалению, вы просто ресайзите экран десктопного Safari в этом инструменте. Вы не можете получить реальный рендеринг в iOS без симулятора или реального устройства.
Эпл всегда был леворезьбовым) Так что да, для тестирования мак нужен.
Была бы у Chrome похожая доля - все бы на него жаловались. Главное, что нет нездоровой монополии.
Макбук то не нужен. А вот iphone - да. Это видео только доказывает это.
У меня старый айфон и ios-safari-remote-debug-kit для отладки. Правда там, действительно, целую статью можно писать по настройке, чтобы покрыть все нюансы такого подключения. Конечно, с макбуком было бы легче, но на Win/Lin вполне можно отлаживать.
Нужен вам макбук или нет - это вы сами решайте. Но то, что он позволяет получить вам все нужные браузеры без головной боли - это факт.
@@pepelsbey где же все то? Вы же сами показываете, что в iOS свои стили и баги там тоже свои бывают(тот же скроллинг). И пользователей айфонов более, чем дофига. Айфон - необходимое требование сегодня, МакБук - нет. Дебажить айфон можно и без него.
С фактом, что проще будет купить ненужный девайс, а не настраивать костыли я и не спорю - каждый сам решает.
Спасибо за видео, Вадим! Балдеж!
Спасибо! Очень полезно :)
Мне стыдно, я не знал и не думал что есть такая возможность! Вадим, вы не устаёте удивлять - делясь своим опытом! Низкий поклон!
Полезно, спасибо
Мобильный Safari та еще шляпа. Например, скрытие появившегося в iOS 15 Tab Bar'а не тригерит resize вьюпорта. Т.е. если у тебя приложение размером в один viewport, то у тебя либо Tab Bar всегда виден либо унылая полоса внизу экрана. Зачем, почему, а главное на..уя?
А так, по сути покупал iPhone только ради дебага проектов) Теперь нужно еще и мак покупать. Удобно.
Это хитрый ход, что бы люди (разрабы) покупали их продукцию и делали все как у людей
@@rodigy 100%, меня также развели, сидел спокойно на виндоусе, пока заказчики не начали жаловаться, сначала айфон, потом макбук, теперь айпад, везде свои приколы. А так без разницы на чём работать, хотя виндоус привычнее
Всем сердцем не люблю МакОс, неудобно, неприятно работать и абсолютно не хочется привыкать к такому) на работе для таких случаев есть макМини и реальные устройства два айпада и несколько айфонов у коллег. Но каждый раз, когда находится очередной баг в эпл - день будет плохой). На винде и на андройд всё легко, понятно и удобно, на мой взгляд. Жду обновление сафари на винде, чтобы тестировать подобное)
Золотые слова, брат
работать на винде без нормального терминала, соболезную
Отлично всё рассказали, сам лет 7 назад с этим столкнулся, посмотрел видос - прямо ностальгия. Только иметь реальный MAC совсем нет необходимости, Windows+VmWare/VirtualBox с легкостью решают эту проблему, да производительность, конечно, хромает - но для отладки верстки хватает с головой. Ну и как ещё одно решение, хакинтош - целая наука, на которую не вижу смысла тратить время, когда можно всё сделать за 5 минут на винде. Но если есть средства, то, да лучше купить макбук и не знать вообще проблем.
Поставить под Виртуалкой МакОСЬ на АМД процессоры это такой геморой, что просто слов нет. Я перепробовал разное - так и не встала. А вот на реальном железе АМД поставилась у меня за 20 минут без каких либо плясок. Тут мне повезло, нашлась соответствующая готовая конфигурация под мое железо, кто-то уже настроил.
Ну согласись, что все это костыли, и ещё нужно знать как это устанавливать. А если не получилось, придется с бубном вокруг этого всего крутиться и прыгать. Сомнительное занятие, легче просто иметь макбук) тем более, если ты разработчик тебе либо могут выдать на работе, либо ты его сам купишь и он отобьется в первые два месяца)
У меня хакинтош под это дело поставлен на отдельный SSD диск, причем на Ryzen 7 3700. Только дата сбивается при переходе из Хакинотша в Венду.
Нелегально, хрупко (
@@pepelsbey Всё верно. Но это хотя бы дает возможность проверить и найти проблему на Сафари :) Работать на таком постоянно - ну его нафиг.
Разница между симулятором и эмулятором в том, что первый иммитирует только софт, который может быть на том или ином телефоне. Эмулятор же, в свою очередь, иммитирует как софт так и само "железо", то есть он более близок к реальному девайсу чем симулятор
Огонь! Невероятно полезная штука для проверки и отладки!
Хакинтош - это головная боль. Я ставлю мак ос на виртуальную машину. Делается это не сложно. Да, не так шустро как на реальном железе, но за то доступно всем. То ли ещё будет, когда мак ос перестанут делать для x86. Сейчас у меня Monterey, на virtualbox под линуксом. На винде работает чуть хуже.
Интересно, чем хакинтош на виртуальной машине больнее хакинтоша на реальном железе? Виртуалки пробовал с перерывом в 10 лет, наивно полагая, что времени для прогресса прошло достаточно, оба раза железо было хоть и не топовым, но актуальным и шустрым. Особого прогресса в сфере виртуальности обнаружено не было, тормоза, вгоняющие в депрессию.
Playwright с webkit иногда спасает, но не панацея, конечно. Боль.
как же доступно изложил. знал о таком но все же)
Есть сервисы (не реклама) предоставляющие доступ к физическому устройству с Сафари и всеми другими кейсами. Можно, даже правильно, не иметь весь зоопарк устройств. А то вот жалуются что на Сяоми, когда ссылку открывают в телеграмм что-то там дёргается на встроенном китайском браузере... Хорошо что Китай один, но это не значит что я должен иметь по каждой железяке со всего мира.
Там тоже не все так гладко, как хотелось бы.
Ну там как правило всё лагает и платно, не очень дешево, проще девайс затарить или эмулятор
@@mit7871 зависит от задач. Если на постоянной основе, то лучше обзавестись (выбить из компании, аргументировать, что не могу проверить для господ с айфонами). А если разово, то хватит и триала, лаги можно потерпеть.
Я сталкивался со случаем когда баг не воспроизводился в одном таком сервисе. Чтобы он появлялся, нужно было тыкать в реальный тачпад эпл устройства. Так что сервисы это конечно круто, но не панацея
6:35 Ну, не знаю, не знаю... С первых минут подумал про user agent style sheet, и что там по дефолту стоит color: blue или типа того. Он постоянно и везде бесит, для этого существуют всякие css-reset. На ссылках тоже есть такое. И маржины-паддинги у половины тегов.
Однако, чтобы у свг работал color, необходимо в свг коде прописать color=currentColor. Видимо, мобильный сафари работает в обход этого правила. Вот это уже стрёмно.
Всё в порядке с currentcolor, просто в браузерных стилях стоит голубой цвет для текста в кнопках
Еще одна причина в пользу мака. До этого считал, что он нужен только чтобы реакт нейтив приложения компилировать
Вадим возвращайтесь, нам Вас очень не хватает((((
Невероятно!!! Полезность информации зашкаливает, спасибище!
А нельзя ли использовать нормалайз чтобы сбросить все стили? Или я чего то не понимаю?? Заранее прошу строго не судить за вопрос, потому как я ещё совсем новичок во фронтенде
А что делать с хром на iOS
Тоже бывают кейсы неприятные когда ТОЛЬКО на айфоне хром бредит(
часто ещё потому что ставят chrome beta для ios
@@liringea сам факт того что дебажить хром на мобильном iOS нереально
Еще есть в инете готовые образы для VMWare c macOS и XCode эмулятором.
Для случаев "раз в месяц проверить" - пойдет.
Иногда жрет проц 4 ядра на все 100%, похоже на баг, решения найти пока не смог.
Я просто как-то не привык пиратить ОС для тестирования
@@pepelsbey А я просто как-то привык для тестирования иметь возможность скачать легально триал и проверить что-надо)
Спиратить по-быстрому - это не триал, это спиратить по-быстрому )
Спасибо!
Справедливости ради, так же можно и мобильный Firefox отлаживать в девтулзах десктопного Firefox подключив телефон через шнурок.
Не пробовал! Спасибо за идею для видео
Если система мощная, то VMWare выше крыши для тестов, производительность более чем приемлимая
Тут дело не в мощности, эмулировать macOS в VMWare просто нелегально, её нужно ломать для этого.
@@pepelsbey да, есть такое)
Определенно стоит упомянуть, что проблема с дефолтным цветом кнопки в большинстве кейсов может быть решена reset-ом.
Не ресетом, а нормалайзом. Я лично избегаю глобальных стилей на проектах, но суть этого видео конечно же в другом: браузеры разные и нужно иметь возможность тестировать во всех.
Никуда не уверен но то что с Маком фронтендеру будет отлично супер это да. Все современные языки программирования. NodeJS/Go/Dart(Flutter) - без проблем под MacOS. Кросплатформенная Моб разработка этот тот случай что никуда. Андроид и Айос одновременно собирает только Мак.
Системное программирование C++/C/Rust - тут понятное дело Linux. Вообще для бекенд разработки и Linux хороший выбор Dell Latitude
GameDev - если десктопный то тут Одна ОС для Лаунча игр это Windows - соответственно тут какой то Lenovo Legion будет хорошим выбором
OpenCore позволяет накатить много разных осей на одну железяку. Если железяка - это мак, то все будут работать и так, а вот немак надо выбирать максимально совместимый с маком по железу, зато тут можно выиграть по мощи за те же деньги или по деньгам за ту же мощь )
Подскажите, на 5:54 что за клавиша АИЧ ?
Клавиша H (эйч), от слова hide (спрятать)
1. Привет, а что насчет обнуляющих стилей, вы их не используете?
2. Пожалуйста, приведите пример похожего случая "посложнее", который так легко не исправить.
Я стараюсь избегать ресетов и нормалайзов, это глобальные стили, от которых не хочется зависеть. Но иногда обращаюсь к нормалайзу как к сборнику рецептов.
@@pepelsbey странно, их задача, вроде, в том, чтобы не зависеть от офигенных идей разработчиков браузеров по поводу дефолтных стилей...
Я работаю с разработкой Гибридных приложений (Angular + Ionic). Например, теже самые пуш нотификации работают только на реальных девайсах. Я работу с нативными плагинами ( трекниг беграунд локации, просто локация и тд) маст хев нужно проверять на реальных девайсах
Приветствую Вадим. Когда возобновятся выпуски? Они просто необходимы
Когда закончится война и не стыдно будет говорить о фронтенде
Да, у сафари с кнопками особые отношения)
И не только с кнопками)
Вадим, для ios работает и без шнурка, если ноут и телефон в одной сети;)
Привет Вадим! Я не понял только как свойство "color" подействовало на svg. Там разве цвет не задаётся через "fill" и "stroke"?
Там внутри написано fill=currentcolor, то есть заливка наследует значение CSS-свойства color. Проблема именно в этом - у кнопки на iOS цвет текста по умолчанию синий.
спасибо большое, буду знать, что так тоже можно :)
Жаль видеть что ты перестал выпускать видео, надеюсь ты в порядке.
Жаль, что война началась, а видео это ерунда ruclips.net/video/TwlklIjvB88/видео.html
Принцип простой) реализация кончено больная боль) пока спасал browserstack)
Думал о покупка Mac mini) а мониторы тоже поменять надо, потому что их ppi не подходит)
Свежий Macmini на M1 за 75 000 рублей вполне мощный и хороший вариант
@@pepelsbey А монитор подходящий (4к минимум) к этому Macmini за сколько можно купить? MacOS же не умеет шрифты нормально рендерить на full hd мониторе.
Использую browserstack, все сделано за вас, все платформы, все популярные браузеры, модели iOS, MacOS, Andriod, Windows. Так что это хорошая альтернатива всем этим танцам с бубном
Хорошо, что у вас есть доступ к Browserstack, но это всё-таки не полностью заменяет тестирование на реальном устройстве - разве что позволяет не ставить эмуляторы. Ну или если у вас Windows, то даёт доступ к браузерам Apple.
Ты единственный у кого я включил колокольчик. И да, классное видео, Спасибо!
Привет, подскажи плз как быть с плавающей панелью в сафари на телефоне при задании блока 100vh? Эта панель постоянно плавает и не получается настроить корректно.
По спецификации vh - это именно высота экрана без учёта панелей браузера, об этом стоит помнить. Проблемы бывают не только с vh, но и с vw, который не учитывает ширину полос прокрутки и можно легко получить горизонтальный скролл. В будущем это исправится с новыми единицами измерения svh, lvh, dvh, они уже в бете Safari 15.4 twitter.com/jensimmons/status/1494377603142197255
@@pepelsbey теперь осталось понять или дождаться как это фиксить в стандартом браузере от самсунга
сафари это боль, прошу знакомого, полключаюсь к его макбуку через удалённый рабочий стол и там уже отлаживаю
Вадим, а как работает кнопка в инспекторе в Chrome слева от вкладки Elements? Она просто меняет размер окна браузера, оставляя текущий движок?
Да, это простой ресайз окна и ещё изменение плотности пикселей экрана, не больше.
Движок тот же, а вот мобильный режим эмулирует неплохо. Работает мобильные медиа-выражения вроде (pointer: coarse), можно проматывать свайпом мышкой. Весьма полезно для базовой разработки. В Сафари, например, только меняется размер экрана/плотность пикселей и ничего больше.
@@pepelsbey еще юзер-агент подменяется на мобильный
Я даже не подозревала, что так можно - отлаживать прямо на телефоне😶 воу...
Погодите, интересно. Вадим, я может пропустил, но почему основной браузер - Firefox?
Просто любопытно. Хром с навесками в виде тулзов вроде как очень даже универсален. Поделись, плиз опытом
Ps. Кто на Реакте - пригодится. В работе с AntD попадаются сюрпризы, которые выскакивают на мобилках и симулятор меня не раз выручал;)
Чтобы поддерживать разнообразие браузерных движков и кроссбраузерность своего кода. А ещё это браузер, в котором есть некоторые уникальные решения, которые помогают мне удобнее пользоваться вебом.
Именно по этому купил air м1 но был приятно удивлен и автономной работой и функционалом - сейчас на Винду не возвращаюсь даже
Так была же какая-то фигня, которая сбрасывает все стили и приводит в похожий вид на всех платформах. Почему она здесь не работает?
Я стараюсь избегать ресетов и нормалайзов в своей работе - не хочется зависеть от глобальных стилей. Но иногда пользуюсь нормалайзом как справочником.
Почему не использовать ngrok для этого всего?
Если вы про локальный сервер и IP-адрес, то это сильно проще, чем гонять туннели через интернет. В остальном это никак не помогает ни с эмуляторами, ни с устройствами. Но в целом - да, есть такой инструмент, иногда удобно :)
Вадим, куда пропал, все ли хорошо? Вот бы стрим там, или видос про верстку...
Война идёт, Роберт, всё очень плохо. Пока не до вёрстки
@@pepelsbey на веб-стандартах ведешь же подкасты, или это другое?
Другое: туда я прихожу пообщаться с друзьями (это важно сейчас), это сравнительно просто записывать без картинки, плюс это не лично мой проект и решение вернуться было общим.
@@ГербертГерберт-о4э каждый сам решает где эта грань находится между тем, это ок, а где нет. Вопросы есть к тем, кто просто живут как ни в чем не бывало, будто бы их это никаким образом не касается или даже вообще не в курсе что что-то произошло
А я надеялся тут будет волшебный способ запустить safari на винде))
Машина времени в 2007-2012 годы, разве что
Эх, вот бы уже все пришли к единому нерушимому стандарту))) мечты-мечты)))
Это веб, тут есть единые нерушимые стандарты, а есть отдельные платформы, которые в праве иметь свой взгляд на удобство пользователей. Так всегда было и будет, просто примите )
@@pepelsbey золотые слова)
Интересно что в пункте разработка в сафари айфон показывается - а сайты открытые в сафари не видны(
для этого в настройках сафари на телефоне надо включить веб-инспектор
Какая неожиданность, опять в браузерах все нормально, а в сафари THINK DIFFERENT
У всех браузеров есть свои особенности. Вопрос в том, знаете вы - их или нет. Можете ли проверить, понять и отладить - или нет. Видео об этом, другие стили для контролов форм - не баг.
@@pepelsbey Да, я полностью согласен. Комент к тому , что не удивительно что примером оказалась проблема в сафари
Этот ваш safari такая боль..
Бывает так что 😮 ЭТО ЧЁ ТАКОЕ, ВООБЩЕ?
Возможно что эмулятор позволяет полностью запустить копию той машины, которую вы пытаетесь эмулировать. А симулятор - просто симулирует какое-нибудь состояние какого-нибудь устройства :)
Надеюсь и жду что канал реанимируется.
Кажется десктопный сафари умеет эмулировать девайс мобильный и его баги или, по крайней мере, часть их
К сожалению, это просто ресайз окна, там нет ничего из мобильного браузера, насколько я знаю
@@pepelsbey в последний раз я там воспроизводил баг который только в мобильном сафари есть. Тоже раньше думал что это только ресайз
а как ты добыл external ip? я че-то не могу понять
4:14 - локально запущен сервер Browser Sync
browsersync.io/docs/command-line/
Или ещё так: npx internal-ip-cli --ipv4
Да, пришлось научиться отлаживать в симуляторе ios. Вот прям на днях пытался решить проблему зависания скроллов внутри модалки. Оказывается мои пакетные функции body-scroll-lock на ios ставят body не overflow hidden, а position fixed. Получается fixed внутри fixed, возможно проблема в этом. А дело всё в том, что до недавнего времени именно на ios не работал overflow hidden на body.
Дякую Дуже. Гарне відео. Проте емулятор частіше завсе для IOS не показує проблеми реального девайса на IOS тому це 50 на 50
Единственное, что для Андроид Студио нужно много памяти - моему iMac прям было плохо
У меня, к счастью, 32 Гб на M1 Max, так что должно хватить. Но понимаю, что не у всех такая роскошь.
А зачем макбук, если можно накатить макось на виртуальную машину и тестировать там?
Затем, что это нелегально и хрупко. Но вы решайте для себя, конечно же.
Лайфхак: ролик служит доказательством того, что руководство должно тебе предоставить рабочий Мак
Всё так, ссылайтесь на меня
тобишь без xcode никак? и cli версия не катит?(
CommandLineTools обычно достаточно, я всегда всем говорил, что не нужно ставить Xcode. Но если нужен симулятор - вариантов нет.
@@pepelsbey ну я как раз о симуляторе, эх, качаю уже...
@@pepelsbey спасибо
Видео хорошее. Не понимаю, почему люди всего этого не знают. Это основы отладки. Как на работу вообще берут?…
Да ну не хвастайтесь вы так сильно :) Вы тоже чего-то не знаете, наверняка. И я чего-то не знаю. Давайте сосредоточимся на обмене опытом и не будем показывать пальцем.
Вадім, нам тебе не вистачає( Повернись буд-ласка
Вадим, ты там как?