Как отлаживать встроенный браузер Facebook (мобильный)?

Я разрабатываю веб-сайт с множеством функций HTML5 и CSS3. Я также использую iframe для встраивания нескольких материалов на свой сайт. Он отлично работает, если я открываю его с помощью браузера Chrome/Firefox/Safari. Однако, если я делюсь на facebook (post/page), и я открыл его с помощью приложения Facebook с внутренним браузером Facebook, мой сайт перепутался.

Есть ли какие-либо инструменты или способ отладки в Facebook Browser? Спасибо.

Ответы

Ответ 1

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

tl; dr Загрузите приложение Facebook, загрузив страницу на свой локальный сервер, чтобы вы могли быстро выполнять итерацию. Затем распечатайте заявления отладки непосредственно на странице, пока не выясните, что происходит.

  • Получите ссылку на страницу вашего локального сервера, на которую вы можете получить доступ на своем мобильном устройстве (проверьте, работает ли это в мобильном сафари). См. Это, чтобы узнать свой локальный IP-адрес Как получить доступ к веб-сайту, запущенному на локальном хосте из браузера iPhone. Он будет выглядеть примерно так http://192.xxx.1.127:3000/facebook-test

  • Отправьте эту ссылку на своей странице Facebook (вы можете сделать ее частной, чтобы ваши друзья не были похожи на WTF?)

  • Нажмите на ссылку в мобильном приложении Facebook и откроется в мобильном браузере Facebook

  • Поскольку у вас нет консоли, вам в основном нужно печатать отладочные заявления непосредственно на странице, чтобы она была видна. Поместите отладочные заявления по всему вашему коду. Если ваши проблемы связаны прежде всего с CSS, вы можете итеративно прокомментировать материал до тех пор, пока не найдете проблему или не напечатаете соответствующие атрибуты CSS с помощью JavaScript. Например, что-то вроде (используя JQuery)

    function debug (str) {$ ('body'). append ( "<br> " + str);}

  • Возможно, самая болезненная часть. Браузер Facebook кэширует очень агрессивно. Если вы вносите изменения и ничего не произошло, это потому, что содержимое кэшируется. Иногда вы можете устранить это, обновив URL-адреса, например /facebook -test-1,/facebook-test-2 или добавив фиктивные параметры, например /facebook -test? Dummy = 1. Но если изменения находятся во внешних листах css или js, они иногда будут кэшироваться. Чтобы очистить кэш на 100%, удалите приложение Facebook с вашего мобильного устройства и переустановите.

Ответ 2

Внутренний браузер, который использует приложение Facebook, по сути является uiWebView. Пол Айриш (Paul Irish) создал простое приложение для iOS, которое позволяет загружать любой URL-адрес в uiWebView, который затем можно отлаживать с помощью инструментов разработчика Safari.

https://github.com/paulirish/iOS-WebView-App

Ответ 3

Я нашел способ, как отладить его проще. Вам нужно будет установить приложение Ghostlab (у вас есть 7-дневная бесплатная пробная версия, но за это полностью стоит платить).

  1. В Ghostlab добавьте адрес веб-сайта (или адрес локального хоста), который вы хотите отладить, и запустите сеанс.
  2. Ghostlab создаст ссылку для доступа.
  3. Скопируйте эту ссылку и опубликуйте ее на Facebook (как личный пост)
  4. Откройте ссылку на мобильный и это все! Ghostlab идентифицирует вас, как только вы откроете эту ссылку, и позволит вам отладить страницу.

Для отладки у вас будут все те же инструменты, что и в Chrome devtools (как это круто!). Например, вы можете настроить CSS и увидеть изменения, внесенные вживую.

Ответ 4

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

Поместите это в самый верх вашего кода:

window.onerror = function (msg, url, lineNo, columnNo, error) {
    var string = msg.toLowerCase();
    var substring = "script error";
    if (string.indexOf(substring) > -1){
        alert('Script Error: See Browser Console for Detail');
    } else {
        var message = [
            'Message: ' + msg,
            'URL: ' + url,
            'Line: ' + lineNo,
            'Column: ' + columnNo,
            'Error object: ' + JSON.stringify(error)
        ].join(' - ');

        alert(message);
    }
}

(Источник: MDN)

Это будет ловить и alert ваши ошибки.

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

Перейдите по ссылке и посмотрите, сможете ли вы найти ошибки.

Ответ 5

  • С помощью ngrok создайте временный адрес http & https вместо обычного localhost: 3000 (или другого порта), и вы сможете запускать свое приложение на любых устройствах. Это супер просто в использовании.
  • и как было написано выше всей другой полезной информации, вы должны написать где-нибудь внутри элемента div (в случае React я рекомендую включить onClick для этого div с принудительным обновлением или другой функцией для получения информации, иногда это помогает, потому что JS в FB может быть выполнен раньше, чем ваша информация появляется). Имейте в виду, что оповещения не являются надежными, иногда они блокируются
  • бонус от ngrok за то, что в консоли вы увидите, какие файлы были запрошены, и код ответа (это заменит отсутствие сетевой вкладки)
  • и об iFrame. Если вы используете его на другом домене и полагаетесь на куки - вы должны знать, что браузер в приложении Facebook блокирует сторонние куки
  • тестируйте на Android и iOS отдельно, потому что они используют разные браузеры

exampe in windows console