Сайт работает на ноутбуке, но не работает на мобильном браузере

Question

Я разработал веб-приложение, используя стек MERN.Этот веб-сайт: www.javascriptmazes.com .По какой-то причине, когда я открываю эту ссылку в браузере моего ноутбука, все работает как положено.Однако, когда я пытаюсь открыть тот же веб-сайт на своем мобильном телефоне (Samsung), страница не загружается должным образом, и я вижу только белый фон браузера.

Я не знаю точно, как отлаживатьна мобильных телефонах, так как я всегда делаю отладку на своем ноутбуке.Однако я зашел на этот веб-сайт https://www.mobilephoneemulator.com/ и попытался загрузить указанную веб-ссылку в эмуляторе, и отобразились следующие сообщения об ошибках:

Смешанное содержимое: страница в 'https://www.mobilephoneemulator.com/' был загружен через HTTPS, но запросил небезопасную таблицу стилей 'http://www.javascriptmazes.com/static/css/main.1e4202c6.css'. Этот запрос был заблокирован;содержание должно быть подано по HTTPS.emulate.php? url = http% 3A // javascriptmazes.com & user_agent = Mozilla / 6.0 (iPhone% 3B CPU iPhone OS 8_0, как Mac OS X) AppleWebKit / 536.26 (KHTML% 2C, как Gecko) Версия / 8.0 Mobile / 10A5376e Safari / 8536.25& device = Apple-Iphone6: 1 Смешанное содержимое: страница в https://www.mobilephoneemulator.com/' была загружена через HTTPS, но запросил небезопасный скрипт 'http://www.javascriptmazes.com/static/js/main.5d7eb463.js'. Этот запрос был заблокирован;контент должен обслуживаться по протоколу HTTPS.

Как доставлять контент через HTTPS?и Как я узнаю, какой конкретный контент необходимо изменить?

Я использую MERN .... так что моя клиентская сторона использует React .... также, если вы посмотрите на веб-приложение, я использую многоHTML-холст и сценарии для рисования на HTML-холсте .... Я не знаю, имеет ли это отношение или нет, но просто хотел упомянуть об этом на всякий случай ...

КАК решить эту проблему?

Answer 1

Белая страница, которую вы видите на своем телефоне (Samsung), - это то, что люди видят в Chrome на Windows.Я бы научился использовать средства удаленной отладки вместо того, чтобы пытаться использовать эмулятор.

Answer 2

Хорошо, я нашел проблему.Redux Dev Tools были причиной проблемы.Я изменил его с:

var store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

      )
     );

на:

var store = createStore(
      rootReducer,
      initialState,
      compose(
        applyMiddleware(...middleware),
        window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
      )
     );

, и теперь он работает на моем мобильном телефоне ....