Google chrome для разработчиков отличия
У Google Chrome есть 4 версии: Стабильная, Бета-версия, Dev и Canary. Google использует каждую из этих версий Chrome для разных целей.
В этой статье вы сможете узнать, для чего предназначена каждая из версий Chrome, а также обо всех различиях, которые их разделяют. После глубокого изучения различий между 4 версиями мы порекомендуем лучшую версию Google Chrome для установки на ваши устройства.
Почему существуют разные версии Google Chrome?
У Google Chrome есть 4 разных версии: Chrome Stable, Chrome Beta, Chrome Dev и Chrome Canary. Приложение для каждой из этих версий Chrome доступно в Google Play, но почему существует так много разных версий одного и того же браузера?
Каждая из этих версий представляет собой состояние на этапе разработки, пока не будет достигнута финальная версия, которая может понравиться всем пользователям.
Перед интеграцией новых функций разработчики должны протестировать их работу в пробной версии приложения. В случае с Google Chrome у разработчиков есть 3 тестовые версии приложения (Beta, Dev и Canary) перед окончательной интеграцией функций в финальную версию, известную как Stable. Таким образом, каждая из версий Google Chrome выполняет свою миссию для правильной разработки веб-браузера.
Google Chrome Stable
Google Chrome Stable – это последняя стабильная версия браузера, которую вы почти наверняка установили на свой мобильный телефон или планшет.
В стабильном Chrome пользователи могут пользоваться всеми новыми функциями браузера без ошибок безопасности или стабильности, поскольку они были протестированы в предыдущих версиях. Если вы хотите легко просматривать Интернет, стабильная версия Google Chrome – это версия, которую вы должны установить на свои мобильные устройства.
Стоит отметить, что стабильная версия обновляется каждые две-три недели, а время ожидания крупных обновлений увеличивается до шести недель.
Google Chrome Beta
Версия, предшествующая стабильной –это Google Chrome Beta, она работает корректно и включает новшества, которые позже будут интегрированы в окончательную версию.
По этой причине для многих это наиболее сбалансированная версия, которую вы можете установить на свой мобильный телефон, поскольку она сочетает в себе хорошую производительность и последние функции Chrome.
Кроме того, если вы используете бета-версию Google Chrome, вам гарантированы постоянные обновления, поскольку приложение обновляется каждую неделю. Для крупных обновлений необходимо подождать около шесть недель.
Пользователи бета-версии могут ознакомиться с новыми функциями на четыре-шесть недель раньше, чем в стабильной версии Chrome. Если вы хотите стать одним из них, вы можете бесплатно загрузить бета-версию Chrome из Play Маркет.
Google Chrome Dev
Google Chrome Dev – это версия Chrome, предназначенная для разработчиков и опытных пользователей, которые тестируют последние обновления, чтобы обнаружить все недостатки для улучшения. Стоит отметить, что Chrome Dev может работать с ошибками, это делает приложение нестабильным.
Хотя эта версия не рекомендуется для повседневного использования, Dev идеально подходит для пользователей, которые хотят протестировать новые функции за девять-двенадцать недель до их официального выпуска.
Это приложение постоянно обновляется с целью, чтобы пользователи оставляли постоянную обратную связь в Google. Если вы хотите заранее протестировать Chrome и не возражаете против использования более нестабильной версии, чем бета-версия, вы можете бесплатно загрузить Google Chrome Dev из Play Маркет.
Google Chrome Canary
Последняя версия Google Chrome – Canary версия, специально разработанная для разработчиков. Выпущенная в 2016 году Chrome Canary является наименее стабильной версией приложения, поэтому Google рекомендует использовать ее только для тестирования. В данной версии браузера функции время от времени появляются и исчезают, что также не делает его идеальным для повседневного использования.
Google Chrome Canary первым получает обновления, поэтому они не работают должным образом. Но не все так плохо, потому что для Canary также характерны постоянные обновления, до семи каждую неделю. Если вы хотите использовать эту версию Google Chrome, скачайте ее бесплатно из магазина приложений Play Маркет.
Какую версию Google Chrome установить?
Лучшая версия Chrome, которую вы можете установить – это стабильная версия, так как вы можете наслаждаться стабильной работой браузера. Хотя вам, возможно, придется немного подождать, чтобы протестировать новые функции, стабильная версия является наиболее рекомендуемой для работы в Интернете.
Производительность, стабильность и безопасность гарантируют, что Google Chrome Stable – это идеальная версия для большинства пользователей.
Автор статьи, перевод которой мы сегодня публикуем, хочет поделиться советами по профессиональной работе с инструментами разработчика браузера. А именно, эти советы рассчитаны на программистов, которые по какой-то причине решили, что их основным браузером будет Google Chrome.
Общие сведения
Вы используете инструменты разработчика Chrome для того чтобы отлаживать код.
Команда открытия инструментов разработчика
Иногда вы заходите в панель Console чтобы, пользуясь возможностями консоли, исследовать данные, которые выводит ваша программа. Иногда вы заглядываете на панель Elements чтобы взглянуть на CSS-код, который применяется для стилизации DOM-элементов.
Панель Console
Но хорошо ли вы знаете инструменты разработчика Chrome? На самом деле, тут есть множество мощных, но не слишком известных возможностей, которые способны значительно повысить эффективность вашего труда.
Здесь я собираюсь рассказать о самых полезных таких возможностях, которые, хочется надеяться, вам пригодятся.
1. Пункт меню Run command
Для начала мне хотелось бы в двух словах рассказать о пункте меню инструментов разработчика, который называется Run command. Этот пункт меню для Chrome — всё равно, что командная оболочка для Linux. Он позволяет вводить команды для управления Chrome.
Для того чтобы до этого пункта меню добраться, откройте инструменты разработчика, после чего можете сразу же воспользоваться соответствующим сочетанием клавиш:
- В Windows — Ctrl + Shift + P .
- В macOS — Cmd + Shift + P .
Пункт меню Run command
После этого будет открыта панель команд, в которой можно найти массу команд, позволяющих выполнять очень много всего интересного.
Панель команд
Поговорим о некоторых командах из данной панели.
2. Продвинутые механизмы создания скриншотов
Веб-разработчику иногда требуется сделать снимок части экрана. Уверен, у вас уже есть очень удобная программа для решения этой задачи. Вот несколько типичных задач по созданию скриншотов:
- Снятие скриншотов целых страниц, даже тех их частей, которые не видны в окне браузера.
- Захват копии области экрана, которая относится исключительно к конкретному элементу DOM.
- Screenshot Capture full size screenshot
- Screenshot Capture node screenshot
▍Пример
Откройте какую-нибудь страницу, например — раздел Medium с самыми популярными материалами по JavaScript.
Теперь откройте панель команд и выберите в ней команду Screenshot Capture full size screenshot .
Команда для снятия скриншота всей страницы
В нашем распоряжении окажется скриншот всей страницы, который попадёт в папку загрузок.
Скриншот всей страницы
Как видите, изображение имеет очень большую высоту. Я его тут, для удобства, уменьшил. На самом же деле это — большое качественное изображение.
Аналогично, если нужно сделать скриншот элемента DOM, можно воспользоваться сторонней программой, которая, правда, не позволит получить изображение, относящееся в точности к нужному элементу. Решить эту задачу нам поможет команда Screenshot Capture node screenshot .
Пользуются ей так: сначала выбирают нужный элемент в панели Elements, а потом выполняют команду.
Создание скриншота области экрана, относящейся к конкретному элементу DOM
Вот как выглядит скриншот, снятие которого показано на предыдущем анимированном рисунке.
Скриншот элемента DOM
3. Обращение к результатам последней операции в консоли
Консоль часто используется для отладки кода. Представьте, что вам нужно узнать о том, как обратить строку средствами JavaScript. Вы поискали в интернете и нашли такой фрагмент кода:
Вы попробовали запустить этот код в консоли и, как оказалось, работает он правильно.
Проверка кода в консоли
Итак, строку этот код «переворачивает». Однако вам непонятно то, как работают методы split() , reverse() и join() . Вы не знаете о том, с чем именно они работают на промежуточных этапах «переворачивания» строки. Поэтому вы решаете выполнять этот код пошагово. Начинаете вы с первого метода, получив его результат, запускаете на этом результате второй метод и так далее.
Исследование кода
Завершив эти эксперименты вполне можно понять то, как именно работает исходный фрагмент кода.
Но работа в таком стиле предусматривает выполнение множества лишних действий. Тут можно наделать ошибок, да и выглядит всё это довольно-таки неопрятно. Для того чтобы улучшить ситуацию, достаточно знать о том, что в консоли инструментов разработчика можно воспользоваться «магической» переменной $_ , которая позволяет ссылаться на результат последней выполненной операции.
Использование $_
Как видите, $_ — это особая переменная, значение которой всегда равняется результату последней операции, выполненной в консоли. Эта переменная может очень хорошо помочь вам при отладке кода.
Пример использования $_
4. Повтор отправки XHR-запроса
Если эту задачу решает начинающий разработчик, то он просто обновит страницу. Но постоянное обновление страниц для повторной отправки запросов может оказаться слишком трудоёмкой задачей. На самом деле, с запросами можно работать, используя средства панели Network.
Команда повтора XHR-запроса
Для того чтобы повторно выполнить уже отправленный XHR-запрос, надо действовать так:
- Откройте панель Network.
- Щёлкните по кнопке XHR.
- Вызовите контекстное меню запроса, который нужно повторить.
- Выберите в меню команду Replay XHR.
Повтор XHR-запроса
5. Мониторинг загрузки страницы
На полную загрузку страницы, от самого начала этого процесса, до самого конца, может потребоваться более десяти секунд. Для того чтобы узнать о том, что именно происходит в ходе загрузки страницы, можно организовать наблюдение за этим процессом.
В инструментах разработчика Chrome можно делать скриншоты страницы в разные моменты загрузки, установив флаг Capture screenshots на панели Network.
Флаг Capture screenshots и наблюдение за загрузкой страницы
Щёлкая по скриншотам, можно просматривать запросы, выполнявшиеся в соответствующие моменты времени. Визуальное представление процесса загрузки страницы даст вам более высокий, чем раньше, уровень понимания того, что именно происходит при загрузке страницы.
Анализ загрузки страницы
6. Копирование содержимого JavaScript-переменных
Можно ли скопировать значение JavaScript-переменной для последующего использования этого значения? Не исключено, что вам такая задача может показаться невозможной, но в консоли Chrome можно воспользоваться особой командой, copy() , которая позволяет копировать содержимое переменных в буфер обмена.
Копирование содержимого JS-переменной
Этой функции нет в стандарте ECMAScript. Она доступна нам благодаря Chrome.
7. Копирование изображения в виде Data URL
Есть два способа работы с изображениями, выводимыми на веб-страницах. Первый способ заключается в загрузке изображений из внешних источников. Второй — в кодировании изображений в виде так называемых Data URL. На MDN можно узнать о том, что Data URL — это URL с приставкой :data. Такие URL позволяют встраивать прямо в документ файлы небольшого размера. Раньше их называли «Data URI», так было до тех пор, пока это название не было выведено из обращения WHATWG.
Как, пользуясь Chrome, превратить изображение в Data URL?
Ниже приведена анимированная демонстрация этого процесса.
Копирование изображения в виде Data URL
8. Удобное представление массивов объектов
Представьте, что у нас имеется массив объектов. Например — такой:
Выведем его в консоли.
Массив объектов, выведенный в консоли
Как видите, просматривать его, когда он выведен в таком виде, не очень-то удобно. А если подобный массив будет длиннее, а элементы, которые в нём имеются, будут иметь более сложную структуру, тогда разобраться с ним будет ещё сложнее.
К нашему счастью, в Chrome есть специальная функция, table() , которая позволяет форматировать массивы объектов.
Отформатированный массив объектов
Часто эта функция оказывается очень кстати.
9. Перетаскивание объектов в панели Elements
Иногда, в ходе тестирования интерфейса, нужно поменять расположение некоторых DOM-элементов страницы. Для того чтобы это сделать, мы можем воспользоваться возможностью панели Elements, которая заключается в перемещении любых HTML-элементов в коде страницы.
Перетаскивание элемента
На вышеприведённом анимированном рисунке показано, как я, перетаскивая мышью элемент <div> на панели Elements, меняю положение этого элемента на веб-странице.
10. Обращение к текущему выделенному элементу из консоли
Поговорим об ещё одной «магической» переменной, которой можно пользоваться в консоли. Это — переменная $0 . Она позволяет обратиться из консоли к элементу, который выделен в панели Elements.
Обращение к элементу с помощью $0
11. Исследование псевдоклассов
На MDN можно узнать о псевдоклассах следующее:
Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).
Для некоего элемента можно предусмотреть стили, имеющие отношение к различным псевдоклассам. Для того чтобы проверить эти стили, псевдоклассами можно управлять прямо из панели Elements.
Управление псевдоклассами
▍Пример
Вот код веб-страницы:
Нам надо проверить стилизацию псевдоклассов. Для этого мы можем воспользоваться панелью Elements.
Исследование стилей псевдоклассов
12. Быстрое скрытие элемента
При отладке стилей страницы часто нужно скрыть элемент. Для того чтобы сделать это максимально быстро, достаточно выделить элемент и нажать на клавиатуре клавишу H .
Быстрое скрытие элемента
Это приводит к добавлению стиля visibility: hidden !important; к соответствующему элементу.
13. Сохранение ссылки на DOM-элемент во временной глобальной переменной
Если нам нужно быстро получить ссылку на DOM-элемент в консоли, мы можем выполнить следующую последовательность действий:
- Выделить элемент.
- Щёлкнуть по нему правой кнопкой мыши, вызвав контекстное меню.
- Выбрать в меню команду Store as a global variable.
Сохранение ссылки на элемент DOM в виде временной глобальной переменной
А какими малоизвестными возможностями инструментов разработчика Chrome пользуетесь вы?
Небольшой обзор инструментов разработчика под названием Chrome DevTools. Рассказываем, что это такое и как с этим работать.
Вкратце о DevTools
Далеко не все разработчики (даже опытные) достаточно хорошо осознают, что один из лучших инструментов для тестирования, рефакторинга и оптимизации кода всегда был у них под рукой. Речь идет о браузере.
Некоторые вовсе не в курсе, что в браузерах есть инструменты для разработчиков. А те, кто в курсе, зачастую используют их для проверки одного-двух элементов на чужих ресурсах, не углубляясь в возможности DevTools. В то же время это грандиозный набор инструментов, который многим может заменить полноценную среду разработки.
Здесь есть редактор кода, дебаггер, наглядная визуальная система управления стилями, функция автоматической проверки сайтов на качество (производительность, SEO, адаптация под людей с ограниченными возможностями и т.п.). Также сам браузер поможет адаптировать сайты под мобильные устройства и экраны разных гаджетов.
Давайте обо всем поговорим подробнее и выясним, чем же так хорош Chrome DevTools.
Как открыть Chrome DevTools
Начнем с главного – откроем инструменты для разработчика. Это можно сделать тремя способами:
через контекстное меню,
через настройки браузера,
с помощью сочетания клавиш.
В первом случае нужно кликнуть по любой части страницы, а затем выбрать пункт «Посмотреть код» (не путайте с «Просмотром кода страницы», эта опция показывает исходный код в отдельной вкладке, не запуская DevTools).
Чтобы открыть DevTools через настройки, нужно кликнуть по иконке в виде трех точек в правом верхнем углу. В появившемся списке найти пункт «Дополнительные настройки» и навести на него курсор. А затем выбрать пункт «Инструменты разработчика».
Ну и основной способ, которым вы будете пользоваться чаще всего, когда запомните – горячие клавиши. Вызвать DevTools можно одновременным нажатием клавиш Ctrl + Alt + I в Windows и Cmd + Alt + I в macOS.
Основные возможности Chrome DevTools
Разберем базовые функции инструментов разработчика в Google Chrome. Посмотрим, что можно делать с веб-страницей, и поймем, почему некоторые разработчики используют DevTools чуть ли не чаще, чем какую-нибудь IDE или текcтовый редактор.
Поиск DOM-элементов
Первое, что вы увидите, когда откроются инструменты разработчика – редактор HTML-кода. Это полноценное DOM-дерево, которое можно просмотреть от и до. И не только посмотреть, но и изменить. Для начала посмотрим, как легко можно найти любой элемент страницы в коде, используя DevTools.
Во-первых, при вызове инструментария можно кликнуть правой кнопкой мыши не по пустому пространству, а по конкретной кнопке или картинке. Тогда при нажатии на «Просмотреть код» в DOM-дереве подсветится выбранный элемент.
Во-вторых, можно воспользоваться отдельной функцией поиска HTML-компонентов. Для этого нужно кликнуть по иконке в виде стрелки в левом верхнем углу окна DevTools, а затем навести курсор на интересующую кнопку/ссылку/картинку и т.п.
Также элементы подсвечиваются при наведении на них мыши в редакторе.
Редактирование HTML
Весь текст на сайте можно редактировать прямо в браузере. Менять любые параметры DOM.
В DevTools отображаются все вложенные элементы сайта (все div, section, footer, p и прочие). Чтобы отредактировать текст в блоке, нужно кликнуть по нему два раза. Текст выделится, и в нем появится курсор.
То же можно проделать с классами и типами данных. Кликнув по имени класса (или самому слову class), вы получите доступ к редактору именно этой части кода. Это удобно, когда нужно скорректировать небольшую часть кода.
Можно заменить сразу большой участок текста или поменять наименования атрибутов. Для этого кликаем правой кнопкой мыши по элементу или его части, а затем выбираем одну из опций. Например, Edit as HTML.
Работа с CSS
Ниже редактора HTML располагается окно для работы со стилями. В нем есть все необходимое для настройки визуальной составляющей сайта, а также несколько удобств, отличающих DevTools от большинства подобных инструментов.
К примеру, каждое свойство можно отключить, кликнув по чекбоксу слева от него. С добавлением новых свойств та же ситуация. Они тут отображаются как отдельные единицы интерфейса, а не как часть текстового поля.
Также в инструментах разработчика Google Chrome много графических элементов управления. Есть визуальная настройка угла наклона градиентов и удобная палитра для выбора цвета.
Сделаем и то, и другое на примере страницы выше. Поменяем через Chrome DevTools цвет кнопки.
Что получится при смене дизайна клавиш и подсветки ссылок:
Также в Chrome DevTools есть графическая презентация отступов объекта. С помощью нее можно легко настроить положение элемента относительно других, связанных с ним компонентов страницы.
А еще это удобный способ понять, как работают свойства margin и padding.
Также с помощью инструментов разработчика можно вынудить элементы вести себя определенным образом. К примеру, принудительно активировать псевдокласс :hover, чтобы настроить внешний вид кнопки при наведении на нее курсора.
Внесенные изменения можно отследить в графе Changes (в нижнем блоке DevTools, справа от Console). Они оформлены в стиле GitHub. То есть видно и замененный элемент, и его обновленный вариант.
Разработка адаптивного дизайна
Инструменты Chrome DevTools идеально подходят для тестирования сайта на разных экранах. Браузер умеет эмулировать любое устройство и любое разрешение экрана. Так что вы можете, не покидая браузера, взглянуть, как будет выглядеть ваше детище на планшетах, смартфонах и ПК-мониторах любого размера и с любыми органами управления.
Чтобы перейти в режим адаптивной верстки, надо кликнуть по кнопке Toggle device toolbar или нажать Cmd + Shift + M.
Над сайтом слева появится новая панель управления с кнопкой Responsive. Кликнув на нее, вы увидите список доступных устройств. Выбирайте то, которое хотите эмулировать, и разметка сайта адаптируется под его разрешение.
Для упрощения процесса верстки под конкретное разрешение, нужно кликнуть по иконке в виде трех точек слева от кнопки запуска режима адаптивной верстки и нажать на строку Show rulers. Появится пиксельная линейка для «подгонки» сайта.
А еще тут можно делать скриншоты сайта в заданном размере. Там же, где находится линейка, есть кнопка Capture screenshot.
Пример внесения изменений в HTML и CSS через Chrome DevTools
Разберем еще раз описанные выше возможности на конкретном примере. У меня есть страница, на которой некорректно отображается одна из кнопок. Она наползает на другие элементы приложения. Исправим это через DevTools.
Сначала ищем кривую кнопку в коде, активировав функцию поиска элемента.
Видим, что в коде для кнопки нет медиазапроса. То есть окно не адаптировано под конкретный размер дисплея. Добавляем необходимый код в css-файл и смотрим, что вышло. Кнопка уползла на нужно место.
Остается скопировать этот код непосредственно в приложение/сайт или сохранить обновленный CSS-файл в папку проекта. Для этого нужно открыть вкладку Sources, выбрать отредактированный файл (он будет помечен звездочкой), затем кликнуть по нему правой кнопкой мыши и выбрать опцию Save as…
Запуск и дебаггинг JavaScript-кода
Инструменты Chrome DevTools позволяют работать не только с CSS и HTML, но и с JavaScript-кодом. Можно запускать произвольные команды через встроенную консоль или подключая дополнительные JS-файлы.
Чтобы открыть JS-файл, нужно перейти во вкладку Sources справа от Elements.
Через консоль также можно отслеживать работу сайта, наблюдая за появляющимися ошибками и особенностями поведения сайта, в частности с помощью функции console.log( ).
А вот пример запуска произвольного кода внутри консоли браузера.
Также Chrome DevTools отлично подходят для поиска и исправления ошибок в коде. В нем для этого есть целый список брейкпоинтов, то есть точек, на которых останавливается исполнение кода с целью проанализировать его.
Например, можно настроить остановку кода по каждому действию, включая клик по кнопке или нажатие на клавишу. Чтобы создать брейкпоинты на эти действия:
- Открываем JavaScript-файл во вкладке Sources.
- Затем переходим в дебаггер. По умолчанию он привязан к нижней границе окна DevTools.
- Выбираем раздел Event Listener Breakpoints.
- В нем ставим галочку напротив действий, которые хотим отслеживать (при их выполнении исполнение кода будет останавливаться).
Другие возможности DevTools
Далее кратко разберем еще несколько важных вкладок в интерфейсе Chrome DevTools. Это те элементы, на которые стоит обратить внимание в первую очередь. Они отличают инструменты разработчика в браузере Google от аналогичных в других браузерах.
Оптимизация производительности сайта
В разделе Performance можно оценить скорость работы ресурса. Посмотреть, через какой период времени приходит ответ от сервера, за какой период времени отрисовывается интерфейс, в какой момент становится доступен хотя бы один из элементов сайта и так далее.
Браузер в автоматическом режиме создает профайл выбранной страницы и делит процесс загрузки на этапы посекундно, отображая информацию, необходимую для рейтинга Web Vitals. Это новый алгоритм оценки сайтов от Google.
Анализ подключения
В разделе Network можно посмотреть, как проходит подключение к источникам данных и загрузка отдельных элементов страницы. Здесь можно взглянуть на проблемные файлы, которые не загружаются вовсе или загружаются слишком долго.
Уровень безопасности сайта
Chrome DevTools умеет в автоматическом режиме анализировать страницу, проверять сертификаты и степень защищенности соединения. Сюда же попадает проверка всех подключаемых ресурсов.
Обязательно отслеживайте эту страницу, если рассчитываете на высокие позиции в поисковой выдаче Google.Lighthouse
Пожалуй, самый удобный инструмент для первичной аналитики ресурса и выявления в нем недостатков. Одной кнопкой можно создать профиль сайта и получить все необходимые сведения о нем. Lighthouse покажет все слабые и сильные места ресурса.
Скорость загрузки и работы, адаптированность под людей с ограниченными возможностями, корректность верстки, адаптация под поисковые машины (SEO), поддержка Progressive Web App и т.п.
Инструменты разработчиков в Safari и в Mozilla Firefox
Естественно, Chrome – не единственный браузер, оснащенный HTML-редактором и дебаггером. Аналогичная функциональность есть в Safari и Firefox. У них зачастую даже интерфейсы схожие. Примерно такие же инструменты для визуального редактирования CSS и т.п.
Важное отличие инструментария в Chrome – наличие аналитических систем в духе Lighthouse. Они позволяют напрямую взаимодействовать с Google. Так проще исправлять ошибки в коде и адаптировать ресурс под требования поисковых машин.
Также инструменты в Safari и Firefox отличаются во всевозможных мелочах. Разные горячие клавиши, разное поведение при выделении и редактировании текста, разные ошибки в консоли по умолчанию и т.п. Но принцип остается один. Возможно, более детальные отличия изучим в следующих материалах.
Вместо заключения
На этом закончим обзорную статью про Chrome DevTools. При глубоком изучении инструмента выяснится, что в нем есть еще много полезных функций и скрытых настроек. Правда, охватить их в одном материале не получится. Но и описанных возможностей должно хватить, чтобы у тех, кто раньше недооценивал Chrome, появился повод передумать и взглянуть на DevTools по-новому.
Chrome Developers – одна из версий браузера Google Chrome, созданная специально для веб-разработчиков и продвинутых пользователей. Используется для тестирования новых обновлений, расширений перед их выпуском «в свет». Не рекомендуется для повседневной работы, но отлично подходит для пользователей, которые хотят протестировать обновления за несколько недель до их официального выпуска.
Особенности Google Chrome Dev
Основной функционал Chrome Dev идентичен стабильной версии, которая подходит для повседневного использования. Пользователь может пользоваться поиском/историей посещений, создавать закладки и добавлять страницы в «Избранное», получать предупреждения от системы безопасности при посещении опасных ресурсов, использовать голосовые команды.
При этом Google Chrome для разработчиков имеет ряд отличий:
- Наличие инструментов для разработки, необходимых при создании плагинов для Chrome.
- Наличие продвинутой консоли для правки кода и включения скрытых функций браузера.
- Возможность оптимизировать создаваемые расширения под разные релизы браузера, ещё не доступные в стабильной версии.
- Частые обновления – происходят иррегулярно, но не реже раза в две недели. Это удобно для тех, кто тестирует новые возможности веб-обозревателя и поисковой системы.
Chrome для разработчиков возможно использовать параллельно с другими тестовыми версиями (Canary, Beta), а также со стабильной – классическим релизом браузера, который использует большинство пользователей. Это позволяет разработчикам проверять расширения и обновления в разных версиях Хром.
Достоинства и недостатки Chrome Dev
Достоинства и недостатки Chrome Dev
Возможность протестировать обновления и плагины за несколько недель до официального выхода, при этом не рискуя навредить стабильной работе браузера. Возможность одновременного запуска со стабильной версией браузера (ранее для этой цели приходилось использовать Google Chrome Portable). Возможность синхронизации с другими устройствами, подключёнными к аналогичному аккаунту Google. Возможность создавать собственные плагины/приложения и тестировать их с разных устройств. Пользователь может тестировать браузер, искать ошибки и отправлять уведомления в службу поддержки. Большинство проблем решается таким образом ещё до перехода в стабильную версию. Версия используется для тестирования расширений и обновлений, поэтому многие функции привычного браузера могут в ней отсутствовать или периодически пропадать, версия нестабильна. Не подойдёт обычному пользователю, так как создавалась специально для продвинутых юзеров и веб-разработчиков.Среди тестовых версий Dev ближе всего к стабильной, подходящей для регулярного использования.
Как скачать и установить Chrome Developer на компьютер Виндовс:
Для скачивания предлагается Гугл Хром Dev для 64-разрядной версии Windows 10/8.1/8/7. Ссылка на загрузку браузера для 32-разрядной версии Windows, macOS, Linux и Android располагается по ссылке ниже.
Загрузить браузер с официального сайта по ссылке.
Помимо десктопной версии так же существует релиз Google Chrome для разработчиков специально для Android, позволяющий тестировать обновления на мобильных устройствах. Загрузить мобильный браузер для разработчиков можно через Play Market:
Удалить Chrome Dev можно через Play Market. Откройте ссылку, через которую вы скачивали браузер. Вместо кнопки «Установить» появится «Удалить».
Загрузить приложение по ссылке.
Портативная версия Chrome Dev
Хром для разработчиков доступен в виде версии Portable – она не устанавливается в системные файлы компьютера, хранить её можно на флэшке и запускать с любого устройства. Подойдёт пользователям без прав Администратора на конкретном компьютере. Среди недостатков – более низкая скорость загрузки.
Как установить Chrome Dev Portable:
При копировании браузера Portable на внешний носитель или другой компьютер не будут перенесены избранные страницы, история посещений, закладки. Рекомендуется заранее выполнить синхронизацию.
Google Chrome Dev – версия браузера, созданная для веб-разработчиков и продвинутых юзеров. Позволяет создавать новые плагины и проверять их перед выпуском, тестировать обновления за несколько недель до официального релиза. Не рекомендуется для повседневного использования в связи с большим количеством ошибок.
Читайте также: