Андрей Смирнов
Время чтения: ~11 мин.
Просмотров: 7

15 советов и хитростей инструментов разработчика Chrome, которые вы обязаны знать

logo.png.pagespeed.ce.Vg8ZrIWxTT.png

Chromebooks заполняют очень специфическую нишу, поскольку они настолько специализированы и ограничены режимом разработчика. Они отлично подходят для серфинга в Интернете, базовых задач, таких как обработка текстов, а простой интерфейс идеально подходит для тех, кто мало знает о компьютерах. Поскольку Google контролирует именно то, что вы можете установить на Chromebook, они также очень безопасны.

1534954497_kak-vklyuchit-rezhim-razrabotchika-chromebook-1.jpg.pagespeed.ce.moAddJN248.jpg

Все, что облегчает использование и безопасность, связано со стоимостью; если вам нужно сделать что-нибудь более сложное, чем писать эссе или отправить электронное письмо, вам, вероятно, потребуется включить режим разработчика.

Что такое режим разработчика на устройствах Chromebook?

Режим разработчика похож на jailbreaking iPhone или укореняет телефон Android. Все эти устройства обычно закрыты довольно жестко, что означает, что вы можете устанавливать только утвержденные приложения, и вы не имеете возможности вносить изменения в систему.

Когда вы включаете режим разработчика, вы получаете гораздо более высокий уровень контроля над своим устройством. Тем не менее, ваш Chromebook также будет по своей сути менее безопасным, так как вы потеряете все функции безопасности, которые известны в ChromeOS

Как включить режим разработчика на вашем Chromebook

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

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

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

Вот как включить режим разработчика на Chromebook:

1534959216_kak-vklyuchit-rezhim-razrabotchika-chromebook-2.jpg.pagespeed.ce.ny6tyMoUf8.jpg

1. Если Chromebook включен, выключите его.

2. Нажмите и удерживайте кнопку esc + refresh, затем нажмите кнопку питания.

Примечание. Ключ обновления имеет значок, который выглядит как круглая стрелка, указывающая по часовой стрелке. Обычно это клавиша F3.

3. Подождите, пока на экране не появится сообщение «Chrome OS отсутствует или поврежден. Пожалуйста, вставьте USB-накопитель».

Примечание. Ваша Chrome OS отсутствует или повреждена, это обычный экран, который вы получаете при включении режима разработчика.

4. Нажмите Ctrl + D.

5. При появлении запроса нажмите Enter.

6. Подождите, пока устройство перезагрузится.

7. Следуйте инструкциям на экране, чтобы настроить Chromebook.

Примечание. Эти инструкции работают для большинства Chromebook, в которых используется виртуализированный переключатель разработчика. Некоторые Chromebook имеют несколько иной процесс, включая ранние модели, такие как Cr-48 и Samsung Series 5, которые имеют переключатели режима физического разработчика. Chromium поддерживает список всех моделей Chromebook, где вы можете узнать, есть ли у вашего устройства переключатель разработчика.

Что вы можете сделать с Chromebook в режиме разработчика?

Chromebook чрезвычайно ограничен дизайном, но режим разработчика открывает их. Самое главное, что меняется, когда вы включаете режим разработчика — вы получаете доступ к оболочке разработчика, мощному инструменту для продвинутых пользователей.

Оболочка позволяет выполнять такие задачи, как pinging IP-адреса или веб-сайта, подключение к серверу Secure Shell (SSH) и запуск множества других команд Linux; это работает, потому что ChromeOS базируется на Linux.

Одним из наиболее полезных способов, которые предлагает разработчик, является установка стандартной среды рабочего стола Linux; вы можете сохранить мгновенный интерфейс ChromeOS и переключиться на полную среду Linux в любое время, когда вам нужно сделать что-то более сложное.

Для получения дополнительной информации об этом будет написано полное руководство по установке Linux на Chromebook.

Проблемы с режимом работы Chromebook

