Вопросы Теги

как проверить iPad хром? либо из iMac, либо непосредственно на iPad хром [дубликат]

Проблема с вашим вопросом не имеет ничего общего с программированием, JavaScript или D3 ... проблема является базовой концепцией dataviz (поэтому я добавил тэг в ваш вопрос ):

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

Если вы используете бары со временем по оси x, вы столкнетесь с проблемами:

  1. Позиционирование панели: левое поле панели всегда будет на дату, когда вы задавать. Вся строка будет лежать после этой даты;
  2. Установка ширины полосы: в реальной гистограмме, которая использует категориальные переменные для оси x, ширина не имеет значения. Но в масштабе времени ширина представляет время.

Однако, просто для объяснения, давайте создадим эту гистограмму с временным масштабом (несмотря на то, что это неправильный выбор) ... Вот как это сделать:

Во-первых, установите «ширину» полос во времени. Предположим, что каждый бар будет иметь 10-дневную ширину: 

.attr("width", function(d){
    return x(d3.timeDay.offset(d.date, 10)) - x(d.date)
})

Затем установите положение x на панели до текущей даты, менее половины ее ширины (то есть менее 5 дней в нашем пример): 

.attr('x', function(d, i) {
    return x(d3.timeDay.offset(d.date, -5));
})

Наконец, не забудьте создать «отступы» в шкале времени: 

var x = d3.scaleTime()
  .domain([d3.min(data, function(d) {
    return d3.timeDay.offset(d.date, -10);
  }), d3.max(data, function(d) {
    return d3.timeDay.offset(d.date, 10);
  })])
  .range([0, width]);

Вот ваш код с этими изменениями: 

var keys = [];
var legendKeys = [];

var maxVal = [];

var w = 800;
var h = 450;

var margin = {
  top: 30,
  bottom: 40,
  left: 50,
  right: 20,
};

var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

var colors = ['#FF9A00', '#FFEBB6', '#FFC400', '#B4EDA0', '#FF4436'];

var data = [{
    "one": 4306,
    "two": 2465,
    "three": 2299,
    "four": 988,
    "five": 554,
    "six": 1841,
    "date": "2015-05-31T00:00:00"
  }, {
    "one": 4378,
    "two": 2457,
    "three": 2348,
    "four": 1021,
    "five": 498,
    "six": 1921,
    "date": "2015-06-30T00:00:00"
  }, {
    "one": 3404,
    "two": 2348,
    "three": 1655,
    "four": 809,
    "five": 473,
    "six": 1056,
    "date": "2015-07-31T00:00:00"
  },

];

data.forEach(function(d) {
  d.date = new Date(d.date)
})

for (var i = 0; i < data.length; i++) {
  for (var key in data[i]) {
    if (!data.hasOwnProperty(key) && key !== "date")
      maxVal.push(data[i][key]);
  }
}

var x = d3.scaleTime()
  .domain([d3.min(data, function(d) {
    return d3.timeDay.offset(d.date, -10);
  }), d3.max(data, function(d) {
    return d3.timeDay.offset(d.date, 10);
  })])
  .range([0, width]);

var y = d3.scaleLinear()
  .domain([0, d3.max(maxVal, function(d) {
    return d;
  })])
  .range([height, 0]);

var svg = d3.select('body').append('svg')
  .attr('class', 'chart')
  .attr('width', w)
  .attr('height', h);

var chart = svg.append('g')
  .classed('graph', true)
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

var layersArea = chart.append('g')
  .attr('class', 'layers');


var layers = layersArea.append('g')
  .attr('class', 'layer');

layers.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')

.attr('height', function(d, i) {
  return height - y(d.one);
})

.attr('y', function(d, i) {
  return y(d.one);
})

// .attr('width', function(d, i) {
//   return 50;
// })

.attr("width", function(d) {
  return x(d3.timeDay.offset(d.date, 10)) - x(d.date)
})

.attr('x', function(d, i) {
  return x(d3.timeDay.offset(d.date, -5));
})

.style('fill', (d, i) => {
  return colors[i];
});

chart.append('g')
  .classed('x axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%Y-%m-%d")).tickValues(data.map(function(d) {
      return new Date(d.date)
    })));

chart.append('g')
  .classed('y axis', true)
  .call(d3.axisLeft(y)
    .ticks(10));

172
задан Titouan de Bailleul 21 May 2013 в 16:41
поделиться

14 ответов

Отказ от ответственности: я работаю в браузере. [Подтверждено], разрешено ли вам публиковать это сообщение ( Могу ли я предложить продукт компании, работающей в? )

Отладка Safari на iOS (не для Chrome на данный момент, читайте дальше для более подробной информации.)

