Перейти к содержимому

Фотография

Консоль разработчика (F12) для тестировщика


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 15

#1 Cleo12

Cleo12

    Новый участник

  • Members
  • Pip
  • 42 сообщений
  • ФИО:Иван

Отправлено 05 марта 2017 - 15:02

Здравствуйте, подскажите пожалуйста чем именно поможет консоль разработчика в тестировании?

Знаю что с помощью консоли можно:

-навести на елемент, посмотреть код, стили, сколько пикселей, сыллку и тд

- responsive посмотреть как отображается сайт в разных расширениях на моб.телефонах, планшетах

- посмотреть в консоли ошибки

- посмотреть во вкладке "network" какие процессы запускаются и какие ошибки выводятся к примеру нажатию на кнопку

 

А как Вы пользуетесь консолью?

И подскажите преимущества Firebug в мозиле над консолью.Спасибо


  • 0

#2 Dalay_LAMO

Dalay_LAMO

    Опытный участник

  • Members
  • PipPipPipPip
  • 265 сообщений
  • ФИО:Дмитрий
  • Город:Санкт-Петербург


Отправлено 06 марта 2017 - 06:25

Здравствуйте, подскажите пожалуйста чем именно поможет консоль разработчика в тестировании?
Знаю что с помощью консоли можно:
-навести на елемент, посмотреть код, стили, сколько пикселей, сыллку и тд
- responsive посмотреть как отображается сайт в разных расширениях на моб.телефонах, планшетах
- посмотреть в консоли ошибки
- посмотреть во вкладке "network" какие процессы запускаются и какие ошибки выводятся к примеру нажатию на кнопку
 
А как Вы пользуетесь консолью?


Собственно, бОльшую часть ты уже описал. Просмотр и редактирование HTML-кода (для разных целей) и стилей. Эмулятор мобильных устройств. Console - просмотр js ошибок, плюс можно выполнять команды. Network - просмотр запросов/ответов, времени выполнения, throttling (эмуляция медленного инета). Application - просмотр и редактирование содержимого LocalStorage (там же можно и куки редактировать, но я юзаю кукименеджер для этих целей). Остальные вкладки не использую.

И подскажите преимущества Firebug в мозиле над консолью.Спасибо


Не знаю таких.
  • 1

#3 checo

checo

    Опытный участник

  • Members
  • PipPipPipPip
  • 400 сообщений
  • Город:Н.Новгород

Отправлено 06 марта 2017 - 07:25

  • В автоматизации - отладка javascript. Когда приходится вебдрайверу передавать большой скрипт строкой, можно сначала отладить в консоли.
  • Вкладка DOM. Иногда для теста нужны данные, которые не отображаются на экране (например, скрытые id, которых нет нигде в html-разметке). Можно покопаться в DOM и выяснить, как их выдернуть из кода фронт-энда.
  • Опять же, вкладку Network можно использовать для простых тестов на безопасность и серверную валидацию. Там есть функция Edit and resend для запросов.

  • 1

#4 Cleo12

Cleo12

    Новый участник

  • Members
  • Pip
  • 42 сообщений
  • ФИО:Иван

Отправлено 07 марта 2017 - 12:25

Спасибо большое)


  • 0

#5 Snap

Snap

    Специалист

  • Members
  • PipPipPipPipPip
  • 980 сообщений
  • ФИО:Роман
  • Город:Москва


Отправлено 07 марта 2017 - 13:24

Знаю что с помощью консоли можно:

- responsive посмотреть как отображается сайт в разных расширениях на моб.телефонах, планшетах

 

И подскажите преимущества Firebug в мозиле над консолью.Спасибо

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


  • 0

#6 Dalay_LAMO

Dalay_LAMO

    Опытный участник

  • Members
  • PipPipPipPip
  • 265 сообщений
  • ФИО:Дмитрий
  • Город:Санкт-Петербург


Отправлено 07 марта 2017 - 14:03

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


В то время, когда я выбирал из этих инструментов, связка Firefox+Firebug безбожно проигрывала хромовским дев тулзам по потреблению ресурсов. Сейчас для интереса запустил Firebug - явно поработали надо проблемами производительности, ничего не тормозит. Респонсив режим есть, но функционал беднее, чем в хроме. Тротлинга не нашёл. Единственное преимущество - инспектор показался мне более наглядным, чем в хроме.
  • 0

#7 Snap

Snap

    Специалист

  • Members
  • PipPipPipPipPip
  • 980 сообщений
  • ФИО:Роман
  • Город:Москва


Отправлено 07 марта 2017 - 14:15

