Вас наверняка уже просили “открыть инспектор и сказать, что пишет консоль”. Вот как это делается на Mac, в обоих браузерах - и в Safari сначала нужно включить одну настройку, из-за чего этот вопрос задают дважды.

Chrome

Три способа, и первый - тот, который стоит запомнить.

  • Щёлкните правой кнопкой по тому, что выглядит неправильно, и выберите “Просмотреть код”. Панель откроется с уже выбранным элементом, и в этом весь смысл: вопрос был про эту кнопку, а не про страницу.
  • ⌥⌘I открывает панель, где бы вы ни были.
  • ⌥⌘J открывает её сразу на вкладке “Консоль”, а именно этого обычно и хочет тот, кто говорит “посмотри, нет ли ошибок”.

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

Safari

Safari прячет всё это, пока его не попросишь, и именно этот шаг чаще всего пропускают.

  1. Откройте Safari → Настройки (⌘ запятая).
  2. Выберите вкладку Дополнения.
  3. Поставьте галочку Показывать функции для веб-разработчиков.

В строке меню появляется меню Разработка, и только после этого работает всё остальное:

  • Правая кнопка → Показать инспектор веб-элементов на любой части страницы.
  • ⌥⌘I открывает веб-инспектор.
  • ⌥⌘C открывает его сразу на консоли.

В более старых версиях macOS галочка называется “Показывать меню «Разработка» в строке меню”, в том же месте. Если вы не находите ни ту, ни другую, вы смотрите настройки другого приложения - Safari должен быть активным окном.

Как читать консоль, ради чего вас, скорее всего, и просили

Консоль - это вкладка, которая отвечает на вопрос “что-нибудь сломалось”. В ней лежат сообщения, которые страница написала, пока вы ею пользовались, и они бывают трёх видов, которые стоит различать.

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

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

Чтобы передать ошибку дальше, щёлкните правой кнопкой по красной строке и скопируйте её или выделите и нажмите ⌘C. Скриншот тоже подойдёт, если строка видна целиком.

Вкладка “Сеть”, когда не загружается вообще ничего

Если страница выглядит пустой, а не сломанной, консоль может промолчать, а вкладка “Сеть” скажет всё. Откройте её, перезагрузите и посмотрите на колонку статуса: числа в диапазоне 400 и 500 - это запросы, которые не прошли, а URL рядом говорит, что страница пыталась загрузить. В этом и разница между “сайт сломан” и “один запрос по одному адресу вернулся с 503”.

Как посмотреть страницу, открытую на iPhone

Не на телефоне. Веб-инспектор Safari работает на Mac и подключается к телефону по кабелю: включите веб-инспектор на телефоне в Настройки → Приложения → Safari → Дополнения, подключите его, и устройство появится в меню “Разработка” на Mac. Полная процедура и что делать без Mac - это отдельная статья.

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

Session Replay

Бесплатное расширение для Chrome. Один клик на странице, которая ведёт себя неправильно, снимает скриншот, консоль и сетевой журнал и отдаёт вам ссылку, чтобы вставить её в тикет.

Установить расширение

Если вы тот, кто просит об этом кого-то другого

Об этом стоит сказать прямо, потому что эта статья существует в основном из-за такой просьбы.

Попросить коллегу, тестировщика или клиента открыть инструменты разработчика, найти нужную вкладку, оценить, какие красные строки важны, и точно их скопировать - это попросить сразу несколько навыков. Большинство пришлёт первую же красную строку, которую увидит, а это обычно предупреждение аналитики, и переписка стоит двух сообщений и одного дня.

Формулировка, которая работает, если просить всё-таки придётся: перезагрузи, сделай то, что ломается, открой консоль по ⌥⌘J и пришли мне всё красное. Точно, и решение остаётся за вами, а не за ними.

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

Кратко

  • Chrome: правая кнопка → “Просмотреть код”, или ⌥⌘I, или ⌥⌘J для консоли.
  • Safari: Настройки → Дополнения → Показывать функции для веб-разработчиков, затем ⌥⌘I или ⌥⌘C.
  • Перезагружайте перед воспроизведением, чтобы видимые ошибки относились к сбою.
  • Красные строки, где упомянут адрес самого сайта, важнее всего; первая важнее остальных.