Как это работает?

  • Вам нужно запустить сеанс на любом реальном устройстве (есть эмуляторы, но вам нужно начать сеанс на реальном устройстве) на BrowserStack, скажем, iPhone 6S - Safari / Chrome (пока нет devtools для Chrome, но он находится на нашей дорожной карте)
  • Введите URL
  • Вы можете запустить DevTools для проверки веб-страницы, открытой на удаленном устройстве BrowserStacks.

Использование DevTools с Real Phones

Наведите указатель мыши на элементы, отредактируйте HTML, CSS, как и рабочий стол браузера devtools.

Выполнение JavaScript в реальном телефоне с помощью DevTools

Перейдите на вкладку Console, выполните код JavaScript, проверьте вывод console.log() и т. д. ...

Вкладка «Сеть», проверить заголовки запросов, ответ и т. д. ...

Поддержка DevTools on BrowserStack?

  • DevTools доступны на: Real Devices - iOS - Safari (DevTools для iOS Chrome находится в нашей дорожной карте) Real Devices - Android - Chrome (на данный момент на устройствах Android доступен только Chrome)
  • Для браузера клиента должен быть Chrome или Firefox. Это означает, что вам нужно использовать браузер Chrome или Firefox в MacOSX или Windows для использования DevTools для браузера BrowserStack.

Примечание. Вам необходимо купить план тестирования на всех реальных устройствах, как бесплатный пользователь, вы получите пару настоящих Android-устройств (включая планшеты) и пару настоящих iOS-устройств (включая планшеты). Также, подчеркивая слово Real Devices , поскольку они также предоставляют эмуляторы.

Подробнее об этом см. Раздел DevTools на странице для мобильных устройств .

101
ответ дан Community 4 September 2018 в 09:59
поделиться

Vorlon.JS лучше всего подходит для удаленной отладки iOS или любого другого клиента.

  1. Просто установите его глобально с помощью npm i -g vorlon
  2. Запустите сервер, используя vorlon
  3. Когда сервер запущен, откройте http: // localhost: 1337 в вашем браузере, чтобы увидеть панель инструментов Vorlon.JS
  4. . Последний шаг - включить Vorlon.JS, добавив этот тег скрипта в ваше приложение: <script src="http://<yourExternalIP>:1337/vorlon.js"></script>
  5. Все подключенные клиенты, например iPhone, Android станут доступными в списке клиентов на панели инструментов Vorlon.JS

Обратите внимание, что этот подход также можно использовать для отладки приложений, не работающих на localhost с помощью ngrok. Подробнее см. В https://stackoverflow.com/a/45443203/2073920

Ссылки

http://vorlonjs.com

https://ngrok.com

Отказ от ответственности

Я просто пользователь, и я не являюсь аффилированным лицом с Vorlon .JS и ngrok

2
ответ дан Abdul Rauf 4 September 2018 в 09:59
поделиться

Я использую remotedebug-ios-webkit-адаптер, хорошо работает для меня с IOS и отладчиком, открытым в Chrome на Windows 10.

Будет рад, если он поможет кому-то Ссылка

-1
ответ дан Beny 4 September 2018 в 09:59
поделиться

Многие удаленные консоли работают нормально. http://farjs.com - мой проект, и я смог успешно отлаживать проблемы, специфичные для Crome iOS, и не выполнялся в сафари, используя его. (и, возможно, все другие мобильные браузеры)

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

Вместо этого вы можете открыть одну вкладку на странице, которую вы будете отлаживать, а другую на farjs.com, а затем нажать «букмарклет»

Скопировать буквенный код JS, вернуться к первая вкладка со страницей, которая должна быть отлажена, и вставить код букмарклета в строку местоположения.

Последний шаг - прокрутить до начала строки местоположения и добавить «javascript:», поскольку Chrome удалит его.

4
ответ дан BlueStory 4 September 2018 в 09:59
поделиться

Примечание: у меня нет никакой связи с создателями Ghostlab Vanamco вообще.

Для меня было важно отлаживать проблемы, специфичные для Chrome, поэтому я решил найти что-то, что могло бы помочь мне с этим , Я закончил счастливо бросать свои деньги в Ghostlab 3 . Я могу тестировать мобильные браузеры Chrome и Safari, как если бы я просматривал их на своем рабочем столе. Он просто дает мне адрес локальной сети для использования на любом устройстве, которое я хотел бы отлаживать. Каждое приложение, использующее этот адрес, появится в списке в Ghostlab.

Очень рекомендуется .

0
ответ дан Brandon Durham 4 September 2018 в 09:59
поделиться

Выбранный ответ предназначен только для Safari. В настоящий момент невозможно выполнить реальную удаленную отладку в Chrome на iOS, но, как и в большинстве мобильных браузеров, вы можете использовать WeInRe для некоторой простой отладки. Это небольшая работа по настройке, но позволяет вам проверять DOM, видеть стиль, изменять DOM и играть с консолью.