Режим разработчика имеет много положительных сторон, но есть несколько потенциальных опасностей, которые необходимо учитывать, прежде чем включать его:

— Google не поддерживает режим разработчика. Когда вы включаете режим разработчика, вы можете аннулировать гарантию, а это значит, что вы можете быть сами по себе, если у вас возникнут проблемы с вашим Chromebook в будущем.

— Вы теряете все свои данные. Включение режима разработчика стирает все данные, которые вы хранили локально на своем Chromebook. Если вы не поддержите все, это исчезнет навсегда.

— Вы можете снова потерять все свои данные. Когда вы выключаете режим разработчика, ваши данные снова стираются. К сожалению, отключить режим разработчика так же просто, как нажать пробел во время загрузки Chromebook. Это делает его слишком простым, чтобы случайно стереть жесткий диск в любое время.

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

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

Как отключить режим разработчика

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

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

1534959673_kak-vklyuchit-rezhim-razrabotchika-chromebook-4.jpg.pagespeed.ce.iVSfLzT3Ez.jpg

Вот как отключить режим разработчика на вашем Chromebook:

1. Если ваш Chromebook включен, выключите его.

2. Включите Chromebook.

3. Подождите, пока на экране не появится надпись «Проверка ОС выключена».

4. Нажмите пробел.

5. Следуйте инструкциям на экране, чтобы снова востановить Chromebook.

Примечание. Если на вашем Chromebook есть физический ключ разработчика, вам нужно отключить его, чтобы вернуться в нормальное состояние. Это тот же самый переключатель, который вы использовали для включения режима разработчика.

Вернуться

Похожие новости

1567517197_kak-podklyuchit-airpods-k-chromebook.jpg.pagespeed.ce.9SVvVnOjM_.jpg

Как подключить AirPods к Chromebook

AirPods от Apple традиционно предназначены только для сопряжения с другими продуктами Apple. Однако

1562937266_otladka-telefona-android-po-usb-kak-aktivirovat-ego.jpg.pagespeed.ce.ysvKR_oMsq.jpg

Отладка телефона Android по USB, как активировать функцию

Есть много причин, чтобы включить отладку по USB на вашем телефоне Android. Например, он позволяет

1548281203_rezhim-razrabotchika-na-android-8.jpg.pagespeed.ce.6wUJrc_OP6.jpg

Режим разработчика Samsung J6+ на Android 8.1

В этой теме я расскажу, как включить режим разработчика на Android 8.1 и этот способ работает

1528973380_google-pixelbook-skoro-poluchit-sertifikat-windows-10.png.pagespeed.ce.efFYNovb6T.png

Google Pixelbook скоро получит сертификат Windows 10

В октябре прошлого года компания Google запустила ноутбук премиум-класса Pixelbook с розничными

instrumenty-razrabotchika-google-chrome-1.jpg За последние годы браузер Гугл Хром стал самым востребованным как среди обычных пользователей интернета, так и среди пользователей, занимающихся веб-разработкой.

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

Быстрая смена файлов

Если вам доводилось пользоваться функцией «Очищенный текст» (Sublime Text), тогда наверняка для вас всегда представляет необходимость опция «Перейти куда-нибудь» (Go to anything). Разработчики отмечают, что подобная функция для тех, кто активно пользуется Idea, может иметь другое название – «Искать где угодно» (Search Everywhere), а вызвать её можно, просто дважды нажав на клавишу «Shift».instrumenty1-razrabotchika-google-chrome.jpg

Радует то, что функция подобного рода находится в инструментарии для разработчика. Для её активации необходимо зажать сочетание двух клавиш Ctrl и Р (если вы пользуетесь Apple Mac, то придётся зажать Cmd и Р) в то время, когда вашему вниманию представлена ПР для того, чтобы совершить быстрый поиск и открытие любого файла в проекте, вами используемом.

Осуществление поиска в коде исходного типа

