Need help? Chat now!

Hostwinds Блог

Результаты поиска для:


Несколько указателей для новичков в Google Chrome DevTools Популярное изображение

Несколько указателей для новичков в Google Chrome DevTools

от: Hostwinds Team  /  Август 31, 2019


Что тут сказать о Google в настоящий момент? Большинство фактов о Google уже были, ну, гуляли многими. Следовательно, достойный кусок информации о Google уже много раз распространил мир много раз.

Не волнуйтесь, мы избавим вас случайным фактам Google, как, например, как он был изначально под названием «BackRub».Кроме того, мы рассмотрим что-то о Google, или, скорее, в браузере Google Chrome, это немного менее известно: свободный Инструменты кодирования встроены в сущность Chrome.

Мы имеем в виду, что известно как Инструменты разработчика Google ChromeОтказ Эти инструменты позволяют кому-либо тестировать, отладки или устранять неисправный код, который на сайт. Chrome devtools, как их обычно называют, являются фантастическими ресурсами для разработчиков программного обеспечения.

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

Пожалуйста, обратите внимание: Это очень конденсированное резюме и не покрывает все.Мы даже не поцарапаем поверхность в отношении множества вариантов вариантов, которые вам доступны при использовании Chrome devtools.

Хорошо, люди, хотя это будет очень краткое резюме, у нас все еще есть много земли для покрытия.Давайте начнем с открытия окна Google Chrome и открываем наш Chrome devtools!

Как открыть Google Chrome DevTools

Прежде всего, давайте выберемся с пути: Google Chrome devtools - совершенно потрясающий.Это верно по многим причинам, в том, как легко доступны эти инструменты.

Ниже представлены различные способы открытия Chrome DevTools:

Ваш первый вариант: Нажмите на вертикальные эллипсы на данный момент вашего браузера >> Нажмите «Дополнительные инструменты» >> Нажмите «Инструменты разработчика».

Ваш второй вариант: Щелкните правой кнопкой мыши на странице >> Нажмите на элемент «Осмотрите»

Ваш третий вариант, версия горячих клавиш: Введите "Ctrl" + "Shift" + "I" на клавиатуре

(Для Macintosh: «CMD» + «Опция» + «I»)

Бонус четвертый вариант, редакция горячих клавиш: Наберите F12 на клавиатуре.

Ура! Мы в деле, друзья!

Теперь, прежде чем мы начнем наш учебник, вы случайно знаете, что Chrome devtools был кратко обсужден в предыдущем сообщении в блоге HostWinds о Themes WordPress Childs?

Если нет, то сегодня ваш счастливый день! У нас есть ссылки на части 1 и 2 нашей серии блогов о дочерних темах WordPress прямо здесь:

Дочерние темы WordPress и зачем их использовать

HOVESDWINDS How-To's: Как создать детскую тему WordPress

Примечание: Мы исследуем Chrome DevTools, перейдя от самой левой панели в верхней части окна к самой правой панели.

Начало работы с Chrome DevTools

Давайте перейдем к команде.Нет времени для корневых анекдотов или каламбусов на корне!

Подождите, мы заговорили слишком рано! Мы всегда уделяем время банальным отцовским шуткам и каламбурам. Тем не менее, позвольте нам обратить ваше внимание на значок курсора в верхнем левом углу окна DevTools.

Значок курсора

Видеть, когда значок курсора был воспитан в этом серии блога детской темы WordPress Childe, мы продолжаем поднять, зачем минимальные слова, когда мы можем подтянуть эту цитату?

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

P.S. Это отрывок из части 2 серии блогов о дочерних темах WordPress.

Что это такое?Мы полностью подключаем эту серию блога WordPress в этот момент?Мы сделаем все возможное, чтобы тонить, что он вернулся вперед ... но нет обещаний.Я просто пошутил!Мы просто глупый.

В примере 1 мы используем значок курсора, чтобы найти код, ответственный за «мой блог».Мы меняем текст на «Мой тур!»

В примере 2 мы используем значок курсора, чтобы найти код, ответственный за «Hello World!»Мы меняем текст на «Hi World!»

На следующий! Вправо, мы идем.

Режим устройства

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

Как только вы нажмете раскрывающееся меню «Отзывчивое», вы можете нажать, например, «iPad» или «iPhone X», чтобы увидеть, как ваш сайт будет выглядеть на iPad или iPhone X, соответственно.Ваш сайт отзывчив на все устройства?Этот инструмент даст вам ответ.

Понимание панелей Chome DevTools

На главное событие!

Погодите, первые бессовестные затычки:

Вы новичок в разработке программного обеспечения? Если да, то вот несколько сообщений в блоге Hostwinds, которые помогут вам начать работу с небольшой информацией о HTML и CSS:

Hostwinds HTML Hype

Hostwinds HTML Hype Часть 2: Обсуждение тегов

CSS чат Hostwinds

«Элементы» панели, здесь мы приходите!

Элементы

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

На панели "Элементы" мы можем изменить или отредактировать ваш HTML-код. или CSS. Лучшая часть это: мы можем увидеть изменения, как если бы они жили на нашем сайте. Чтобы указать, что по-разному, после того, как вы измените код и нажмите Enter, ваш браузер немедленно сможет имитировать результат этого изменения, как если бы он был жить на вашем сайте.

