Некоторые возможности инструмента разработчика в Chrome. Гугл хром инструменты
Некоторые возможности инструмента разработчика в Chrome
Chrome – один из популярнейших браузеров на текущий момент. Он предоставляет удобную среду для разработчиком с множеством полезных функций. Google Chrome DevTools – официальный инструмент, который позволяет получить разработчикам более полный доступ к браузеру и приложению.
Особенности DevTools
Здесь вы фактически можете тестировать отображение сайта на различных устройствах, редактировать HTML и CSS на лету, замерять производительность отдельных участков, дебажить JavaScript.
Также для работы с отдельными фишками возможно вы захотите использовать Google Chrome Canary – эксперементальную версию Chrome. Данная версия может быть легко запущена рядом с обычным Chrome.
chrome://flags
и выбрать весь необходимый инструментарий.
С полным набором возможностей вы можете ознакомится на официальном сайте.
Как открыть инструмент разработчика?
Для этого можно воспользоваться одним из вариантов:
-
Через меню браузера
Войдите в меню, кликнув по иконке 
, кликните на “More tools” и выберите “Developer Tools.”
-
Через нажатие правой кнопки мыши
Нажмите на любом элементе страницы правой кнопкой мыши и выберите “Inspect element”.
-
С помощью горячих клавиш
Нажмите сочетание клавиш в зависимости от вашей операционной среды
- Windows: F12 or also Ctrl + Shift + I
- Mac: Cmd + Opt + I
Советы и приёмы для работы с инструментами разработчика.
Здесь приведены лишь некоторые возможности из множества доступных. Для некоторых из них используется Canary.
Быстрый переход по файлам.
В открытой вкладке с исходными файлами нажмите сочетание Ctrl + P (Cmd + P) и ищите необходимые файлы.
Форматирование с помощью {}
Нажав на {} вы можете изменить форматирование исходного кода и вернуться к нормальному виду.
Редактирование HTML – элемента
Вы можете на лету редактировать HTML выбирая любом элемент внутри DOM и дважны кликнув на него. Закрывающиеся тэги будут автоматически отредактированы. Все изменения будут сразу же отображены.
Редактирование CSS – свойств
Аналогично как и HTML, точно так же вы можете редактировать и CSS.
Поиск в исходном коде
Вы можете быстро производить поиск в исходном коде с помощью комбинации Ctrl + Shift + F (Cmd + Opt + F), а также производить поиск по css – селектору нажав Ctrl + F (Cmd + F).
Точки останова в Javascript Breakpoints
При дебаге Javascript часто бывает полезным использовать точки останова. В инструменте разработчика вы можете выбрать номер строки, где хотите остановиться и нажать Ctrl + R (Cmd + R) для перезагрузки страницы. Именно в этом месте и прервётс загрузка.
Переход по номеру строки
Нажав Ctrl + O (Cmd + O) и использовав специальный синтаксис, вы можете быстро перейти на нужную строку. В примере введено :200:10, это значит, что переход прошёл на строку 200 и колонку 10.
Множество курсоров
Если вам надо одновременно вводить значения в нескольких местах или редактировать тот же font-size, то нажав Ctrl + Click (Cmd + Click) можно одновременно вводить информацию в нескольких местах.
Изменение положения окна
Окно DevTools имеет три положения: с одной из сторон, внизу и плавающее. Вы можете переключаться между ними с помощью Ctrl + Shift + D (Cmd + Shift + D) или через специальное меню в правом верхнем углу окна.
Очистка куки
Для работы со стороними плагинами иногда бывает необходимым очистить cookies. На вкладке “Resources” вы можете найти необходимы куки и удалить их через контекстное меню.
Проверка на различных устройствах
Если у вас адаптивный дизайн, то вы можете проверить своё приложение на различных устройствах. С помощью этого режима вы сможете проверить наличие проблем с вёрсткой на мобильных устройствах или при различных размерах браузера. Для входа в этот режим нажмите на 
Цветовая паллета и пипетка
Нажав в css – стилях на нужный цвет в разметке вы сразу попадёте в цветовую паллету, где для любого элемента сможете выбрать более подходящий под ваш дизайн цвет. С помощью пипетки можно быстро посмотреть цвет любого элемента на странице.
Смена формата цвета
Можно переключаться между различными отображениями цветов: RGBA, HSL и шестандцатиричным. Нажатие Shift + Click на блоке с цветом поменяет формат.
Эмуляция сенсорного экрана
Классная фича DevTools помогает симулировать тачскрин и акселерометр. Для этого перейдите по пути “Console -> Emulation -> Sensors”.
Переключение между состояниями элемента
Часто необходимо проверить скрытый стиль, например, :hover атрибут. В Firefox местная среда разработки позволяет проверить его непосредственно, когда он вызван. Но в Chrome всё иначе. Здесь есть штука под названием “toggle element state”. Она позволяет посмотреть свойства аттрибута непосредственно в панели стилей.
Сохранение изображение как Data URI (base64 кодировка)
Можно сохранить изображение со страницы как Data URI или сконвертировать в base64. При этом не нужно использовать какие-либо сторонние сервисы. Для этого перейдите во вкладку “Network”, выберите нужное изображение, кликните правой кнопкой мыши по нему и нажмите на “Copy image as Data URL”.
Просмотр User Agent Shadow DOM
Когда вы работаете с контролами типа кнопки или строки ввода, браузер автоматически добавляет скрытые атрибуты. Чтобы их увидеть нажмите F1 (?) и выберите “Show user agent DOM”. Как показано на примере, в нашем DOM – дереве появился скрытый атрибут #shadow-root div. Теперь, при необходимости можно повесить на него какие-нибудь CSS – стили.
Выбор следующего вхождения
Когда вам надо поменять одно и то же свойство для нескольких элементов, то инструмент разработчика может ускорить этот процесс. Сделайте двойной клик на нужном свойстве, с помощью Ctrl + D (Cmd + D) пометьте все необходимы вхождения. Теперь меняя значение в одном месте, оно меняется одновременно и в остальных выбранных местах.
Рабочее окружение
По умолчанию когда вы что-то меняте в инструменте разработчика, то при перезагрузки страницы всё пропадает. С помощью рабочего окружения можно необходимые изменения сохранить на диск. Правой кнопкой мыши нажмите на папку и в меню нажмите на “Add folder to local workspace”, далее сделайте тоже самое для нужного файла, но в меню жмите на “Map to file system resource…”.
Диафильм прогрузки
Нельзя обойти стороной классную возможность создания диафильма из состояний при прогрузке вашего сайта. Чтобы проверить как рендориться ваш сайт в течении каждого этапа его прогрузки зайдите в панель “Network”, нажмите на картинку с камерой и потом нажмите Ctrl + R (Cmd + R), чтобы перезагрузить страницу. В итоге вы получите скриншоты загрузки вашей страницы в каждый момент времени.
Время загрузки DOM
Chrome DevTools позволяют проверить скорость загрузки DOM – структуры и общую скорость загрузки страницы. Для этого идём во вкладку “Network”, кликаем на “Show Overview” и жмём Ctrl + R (Cmd + R) для перезагрузки страницы. Синяя линия показывает время загрузки DOM – структуры, а красная – общее время. Всё что слева и на синей линии – это блокеры для загрузки DOM и являются причиной медленного рендеринга страницы.
Профили для скорости сети
Для тестирования загрузки приложения по мобильной сети или в условиях лимитированной скорости Интернета есть возможность создать специальный профиль, в котором будет указана нужная скорость загрузки. Для этого переходим в нисподающее меню “Throttling” на вкладке “Network” и кликаем на “Add a custom profile…” для создания своего профиля или выбираем один из предложенных.
Панель безопасности
С её помощью можно протестировать миграцию на HTTPS и быстро исправить возможные предупреждения. Идём в “Security” панель и жмём Ctrl + R (Cmd + R). Зелёным цветом будут помечены безопасные скрипты и красным вызывающие подозрение.
Валидация Google AMP HTML
Google Accelerated Mobile Pages (AMP) – опенсорсный проект для увеличения скорости загрузки приложения на мобильном устройстве за счёт использования легковесных HTML страниц. Чтобы Google проиндексировал AMP версию ваше страницы вы должны её провалидировать. Для этого кликните на панеле “Console”, далее необходимо добавить #development=1 к AMP версии в адрессной строке браузера. Жмём Ctrl + R (Cmd + R) для перезагрузки. В случае успешной валидации мы увидим нотификашку. Дальше можно более подробно прочитать ошибки при AMP валидации.
Использование инструментов разработчика из Firefox в Google Chrome
Если вдруг так случилось, что вам понадобился инструмент разработчика из Firefox, то можете попробовать Valence – эксперементальный плагин от команды Firefox. Он предназначен для дебага в различных браузерах. Требуется 37 версия хрома и выше.
Например, в OSX вы с помощью следующей команды можете запустить версию Chrome для дебага
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir')
$ /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --no-first-run --no-default-browser-check --user-data-dir=$(mktemp -d -t 'chrome-remote_data_dir') |
Как только соединение установлено, вы можете открыть Firefox WebIDE, выбрать “Chrome Desktop” и тем самым получить доступ Firefox Developer Tools из Chrome.
Итоги
Как видите, Chrome предоставляет широкий набор возможностей для разработки и тестирования ваших приложений. Однако, здесь перечислена лишь малая часть от всех доступных, за более подробной информацией обращайтесь на официальный сайт.
-
Некоторые возможности инструмента разработчика в Chrome
http://qaat.ru/wp-content/uploads/2017/11/chrome-devtools-150x150.png
Chrome – один из популярнейших браузеров на текущий момент. Он предоставляет удобную среду для разработчиком с множеством полезных функций. Google Chrome DevTools – официальный инструмент, который позволяет получить разработчикам более полный доступ к браузеру и приложению. Особенности DevTools Здесь вы фактически можете тестировать отображение сайта на различных устройствах, редактировать HTML и CSS на лету, замерять […]
- ВКонтакте
- Одноклассники
- Mail.ru
- Google+
- Livejournal
qaat.ru
Инструмент для удаления программ
Bahasa Indonesia Bahasa Melayu – Malaysia Català Čeština Dansk – Danmark Deutsch – Deutschland Eesti English – Australia English – Canada English – India English – Ireland English – United Kingdom English – United States Español – España Español (Latinoamérica) – México Filipino Français – France Hrvatski Italiano – Italia Latviešu Lietuvių Magyar Nederlands – Nederland Norsk – Norge Polski – Polska Português (Brasil) – Brasil Português (Portugal) – Portugal Română Slovenčina Slovenščina Suomi – Suomi Svenska – Sverige Tiếng Việt Türkçe Ελληνικά Български Русский – Россия Српски Українська עברית العربية – المملكة العربية السعودية فارسی हिन्दी ไทย 한국어 – 대한민국 中文（简体中文） – 中国 中文（繁體中文） – 台灣 日本語 – 日本
www.google.ru
Google Chrome - инструменты для web-мастера
Для того, чтобы попасть в консоль, откройте ваш сайт в Google Chrome, щелкните правой кнопкой мыши в любом месте web страницы, и выберите Просмотр кода страницы в контекстном выпадающем меню, или же по конкретному элементу для исследования, выбрав Просмотр кода элемента. Вверху у вас будет перечислено несколько вкладок. Сегодня мы поговорим о вкладке Elements, на которой представлены элементы web страницы с подсветкой тегов, свойств, выделением вложенности элементов, представлением иерархии элемента в дереве DOM (подсказка внизу, от корневого родительского к текущему исследуемому), возможностью редактирования элементов, перечень их свойств, рассмотрим поиск по элементам, а также познакомимся с просмотром связанных с элементами стилей css и т.п..
Как просмотреть все стили, которые связаны с определенным элементом? Какой из них применяется сейчас? В каких файлах они расположены?
Итак, нет ничего проще! Открываем браузер Google Chrome, открываем наш сайт – источник вопросов, щелкаем по нужному элементу правой кнопкой мыши, если он виден в контексте страницы, и выбираем в контекстном меню пункт Просмотр кода элемента. Внизу у нас появляется консоль с выделенной вкладкой слева Elements и всеми, связанными с элементом стилями справа, где: Computed Styles – это общие «сводные» стили, которые были назначены элементу из правил css и настроек браузера пользователя (его среды окружения), и при этом вкладка свернута. Но нас интересует вкладка Styles, развернутая под ней, в которой поочередно перечислены все стили, назначенные элементу, а также файлы, где данные правила указаны для этого элемента по его типу, id, классу, имени, свойству, атрибуту и т.п. При этом, если css правило перечеркнуто, значит оно было переопределено ранее/далее (что позволяет легко отследить, какое из css правил является приоритетным и применяется в данном случае к элементу).
Внизу под консолью расположена строка, которая показывает элемент в иерархии документа, легко позволяет просмотреть весь список родительских элементов от корневого до выбранного элемента. Что-то наподобие «хлебных крошек».
Html тег не виден в контексте страницы? Или нужно найти все теги, например, по определенному классу, имени, свойству, типу?
Открываем сайт в Google Chrome, щелкаем правой кнопкой мыши, вызываем контекстное меню, выбираем Просмотр кода страницы. Нажимаем сочетание клавиш CTRL + F одновременно, вводим нужную нам фразу (например:) и перемещаемся по списку найденных результатов, попутно просматривая все стили, связанные с нужными элементами в правой части страницы.
Но верстка web сайтов бывает делом утомительным, рекомендуем Вам время от времени прерываться на отдых, например, за чашкой кофе с бутербродом, особенно, если хлеб вкусный, например из хлебопечки lg (не то, что магазинный).
Как просмотреть код html элемента (элементов), подгружаемых динамически (например: по Ajax).
Ждем загрузки страницы в Google Chrome. Выполняем нужные действия, чтобы сработал Ajax. Щелкаем правой кнопкой мыши по загруженным данным, выбираем в контекстном меню Просмотр кода элемента, исследуем результат в консоли на вкладке Elements слева.
Просмотр изменения css стилей в режиме реального времени.
Кстати, также удобно бывает наблюдать при необходимости: какие стили назначаются элементу налету, например, при прокрутке галереи и других событий по таймеру. Все назначенные через javascript стили в реальном времени будут отображены в свойстве style выделенного элемента в окне на вкладке Elements.
Интерактивный просмотр влияния правил css на представление html тегов.
Google Chrome предоставляет интерактивную консоль для css стилей. А это значит, что Вы можете не только просмотреть, какие стили применяются к элементу, но, и подвести курсор мыши на определенное из свойств css, включить при помощи всплывающей галочки справа, или отключить его, сняв флаг, и просмотрев получившийся результат на странице.
Изменяем структуру представления html элементов налету (прямо в браузере).
Итак, исследовать структуру web документа в Google Chrome мы уже научились, теперь рассмотрим вкратце редактирование элементов налету. Переходим в консоль любым удобным для нас способом. Находим нужный элемент во вкладке Elements, щелкаем по нему правой кнопкой мыши, вызываем тем самым всплывающее контекстное меню:
Add attribute – добавляет атрибут для указанного элемента. Как только станет активным курсор, начинаем задавать нужное свойство. Например: напишем name="itemImage", которое будет незамедлительно добавлено к нашему элементу.
Edit attribute – если щелкнуть по атрибуту элемента правой кнопкой мыши, становится доступным пункт edit attribute. Щелкаем, редактируем.
Пример использования: мы забыли пароль, сохраненный под звездочками в Google Chrome (если пароль был сохранен в этом браузере). Щелкаем правой кнопкой мыши по элементу с вводом пароля, щелкаем по Просмотр Кода Элемента, в консоли слева на вкладке Elements щелкаем по атрибуту type="password" правой кнопкой мыши, левый щелчок мышью по Edit attribute, меняем атрибут type="password" на type="text", и вот у нас уже вместо звездочек отображается тот самый пароль в виде текста.
Edit html – щелкаем правой кнопкой мыши по элементу в консоли Elements, выбираем Edit html, меняем код по своему вкусу.
Copy as HTML – копируем нужную нам порцию HTML для дальнейшего исследования, скажем, в блокноте, или для других целей, где нам нужно применить точно такую же верстку. Экономим время.
Copy XPATH – копирует XPATH представление структуры от корня родительского элемента до выделенного элемента.
Delete node – если нужно удалить текущий выделенный элемент и все его дочерние из контекста web страницы, и посмотреть результат.
Word wrap – сделает представление web страницы в контексте консоли Elements более читаемым.
В следующих статьях мы продолжим рассмотрение средств для web-мастера, и в частности познакомимся с остальными вкладками инструментов для web-мастера в Google Chrome, а также рассмотрим отладку ошибок javascript средствами разных браузеров
Больше информации о веб технологиях можно узнать из нашего перечня всех статей на сайте:
awesome-design.com
Браузер Chrome
Условия предоставления услуг Google Chrome
Настоящие Условия предоставления услуг распространяются на исполняемый код Google Chrome. Исходный код Google Chrome предоставляется бесплатно на условиях лицензионных соглашений на программное обеспечение с открытым исходным кодом по адресу https://code.google.com/intl/ru/chromium/terms.html.
1. Взаимоотношения с компанией Google
1.1. Использование продуктов, программного обеспечения, служб и сайтов, принадлежащих Google (далее по тексту совместно именуемых "Услуги", за исключением услуг, предоставляемых компанией Google в рамках отдельного письменного соглашения), регулируется условиями юридического соглашения между Вами и Google. Под "Google" понимается корпорация Google Inc., главный офис которой находится по адресу 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States. В настоящем документе описываются основные положения соглашения, а также изложены некоторые условия данного соглашения.
1.2. Если с компанией Google не заключено иного письменного соглашения, то ваше соглашение с компанией Google всегда будет включать в себя по меньшей мере те условия использования, которые изложены в данном документе. Далее они именуются "Универсальные условия". Лицензии на программное обеспечение с открытым исходным кодом для исходного кода Google Chrome составляют отдельные письменные соглашения. В тех случаях, когда лицензии на программное обеспечение с открытым исходным кодом явным образом заменяют собой эти Универсальные условия, Ваше соглашение с Google на использование Google Chrome или отдельных компонентов Google Chrome регулируется лицензиями на программное обеспечение с открытым исходным кодом.
1.3. В Ваше соглашение с Google, помимо Универсальных условий, также включены условия, указанные в приведенных ниже Дополнительных условиях предоставления услуг Google Chrome, и условия всех юридических уведомлений, действующих в отношении Услуг. которые далее именуются "Дополнительные условия". В тех случаях, когда на Услугу распространяются Дополнительные условия, с ними можно будет ознакомиться в процессе использования данной Услуги либо прочитать в сопутствующей документации.
1.4. Универсальные условия и Дополнительные условия представляют собой юридически обязательное соглашение между Вами и компанией Google о пользовании Услугами. Эти документы необходимо внимательно прочитать. Совокупность этих юридических соглашений именуется далее "Условиями".
1.5. При наличии расхождений между Дополнительными условиями и Универсальными условиями, положения Дополнительных условий, относящиеся к соответствующей Услуге, будут иметь преимущественную силу.
2. Принятие Условий
2.1. Чтобы получить возможность пользования Услугами, необходимо принять Условия. Запрещается пользоваться Услугами, не приняв Условий.
2.2. Принять Условия можно следующими способами:
(А) нажатием кнопки принятия Условий, если она была добавлена компанией Google в пользовательский интерфейс той или иной Услуги; или
(Б) фактическим использованием Услуг. В этом случае Вы соглашаетесь с тем, что Google будет рассматривать факт использования Услуг как принятие Условий.
3. Язык
3.1. Перевод английской версии Условий на другие языки предоставляется исключительно в целях удобства. Вы соглашаетесь с тем, что все отношения между Вами и Google будут регулироваться версией Условий на английском языке.
3.2. При наличии расхождений между английской версией Условий и переводом английская версия будет иметь преимущественную силу.
4. Предоставление Услуг компанией Google
4.1. У корпорации Google есть дочерние и аффилированные компании по всему миру (далее – "Дочерние и Аффилированные компании"). В некоторых случаях эти компании будут предоставлять Услуги от имени компании Google. Вы признаете и согл
www.google.ru