Однако, что делать, если поиск нужно совершить в коде исходного типа? Чтобы произвести поиск в каждом файле, что был загружен на самой страничке браузера, вам придётся зажать три клавиши: Ctrl, Shift и F – для операционной системы Windows; Cmd, Opt и F. Данная методика поиска способна поддерживать поиск при помощи регулярного выражения.

Переход к строке

После открытия необходимого вам файла в специальной вкладке «Источники» (Sources), полный инструментарий разработчика даст возможность пользователю переходить к строке абсолютного любого типа для данного файла. Чтобы данная процедура могла быть реализована, вам придётся зажать клавиши Ctrl и G – для ПО Windows; Cmd и L, если вы пользуетесь Apple Mac. После этого вводите тот номер, который имеет строчка.instrumenty-razrabotchika-google-chrome2.jpg

Можно также воспользоваться дополнительным способом, нажав сочетание двух клавиш Ctrl и О, однако вам придётся ввести не текст, чтобы произвести поиск, а вбить двоеточие, а после номер, который имеет строчка. Ещё пользователь может проделать процедуру гораздо дальше. Нужно вбить наименование файла, а также номер, воспользовавшись двоеточием в качестве знака деления между отдельными значениями. В таком случае, наименование файла может быть введено с сокращением.

Выборка элементов DOM при использовании консоли

Консоль, которая отвечает за инструменты разработчика, может без особых проблем осуществлять поддержку некоторых полезных функций, а также переменных, чтобы осуществлять выборку DOM:instrumenty-razrabotchika-google-chrome3.jpg

  • является эквивалентом document.querySelector(). Может осуществить возврат первого элемента, который полностью соответствует данным селектора CSS. Допустим,$ (DIV) – может реализовать возврат первого элемента  DIV прямо в области основной страницы.
  • $$() является значением эквивалентным document.querySelectorAll(). Опция способна произвести возврат весь список с элементами (называется этот список NodeList). Практически каждый элемент находится в полном соответствии с селектором CSS.
  • $0-$4- эти значения сохраняют историю тех элементов DOM, которые относились к пяти последним. Вы выбирали их в специальной вкладке «Элементы» (Elements), а здесь уже значение $0 представляется самым последним.

Как пользоваться несколькими каретками, а также выделениями

В процессе редактирования файла у вас есть возможность производить установку кареток. Это можно осуществить путём удерживания клавиши Ctrl, а после этого вы нажимаете на ту область, которая вам нужна. Каретки можно инсталлировать в одно время в нескольких местах.

Функция Preserve Log

Когда происходит активация данного параметра на консольной вкладке, то каждый отдельный результат окажется сохранён. Чиститься данные при очередных запусках странички в браузере не будут. Такая система приносит немало удобств в работе с системой, в особенности, когда вам необходимо проверить полную историю произошедших ошибок, появляющихся перед тем, как вы покидаете страничку.instrumenty-razrabotchika-google-chrome4.jpg

Улучшение исходников, которые были минимизированы

Инструментарий для разработчика Хром обладает интегрированным “прихорашивателем” тех кодов исходного типа, которые были минимизированы, чтобы их было удобно читать. Располагается сама кнопочка в самом низу слева в файле, который открыт на данный момент времени (специальная вкладка «Источники»).instrumenty-razrabotchika-google-chrome5.jpg

Как пользоваться режимом устройства

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

Каким образом эмулируются датчики устройства

Система может похвастаться такой немаловажной особенностью приборного режима, как имитация специальных датчиков портативных устройств (примером могут послужить акселерометры и экраны сенсорные). Вами могут также быть указаны координаты географические. Обычно сам объект располагается во вкладке «Элементы» в самом низу, где располагается вкладка “Эмуляция”, а далее “Сенсоры”.

Выбрать цвет

Когда происходит выбор цвета во время работы с редактором стилей, у вас имеется возможность нажать на цветовой образец, а после этого произойдёт появление окна, где пользователь может выбрать нужный ему цветовой оттенок. В то время, когда окошко остаётся в активном режиме, указатель мышки ваш становится увеличительной лупой, чтобы удобнее было выбирать цвет. Вся процедура реализуется чётко и быстро.instrumenty-razrabotchika-google-chrome6.jpg