В то время, когда я выбирал из этих инструментов, связка Firefox+Firebug безбожно проигрывала хромовским дев тулзам по потреблению ресурсов. Сейчас для интереса запустил Firebug - явно поработали надо проблемами производительности, ничего не тормозит. Респонсив режим есть, но функционал беднее, чем в хроме. Тротлинга не нашёл. Единственное преимущество - инспектор показался мне более наглядным, чем в хроме.

Не подскажете, где в Firebug респонсив режим, я что-то не нашел?


  • 0

#8 Dalay_LAMO

Dalay_LAMO

    Опытный участник

  • Members
  • PipPipPipPip
  • 265 сообщений
  • ФИО:Дмитрий
  • Город:Санкт-Петербург


Отправлено 09 марта 2017 - 05:23

Не подскажете, где в Firebug респонсив режим, я что-то не нашел?


https://gyazo.com/d6...a88ae6e3fd82cda

И ко мне лучше на "ты")
  • 0

#9 Snap

Snap

    Специалист

  • Members
  • PipPipPipPipPip
  • 980 сообщений
  • ФИО:Роман
  • Город:Москва


Отправлено 09 марта 2017 - 13:29

 

Не подскажете, где в Firebug респонсив режим, я что-то не нашел?


https://gyazo.com/d6...a88ae6e3fd82cda

И ко мне лучше на "ты")

 

Странно, у меня подобной иконки нет. Может это какой дополнительный плагин к Firebug?


  • 0

#10 Snap

Snap

    Специалист

  • Members
  • PipPipPipPipPip
  • 980 сообщений
  • ФИО:Роман
  • Город:Москва


Отправлено 10 марта 2017 - 17:01

Посмотрел на другом компьютере - там тоже такой иконки нет.

Хотелось бы прояснить ситуацию - есть ли действительно в Firebug режим адаптивного дизайна?


  • 0

#11 checo

checo

    Опытный участник

  • Members
  • PipPipPipPip
  • 400 сообщений
  • Город:Н.Новгород

Отправлено 11 марта 2017 - 08:01

Посмотрел на другом компьютере - там тоже такой иконки нет.

Хотелось бы прояснить ситуацию - есть ли действительно в Firebug режим адаптивного дизайна?

Странно, у меня везде есть.

Зато нет Firebug как такового. В последних версиях FF он включен в стандартную консоль. Просто у консоли теперь есть визуальная тема Firebug. В стандартной теме иконка может выглядеть не так, но находится там же.

Более того, в меню Developer есть пункт Responsive Design.


  • 0

#12 Snap

Snap

    Специалист

  • Members
  • PipPipPipPipPip
  • 980 сообщений
  • ФИО:Роман
  • Город:Москва


Отправлено 11 марта 2017 - 16:50

Странно, у меня везде есть.

Зато нет Firebug как такового. В последних версиях FF он включен в стандартную консоль. Просто у консоли теперь есть визуальная тема Firebug. В стандартной теме иконка может выглядеть не так, но находится там же.

Более того, в меню Developer есть пункт Responsive Design.

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

Вот скриншот для сравнения - http://i11.pixs.ru/s...39_25464143.jpg


  • 0

#13 Dalay_LAMO

Dalay_LAMO

    Опытный участник

  • Members
  • PipPipPipPip
  • 265 сообщений
  • ФИО:Дмитрий
  • Город:Санкт-Петербург


Отправлено 13 марта 2017 - 05:47

Я и говорю, что в стандартной консоли, включая предыдущие версии Firefox режим адаптивного дизайна есть, включая меню. А вот в Firebug я подобного никогда не видел.
Вот скриншот для сравнения - http://i11.pixs.ru/s...39_25464143.jpg


При запуске консоли у меня уведомление показывается "The next version of Firebug has been integrated directly into the Firefox Developer Tools for increased performance and stability." Подробности здесь: https://blog.getfire...refox-devtools/.
  • 0

#14 hiverise

hiverise

    Новый участник

  • Members
  • Pip
  • 20 сообщений
  • ФИО:Сергей

Отправлено 21 марта 2017 - 12:50

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

(Не реклама)


  • 0

#15 diana_saratov

diana_saratov

    Новый участник

  • Members
  • Pip
  • 3 сообщений
  • ФИО:Диана Еремина
  • Город:Фетхие, Турция

Отправлено 24 марта 2018 - 09:54

Спасибо!

 

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

(Не реклама)


  • 0

#16 misga

misga

    Новый участник

  • Members
  • Pip
  • 8 сообщений
  • ФИО:мишель коко

Отправлено 03 апреля 2018 - 16:11

 Просмотр и редактирование HTML-кода (для разных целей) и стилей. Эмулятор мобильных устройств. Console - просмотр js ошибок, плюс можно выполнять команды.  00056.png


  • 0


Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных