Я разрабатываю веб-сайт с множеством функций HTML5 и CSS3. Я также использую iframe для встраивания нескольких материалов на свой сайт. Он отлично работает, если я открываю его с помощью браузера Chrome/Firefox/Safari. Однако, если я делюсь на facebook (post/page), и я открыл его с помощью приложения Facebook с внутренним браузером Facebook, мой сайт перепутался.
Есть ли какие-либо инструменты или способ отладки в Facebook Browser? Спасибо.
Вот как вы можете отлаживать себя самостоятельно. Это болезненно, но единственный способ, которым я до сих пор сталкивался.
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 с вашего мобильного устройства и переустановите.
Внутренний браузер, который использует приложение Facebook, по сути является uiWebView. Пол Айриш (Paul Irish) создал простое приложение для iOS, которое позволяет загружать любой URL-адрес в uiWebView, который затем можно отлаживать с помощью инструментов разработчика Safari.
Я нашел способ, как отладить его проще. Вам нужно будет установить приложение Ghostlab (у вас есть 7-дневная бесплатная пробная версия, но за это полностью стоит платить).
Для отладки у вас будут все те же инструменты, что и в Chrome devtools (как это круто!). Например, вы можете настроить CSS и увидеть изменения, внесенные вживую.
Если вы хотите отладить возможную ошибку, вы можете попытаться ее перехватить и отобразить.
Поместите это в самый верх вашего кода:
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 случайную строку.
Перейдите по ссылке и посмотрите, сможете ли вы найти ошибки.
Здесь есть простое описание weinre и JSConsole: http://www.codeblocq.com/2016/03/Remote-Web-Debugging-with-weinre/ Я пытаюсь отладить fb webview с weinre, и он работает довольно хорошо.