Принудительный режим состояния элемента

Инструментарий для разработки даёт возможность для того, чтобы стимулировать состояния CSS элемента DOM. В качестве примера, могут быть применены :hover и :focus. При этом прописывание их стилей упрощается. Функция подобного рода может оказаться в доступном режиме там, где расположен редактор CSS.

Современные браузеры перестали быть просто инструментами для поиска информации в Интернете. Разработчики дополняют свое детище новыми возможностями, дабы повысить комфорт пользователей, прорекламировать платформу. Сегодня мы поговорим о том, как включить режим разработчика Google Chrome. Также в процессе повествования рассмотрим несколько интересных фишек при работе с консолью и отладчиком.

Подробности

Для начала давайте проговорим, кому и для чего может понадобиться сей инструмент:

  • разработчикам расширений, верстальщикам сайтов;
  • людям, изучающим HTML и CSS;
  • тестерам готового продукта.

Kartinka-Rezhim-razrabotchika-v-Google-Chrome.pngКак правило, особое отображение информации на странице открывает человеку возможность увидеть профессиональную верстку. За счет этого его обучаемость просто взрывается.

Для активации особого режима работы достаточно:

  1. Запустить Google Chrome и кликнуть ЛКМ по главной кнопке в правом верхнем углу экрана.
  2. В системном меню навести курсор на «Дополнительные инструменты».
  3. Затем выбрать пункт «Инструменты разработчика».Punkt-Instrumenty-razrabotchika-v-osnovnom-menyu-Google-Chrome.png

После этого правую половину пользовательского интерфейса займет окно со множеством вкладок, гигатоннами кода и элементов верстки.

Как говорилось выше, для активации особого режима достаточно использовать волшебное сочетание клавиш <keybtn>Ctrl</keybtn> +<keybtn>Shift</keybtn> + <keybtn>I</keybtn>.

Дополнение

Есть несколько хитростей при работе с инструментами разработчика, которые упростят для вас освоение функционала, ускорят рабочий процесс.

Список представлен ниже:

  • Поиск в исходном коде – сочетание клавиш <keybtn>Ctrl</keybtn> + <keybtn>Shift</keybtn> + <keybtn>F</keybtn> активирует миниатюрную поисковую строку, использование которой упрощает нахождение регулярных выражений или однотипных команд.
  • Пара кареток и выделений – теперь можно работать на нескольких строках одновременно. Достаточно зажать Ctrl, выделить нужные поля, и приступать к работе.
  • Переход к строке – после открытия файла во вкладке Sources зажимай <keybtn>Ctrl</keybtn> + <keybtn>G</keybtn>, после чего вводим номер строки (мгновенный переход обеспечен).Poisk-po-stroke-v-instrumentah-razrabotchika-Google-Chrome.png
  • «Прическа» для минимизированных исходников – в режиме разработчика есть кнопка (левый нижний угол), которая автоматически «трансформируют» сокращенные исходники в удобочитаемую форму.
  • Режим устройства – это отличная возможность проверить адаптивность разработанного сайта на разных платформах. Также присутствует эмуляция сенсорного касания к дисплею.

Это далеко не полный перечень возможностей инструмента, но и они дают понять, насколько в Google заморочились ради пользователей.

Подведем итоги

Режим разработчика идеально подходит для профессиональных программистов, которые хотят протестировать свои проекты, подсмотреть фишки у более опытных коллег. Начинающим верстальщикам же будет полезно посмотреть на примеры качественной работы, разобраться в структурных компонентах, и «что за что отвечает».

Рейтинг автора
5
Подборку подготовил
Илья Коновалов
Программист и опытный пользователь интернета
Написано статей
179
Ссылка на основную публикацию
Похожие публикации