Изменить размер окна браузера для целей тестирования

Question

Чтобы проверить внешний вид веб-сайта (реагирующий) с различными разрешениями экрана, я хочу программным образом запускать браузеры с определенным размером окна, чтобы имитировать эти размеры экрана.

Лучше всего было бы изменить размер окна, пока браузер уже запущен, хотя я читал, что функция window.resizeTo() больше не работает в современных браузерах. Я в контексте расширения браузера, поэтому я мог бы также использовать возможности этого. Тем не менее, я не мог найти ничего здесь, что соответствует моим потребностям: https://developer.mozilla.org/en-US/Add-ons/SDK.

Не очень-то удовлетворительное решение будет запускать браузер с фиксированным определенным размером экрана (хотя я не знаю, как это работает, поскольку у Firefox нет таких параметров запуска - https://developer.mozilla.org/en-US/docs/Mozilla/Command_Line_Options#-new-window_URL).

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

Я нахожусь в системе Unix (Mac OS X Yosemite).

редактировать

Я в конечном итоге решить эту проблему следующим образом:

var tabs = require("sdk/tabs"); 
function showPage(tab) { 
    var { 
     viewFor 
    } = require("sdk/view/core"); 
    var win = viewFor(require("sdk/windows").browserWindows[0]); 
    win.resizeTo(dimension.width, dimension.height); 
    tab.on("pageshow", attachScript); 
    tabs.removeListener('open', showPage); 
} 
tabs.on('open', showPage); 

Answer 1

Есть несколько возможных решения:

1. Открыть about:config и убедитесь, что dom.disable_window_move_resize установлен до false. Теперь вы можете изменить размер всплывающих окон:

   var myWindow = window.open("about:blank", "SomeName", "width=300,height=300"); 
   myWindow.resizeTo(200, 400); 
   

2. Используйте и изменить его размер.

3. Возможно, наилучшим образом: используйте window.resizeTo(400, 500) в дополнении. Когда я пытаюсь запустить эту строку в обычной «веб-консоли», которая принадлежит веб-странице, она не работает. Но он работает при использовании «Browser Toolbox», который принадлежит всему браузеру Chrome. Я думаю, что надстройка может иметь эти привилегии.

   Update: Я создал рабочий пример:

   var buttons  = require('sdk/ui/button/action'); 
       browserWindows = require("sdk/windows").browserWindows; 
       viewFor  = require("sdk/view/core"); 
   
   buttons.ActionButton({ 
       id: "resize-window", 
       label: "Resize Window", 
       icon: { 
        "16": "./icon-16.png", 
        "32": "./icon-32.png", 
        "64": "./icon-64.png" 
       }, 
       onClick: handleClick 
   }); 
   
   function handleClick(state) { 
       var win = viewFor(browserWindows[0]); 
       win.resizeTo(500, 500); 
   } 
   

4. Там является "Отзывчивый Design View", а также команды для использования в "Developer Toolbar" (resize to 480 800), но я не знаю, как они могут быть вызваны извне: - /.

5. Дополнения, такие как «Веб-разработчик», могут изменять размер окна. Вы можете посмотреть на их решение: https://github.com/chrispederick/web-developer/

6. Добавить аргументы командной строки -width и -height при запуске Firefox или открытия нового окна.

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

Answer 2

Вы пробовали этот значок? Вы можете выбрать любое устройство, которое хотите, или просто управлять шириной и высотой области просмотра.

Answer 3

Единственное, что я нашел, близкое к изменению размера окна хрома, - это использовать расширение хром, которое может изменять размер окна. Фактическая команда расширение chrome.windows.update(...)

See This

Но я не уверен, что это то, что вы ищете. Если он по-прежнему интересует вас есть, по крайней мере, 2 расширения, которые могут сделать это, что я видел попробовать this.

Answer 4

Этот ответ не очень надежный, так как вам придется редактировать сценарий каждый раз, когда новый элемент добавляется в меню «Инструменты». Это также не полезно для обычного пользователя, так как требуется отредактировать код Python. Это, как говорится, работает, и это может быть полезно для людей, которые не хотят устанавливать надстройку.

1. Установка xdotool: ~ $ Sudo APT установить xdotool
2. Установите питон-gtk2 и питон-wnck: ~ $ Sudo APT установить питона-gtk2 питон-wnck

3. Поместите следующий сценарий, где бы вы хотели хранить ваши сценарии:

   import gtk 
   from random import randint 
   import subprocess 
   import time 
   import wnck 
   
   def main(): 
   
   firefox = subprocess.Popen(['firefox']) 
   
   # start with a maximized screen. If this is undesired, 
   # use code on lines 45 - end, disregaurding the rest 
   sentinal = True 
   while sentinal: 
   
       screen = wnck.screen_get_default() 
   
       while gtk.events_pending(): 
   
        gtk.main_iteration() 
   
       windows = screen.get_windows() 
   
       for w in windows: 
   
        if w.get_pid() == firefox.pid: 
   
         w.maximize() 
         sentinal = False 
   
       time.sleep(1) 
   
   
   # click the 'Tools' menu in Firefox 
   subprocess.call(['xdotool', 'mousemove', '--sync', '300', '80']) 
   subprocess.call(['xdotool', 'click', '1']) 
   time.sleep(1) 
   
   # hover over 'Web Developer' sub-menu 
   # (i.e. Tools -> Web Developer) 
   subprocess.call(['xdotool', 'mousemove_relative', '--sync', '0', '180']) 
   subprocess.call(['xdotool', 'click', '1']) 
   
   # click the responsive design view sub-menu 
   # (i.e. Tools -> Web Developer -> Responsive Design View) 
   subprocess.call(['xdotool', 'mousemove_relative', '--sync', '300', '0']) 
   time.sleep(1) 
   subprocess.call(['xdotool', 'mousemove_relative', '--sync', '0', '300']) 
   time.sleep(1) 
   subprocess.call(['xdotool', 'click', '1']) 
   
   # set your window size here 
   y = ['1280x600'] 
   
   choice = y[0] 
   
   # click the uri bar 
   subprocess.call(['xdotool', 'mousemove', '--sync', '110', '144']) 
   time.sleep(1) 
   subprocess.call(['xdotool', 'click', '1']) 
   
   # tab to the drop-down resolution menu 
   for i in range(0, 3): 
   
       subprocess.call(['xdotool', 'key', 'Tab']) 
   
   # erase whatever is in the resolution menue by default 
   for j in range(0, 15): 
   
       subprocess.call(['xdotool', 'key', 'BackSpace']) 
   
   # enter a random (standardized) screen resolution 
   subprocess.call(['xdotool', 'type', choice]) 
   subprocess.call(['xdotool', 'key', 'Return']) 
   
   if __name__ == '__main__': 
       main() 
   

4. в коде вы видите ([ «xdotool», ... «целое», «целое»]), необходимо сопоставить эти пункты в точках окна Firefox. Другими словами, вы автоматизируете задачу открытия окна с определенным размером экрана, используя Инструменты -> Отзывчивый веб-разработчик -> Раскрывающийся ящик, в который вы можете ввести размер окна и т. Д. Существуют различные инструменты для получения координаты вашей мыши. Я написал это некоторое время назад, поэтому не помню, что я использовал. Google - ваш друг.

5. Вы можете запустить сценарий каждый раз, когда хотите открыть Firefox с определенным размером окна. Кроме того, вы можете создать ярлык .desktop для запуска Firefox с помощью этого скрипта. Было бы легко немного изменить этот код, чтобы аргументы командной строки могли указывать другие размеры экрана или просто создавать несколько сценариев для каждого размера экрана.