enter image description here [/g4]

Чтобы настроить:

  • Установить nodejs
  • npm install -g weinre
  • weinre --boundHost -all-
  • Открыть http: / / {wifi-ip-address}: 8080 / и скопировать код целевого скрипта
  • Вставить тег сценария на свою страницу (или использовать букмарклет)
  • Нажмите ссылку на debug client user interface (http: // {wifi-ip-address}: 8080 / client / # anonymous)
  • Когда вы получаете зеленую строку под Клиенты , браузер подключен

Этот букмарклет немного сложнее для установки. Это проще всего, если вы включили синхронизацию с закладками для настольных и мобильных Chrome. Скопируйте URL-адрес букмарклета с локального сервера weinre (как указано выше). К сожалению, это не работает, потому что он неправильно закодирован. Поэтому откройте консоль JavaScript и введите: 

copy(encodeURI('')); // paste bookmarklet inside quotes

Теперь вы должны иметь букмарклет с URL-адресом в вашем буфере обмена. Вставьте его в новую закладку в разделе Мобильные закладки . Назовите это weinre или что-то простое. Он должен быть синхронизирован с вашим мобильным телефоном довольно быстро, поэтому загрузите страницу, которую вы хотите проверить. Затем введите имя закладки в url-bar, и вы должны увидеть букмарклет как предложение автозаполнения. Щелкните по нему, чтобы запустить букмарклетный код:)

enter image description here [/g5]

205
ответ дан gregers 4 September 2018 в 09:59
поделиться

Я не пробовал, но iOS WebKit debug proxy (ios_webkit_debug_proxy / iwdp) предположительно позволяет удаленно отлаживать UIWebView. Из README.md

ios_webkit_debug_proxy (aka iwdp) позволяет разработчикам проверять MobileSafari и UIWebViews на real и имитировать iOS-устройства через Chrome DevTools UI и протокол удаленного отладки Chrome. Запросы DevTools переводятся в сервисные вызовы Apple Web Service Inspector.

3
ответ дан jiku 4 September 2018 в 09:59
поделиться

В Chromium есть открытая ошибка: https://bugs.chromium.org/p/chromium/issues/detail?id=584905

К сожалению, они зависят от Apple, чтобы открыть API в WKView, чтобы это произошло, после чего , возможно, отладка будет доступна из Safari.

0
ответ дан Noam Rosenthal 4 September 2018 в 09:59
поделиться

Adobe Edge Inspect ( https://creative.adobe.com/products/inspect ) - это еще один способ отладки всех ваших мобильных устройств IOS и Android (без Windows Phone, хотя). Он использует weinre для удаленного контроля / изменения DOM. Это не самый быстрый метод, но он работает в Windows.

0
ответ дан Peter Sinke 4 September 2018 в 09:59
поделиться

Вам также необходимо отключить «Частный просмотр».

Настройки> Сафари> Частный просмотр> ВЫКЛ

2
ответ дан Simon Owen Design 4 September 2018 в 09:59
поделиться

Насколько я понимаю, Google Chrome использует UIWebView iOS iOS, а не полномасштабную реализацию Chrome, как Android-аналог.

9
ответ дан Stephan Leroux 4 September 2018 в 09:59
поделиться

Я рекомендую Vorlon , работает как weinre. Мне нравится пользовательский интерфейс Vorlon, и он поддерживает SSL , мое приложение находится в HTTPS, я пробовал работать с ngrok, ghostlab и vorlon, только vorlon отлично работает.

3
ответ дан Tina Chen 4 September 2018 в 09:59
поделиться

Открыть Safari Desktop iOS

Разработка -> Режим адаптивного дизайна

Нажмите «Другое» в устройстве

Вставьте это: Mozilla / 5.0 (iPad; CPU OS 10_2_1, как Mac OS X) AppleWebKit / 602.1.50 (KHTML, например, Gecko) CriOS / 56.0.2924.79 Mobile / 14D27 Safari / 602.1

Используйте инструменты проверки Safari.

-3
ответ дан user3521314 4 September 2018 в 09:59
поделиться

Даже я ищу ту же функцию, и на сегодняшний день ее еще предстоит реализовать. Однако я могу представить два варианта

  1. . Я заметил, что поведение Chrome и Safari совершенно одинаково; Chrome даже поддерживает гироскоп и другие связанные события, которые поддерживаются Safari. В настоящее время я отлаживаю свое веб-приложение, включив консоль отладки в Safari (через настройки-> Safari)
  2. . Также попробуйте Adobe Shadow, которая позволяет удаленно отлаживать / проверять и синхронизировать.

НТН.

0
ответ дан vine'th 4 September 2018 в 09:59
поделиться
Другие вопросы по тегам:

Похожие вопросы: