Как инспектировать элементы на Chromebook и клавиша, которая вызывает проблемы

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

Кто-то говорит «нажмите F12» или «откройте консоль», но на Chromebook нет клавиши F12. Вот как открыть инструменты разработчика и что делать после их открытия.

Открытие инструментов разработчика

Есть три способа, и второй стоит запомнить, потому что он не зависит от отсутствующих на Chromebook клавиш.

• Щелкните правой кнопкой мыши на элементе, который хотите посмотреть, и выберите Inspect. Если на вашем Chromebook нет правой кнопки мыши, коснитесь сенсорной панели двумя пальцами. Это откроет инструменты разработчика с уже выбранным элементом, что обычно именно то, что вам нужно.
• Нажмите Ctrl + Shift + I, чтобы открыть инструменты, или Ctrl + Shift + J, чтобы открыть их прямо в консоль. Эти сочетания работают на каждом Chromebook и являются надежным решением.
• Нажмите на двенадцатую клавишу в верхнем ряду, если вам это нужно. Этот ряд - вот где кроется проблема, и это описано в отдельной секции ниже.

Проблема с F12 и как на самом деле работает верхний ряд

Верхний ряд Chromebook - это не функциональные клавиши. Это кнопки возврата, обновления, полноэкранного режима, яркости и прочего, и F12 нигде не напечатана. Именно здесь люди застревают, но есть решение.

Удерживайте клавишу Launcher - ту, что с кружком или увеличительным стеклом, там, где на других клавиатурах находится Caps Lock - и верхний ряд превращается в F1 - F12 пока вы её держите. Таким образом, Launcher + двенадцатая клавиша в верхнем ряду это F12, и это откроет инструменты разработчика.

Но вам редко это потребуется, потому что Ctrl + Shift + I делает то же самое без необходимости подсчитывать клавиши. Если в инструкции говорится F12, а вы находитесь на Chromebook, прочитайте это как «откройте инструменты разработчика» и используйте это сочетание вместо этого.

Сочетание клавиш для инспектирования, на любой клавиатуре

Если вы пришли за сочетанием клавиш, а не за объяснением: на Chromebook это Ctrl + Shift + I, и это весь ответ. Остальные стоит знать потому, что инструкция, которую вам дали, почти наверняка написана для другой машины, и буквальное следование ей заставляет людей искать клавишу, которой на их клавиатуре нет.

• Chromebook, Windows и Linux: Ctrl + Shift + I открывает инструменты разработчика, а Ctrl + Shift + J открывает их сразу с консолью перед вами.
• Mac: Cmd + Option + I, и Cmd + Option + J для консоли. Safari устроен иначе, и его сначала нужно включить, иначе ничего из этого не работает, о чём рассказывает руководство для Mac.
• Только Windows и Linux: F12 делает то же самое, что Ctrl + Shift + I. На Chromebook F12 не напечатана нигде, и об этом раздел выше.

Две вещи сбивают с толку чаще, чем сами клавиши. Сочетание открывает инструменты, ничего при этом не выделяя: когда вам нужен конкретный элемент, щёлкните по нему правой кнопкой и выберите «Просмотреть код», и вы попадёте внутрь с уже подсвеченным элементом. И сочетание действует на страницу, которую вы смотрите, а не на браузер, поэтому на новой вкладке, на экране настроек или в Web Store от него никакого толку.

Если вы за Windows, а не за Chromebook, руководство для Windows продолжает тем, какая панель отвечает на какой вопрос, когда вы уже внутри.

Чтение консоли, в чём обычно и состоит суть

В большинстве случаев «инспектировать элемент на Chromebook» на самом деле означает «кто-то спросил меня, что показывает консоль». Вкладка Console - это место, где страница сообщает об ошибках, и красная строка там часто является полным объяснением того, почему страница не работает.

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

Вкладка Network для случаев, когда ничего не загружается

Если проблема заключается в том, что что-то не загрузилось, а не в том, что страница выбросила ошибку, Network - это то место, куда нужно заглянуть. Откройте её, перезагрузите страницу и смотрите, как список заполняется каждым запросом, который сделала страница. Красная строка - это запрос, который не удался, и его код состояния указывает причину. У вкладки Network есть собственное руководство, если эта панель для вас новая.

Инспектирование телефона Android с вашего Chromebook

Это полезно знать, потому что Chromebook часто - это именно компьютер, который есть у тестировщика: он может открыть инструменты разработчика для страницы, запущенной на телефоне Android, через кабель USB, точно так же, как компьютер Windows или Mac. Введите chrome://inspect в адресную строку, подключите телефон, и страницы, открытые на нём, появятся в списке с ссылкой inspect рядом с каждой. Полные инструкции находятся в статье о том, как инспектировать элементы на Android; ничего не меняется оттого, что компьютер - это Chromebook.

Если вы направляете кого-то другого делать это

Если вы помогаете человеку на Chromebook с этим - будь то тестировщик, клиент или коллега - не говорите ему нажимать F12. Он будет искать её, не найдёт и решит, что инструкции неправильные. Скажите «щелкните правой кнопкой мыши по странице и выберите Inspect» или «Ctrl + Shift + J откроет консоль». Оба способа работают с первой попытки, и это разница между получением ответа и получением скриншота не того экрана.

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

Краткая справка

• Открыть инструменты разработчика: щелкните правой кнопкой мыши и выберите Inspect, или Ctrl + Shift + I.
• Открыть прямо в Console: Ctrl + Shift + J.
• Если вам действительно нужна F12: удерживайте клавишу Launcher и нажмите двенадцатую клавишу в верхнем ряду.
• Инспектировать телефон Android: chrome://inspect с телефоном на кабеле.