Проверьте панель «Стили», которые открываются, когда вы нажимаете на панель элементов.В этом разделе отображаются CSS, которые дополняют коллективное HTML вашего сайта.Редактировать / модифицировать свойства CSS здесь (так же, как вы сделали свой HTML), чтобы увидеть, как это изменение появится в прямом эфире на сайте.

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

Эти прямоугольники представляют что-то о каждом из ваших элементов, как показано ниже:

Чистый синий прямоугольник = Сам элемент

Чистый зеленый прямоугольник = Обивка вокруг элемента

Чистый желтый прямоугольник = Размер границы элемента

Чистый оранжевый прямоугольник = Край, окружающий элемент

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

Теперь щелкните ": HPV" Значок на панели навигации в верхней части панели стилей.Здесь у вас есть ярлык, который позволяет вам сразу добавить «фокус», «Наведите курсор» и т. Д., Эффект к селектору CSS (ы) по вашему выбору.

Если мы посмотрим на право элементов, мы увидим «консоль».

Приставка

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

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

Совет для дальнейшего изучения этой важной панели: Посмотрите на функции «Console.log ()» и «Время ()».

Здесь мы снова идем, двигаясь вправо.Здравствуйте, "Источники" Панель!

Источники

«Источники» помогают сканировать для ошибок в JavaScript и впоследствии впоследствии вносить изменения в ваши JS, а также ваши CSS.Этот раздел позволяет вам устанавливать точки останова, чтобы точно определить точку, где произошла ошибка.Вы также можете удобно перемещаться по файлам вашего сайта здесь.

Теперь, когда мы убрали все багги в нашем коде, давайте просмотрим информацию о загрузке нашего сайта, нажав на вкладку «Сеть».

Сеть

«Сеть» генерирует подробный анализ, насколько хорошо ваши веб-страницы загружаются.Чтобы быть более конкретным, эта область дает вам статистику по поводу загрузки каждого отдельного элемента, один за другим.

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

Пожалуйста, двигайтесь с нами справа и нажмите «Производительность».

Спектакль

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

Определение рендеринга: Когда ваш сайт «визуализирует», он показывает ваш Viewer Front-End результат всей информации, которая была собрана вместе (включая код, элементы в базе данных и т. Д.), Чтобы сделать вашу веб-страницу.Насколько быстро ваш сайт оказывает информацию, оценивается на панели производительности.

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

Если вы нажмете кнопку «Запись», вы получите обзор вашей памяти, номер документа и т. Д.

Что дальше, вы спрашиваете?Еще более объяснение вкладок Devtools!На «память».

Дальнейшее понимание панелей DevTools

Раздел «Память» - это то, где он получает захватывающий и интерактивный.

объем памяти

Эта панель может помочь вам обнаружить потенциальные проблемы памяти.Он показывает, сколько каждая компонент вашего сайта занимает память.Вы можете просмотреть память на вашем сайте с синей кнопкой «Возьми кнопку Snapshot».

Что это такое?Вы хотите знать, что делает следующая панель, так что вы хотите перейти к справа?Ты понял.Право, мы идем!

заявка

Эта панель посвящена хранению. А именно, какой объем хранилища используется вашими базами данных, приложениями, файлами cookie и т. Д. Ваш сайт зависает и работает медленно из-за того, что вы храните слишком много? Эта панель поможет вам с такими вопросами.

Справа от этого, у нас есть «безопасность».

Безопасность

Как вы уже догадались, этот раздел предоставляет вам оценку уровня безопасности, установленной в настоящее время для вашего сайта.Другими словами, это дает вам информацию о том, насколько защищен ваш сайт в это время.Например, эта панель предупреждает вас, если URL вашего сайта не хватает «S» в HTTPS.

Мы почти закончили!Теперь мы проведим функциональность нашего сайта.

Аудит

Область «аудита» представляет собой аудит страниц и приложений на вашем сайте.Этот аудит даст вам знать, если ваши веб-страницы загружаются правильно.Панель аудита полезна для целей SEO и для проверки общей производительности вашего сайта.

Если вы посмотрите в самую правую часть окна, вы увидите значок в виде эллипсов, расположенных сбоку. Щелкните здесь, чтобы просмотреть еще больше инструментов! Кстати, вы можете сделать гораздо больше с помощью Chrome DevTools, но сегодня у нас мало времени. Итак, это все, что касается нашего краткого руководства.

Сюрприз! Мы сохранили банальные шутки до конца только для тебя

Пришло время подвести итоги, дорогие друзья. Вот лучший способ резюмировать эту статью: Инструменты разработчика Google Chrome волшебный! Подождите, есть что еще добавить?

* Думая ... думать ... думать *

О, да!Мы пообещали вам судно папа шутить и каламбуры, поэтому угадайте что?Ты получая шутку корна а также каламбур прямо здесь, ребята! Здесь, в Hostwinds, мы никогда не даем пустых обещаний.

Грубый папа шутка а также Пун все в одном: Поздравляем о завершении нашего урока Chrome devtools. Мы дадим вам золотую медаль для пересечения финишной линии, но ХРОМ металл может быть более подходящим!

Ого, это было грубо. В любом случае, мы надеемся, что вам понравился этот небольшой обзор некоторых функций, советов и указателей Chrome DevTools. Щелкните правой кнопкой мыши свой веб-сайт, чтобы поиграть с очаровательными Инструментами разработчика Google Chrome уже сегодня!

Написано Hostwinds Team  /  Август 31, 2019