Код страницы в хроме: как посмотреть код страницы в Google Chrome — Сергей Почекутов

Щелкните правой кнопкой мыши элемент HTML и отредактируйте его напрямую, используя параметр «Редактировать как HTML», чтобы добавить или удалить контент в Интернете.

Узнайте больше о том, как просмотреть структуру HTTP-ответа в консоли разработчика Chrome.

Заключительные слова

Мы надеемся, что эта статья помогла вам понять, как просматривать исходный код в Chrome. Помните, что просмотр исходного кода — это очень типичное действие, и любой пользователь может это сделать. Но использование консоли разработчика требует от вас много времени на обучение. Также Chrome обновляет функции в каждой версии, что делает процесс обучения непрерывным. Но это должно быть очень интересно и увлекательно для понимания и устранения проблем с концепциями веб-дизайна.

Просмотры: 368

Навигация по записям

Похожие записи

Как изменить код страницы в Google Chrome

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

Что такое HTML код страницы?

Каждая страница, которую вы открываете в браузере, имеет свой код на языке разметки HTML. Этот код представляет собой теги и текст. Теги это своеобразные метки, которые указывают браузеру, как отображать ту или иную часть сайта. Текст – это наполнение страницы, то, что видит пользователь. Также к странице могут быть подключены CSS стили, которые задают внешний вид элементов страницы. Чтобы изменить исходный код сайта не нужно досконально знать HTML и CSS и скоро вы в этом сами убедитесь.

Зачем изменять веб-страницу?

Вы можете подменить данные на сайте, изменить текст сообщения Вконтакте, сделать фейковый скриншот. Обратите внимание, что все изменения видны только вам и при перезагрузке страницы они исчезнут. Также измененные данные не будут реальными. Например, если у меня на WebMoney есть 10 долларов, а я изменю на 100, то денег у меня больше не станет. Это лишь отображение страницы браузером. Пример:

До:

После:

Изменяем HTML код страницы

Для примера я возьму этот же сайт и изменю предыдущий анонс статьи “Зачем нужна Java на компьютере или ноутбуке” Открываю главную страницу в Google Chrome. Нажимаю ПКМ по элементу, который я хочу изменить, например заголовок анонса и выбираю “Посмотреть код”.

В открывшемся окне переходим на вкладку Elements и видим HTML код страницы. В нем нужно найти интересующий нас текст. (подчеркнут красным)

Теперь удалю старый текст и впишу новый.

Вот и все, название анонса изменено. Теперь я изменю сам анонс, метки и рубрику.

Вставить другую картинку можно изменив атрибут src в теге img.

Я нашел в интернете картинку с пингвином и скопировал ссылку.

Страница готова.

Итог

Как видите, ничего сложного. В Opera, Mozilla Firefox все точно так же. Чтобы подменить внешний вид страницы, шрифты, фоны, рамки, отступы, добавить или удалить элемент и производить более сложные изменения, нужны знания HTML и CSS. Используйте это в своих целях. Желаю удачи.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Как просмотреть исходный код HTML в Google Chrome

Автор Архипов Егор На чтение 2 мин. Просмотров 338 Опубликовано 25.07.2019

Независимо от того, являетесь ли вы веб-дизайнером, отлаживающим исходный код своего сайта, или просто хотите узнать, как выглядит код сайта, вы можете просмотреть исходный HTML-код прямо в Google Chrome. Существует два способа просмотра исходного кода HTML: просмотр исходного кода и проверка с использованием инструментов разработчика.

Просмотр источника с использованием просмотра страницы источника

Запустите Chrome и перейдите на веб-страницу, на которой вы хотите просмотреть исходный код HTML. Щелкните правой кнопкой мыши страницу и выберите «Просмотр источника страницы» или нажмите Ctrl + U, чтобы увидеть источник страницы на новой вкладке.

Откроется новая вкладка вместе со всем HTML-кодом для веб-страницы, полностью развернутым и неформатированным.

Если вы ищете определенный элемент или часть в источнике HTML, использование View Source является утомительным и громоздким, особенно если на странице много JavaScript и CSS.

Проверьте источник с помощью инструментов разработчика

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

Откройте Chrome и перейдите на страницу, которую вы хотите проверить; затем нажмите Ctrl + Shift + i. Прикрепленная панель откроется рядом с просматриваемой веб-страницей.

Нажмите на маленькую серую стрелку рядом с элементом, чтобы расширить его еще больше.

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

Когда панель открывается в этот раз, она переходит непосредственно к той части кода, которая содержит тот элемент, который вы щелкнули

Если вы хотите изменить положение дока, вы можете переместить его внизу, влево, вправо или даже отсоединить в отдельном окне. Нажмите на значок меню (три точки), затем выберите «Отстыковку» в отдельном окне, закрепите слева, закрепите снизу или закрепите справа, соответственно.

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

Как посмотреть код страницы на телефоне или как обходиться в работе без ПК

Хозяйке на заметку: Если вы работаете на телефоне или планшете и вам нужно посмотреть код страницы или найти что-то в коде HTML, выполните следующие простые действия:

1. Откройте требуемую страницу в Google Chrome на телефоне или планшете
2. Допишите в начало адреса страницы «view-source:» и нажмите [Enter] (перейти)
3. Выберите в меню (три точки справа) пункт «Найти на странице»
4. Введите нужный текст для поиска

Вот и всё.

Телефон вместо компьютера

Вообще на эту заметку меня сподвигла статья в Ферре «Почему смартфон так и не заменил компьютер, хотя нам давно это обещали» , которую я прочитал за утренним кофе. Вообще, я во многом не согласен с Денисом Поповкиным, автором статьи. Наверное потому, что телефоны УЖЕ заменили компьютеры. И это легко увидеть. Автор подходит со свой колокольни, со своей проблематикой, но мне она кажется довольно однобокой. Если же в общем говорить о том, чем является «работа на компьютере», то можно выделить следующие пункты:

• Работа на работе (офис, бизнес-задачи)
  • Коммуникации (почта, всякие мессенджеры, Скайпы, совещания и т.п.)
  • Документооборот (документы, таблицы, формы)
  • ERP / CRM (клиенты, задачи, финансы, бизнес-процессы)
  • Специализированный софт (ну тут уже зависит от темы)
• Работа на выезде (командировки, клиентские встречи, презентации, курсы)
  • Коммуникации (почта, мессенджеры)
  • Презентации и демонстрации
  • Документооборот
• Работа дома
  • Коммуникации (мессенджеры, Скайпы и т.п.)
  • e-Commerce (шоппинг)
  • Интернет и развлечения
  • Хобби (например, фотография, видео, кодирование и т.п.)
  • Редко, ведение домашнего хозяйства (финансы, планирование и т.п.)

Вот, пожалуй, и всё.

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

Ну а первые два пункта, думаю, всё зависит от направленности бизнес-задач. Конечно же, фотошоп или какой нибудь CAD на телефоне запустить очень и очень проблематично, если вообще возможно, но все остальные задачи решаются легко, хотя и немного непривычно первое время. Например, я уже не раз и не два отправлялся в командировки на неделю и более вообще без ноутбука, планшет, мышка и хорошая BT-клавиатура (это важно!) вполне заменяют рабочее место.

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

Всевозможные ERP / CRM — опять же, зависит от реализации. У нас в компании худо бедно наша система работает с мобильника (хотя клиенты и жалуются, что не очень удобно. Мы это слышим и что-то даже исправляем). Про всякие 1С молчу, это — харам, мы не пользуемся!

Далее, автор пишет:

Следующий момент — сами приложения. Казалось бы, да — можно напечатать текст даже на смартфоне. Хорошо, но нам ещё нужно подобрать изображения для статьи, обрезать их под нужное соотношение сторон и ширину пикселей, а потом вставить в админку CMS.

Ребята, открою вам страшную тайну: у вас CMS — говно! Нормальные CMS давно и успешно решают любые задачи, связанные с публикацией либо полностью автоматически («обрезать их под нужное соотношение сторон и ширину пикселей»), либо великолепно это делают с любого устройства. Например, эту заметку я пишу хоть и на десктопе (большей частью), но и на телефоне в том числе:

Так что, проблема в конкретной CMS, а не в возможности удобной работы. У Ферры самописка из разряда «Самостряп-303», ну и если разработчики не предусмотрели таких функций — то это проблемы коллектива Ферры.

Специализированный софт — вот это да. Для меня специализированным софтом является прежде всего IDE для написания софта и работы с сайтами (собственно об этом и заметка), и вот здесь не все так гладко. Нет, сама IDE есть на планшете и мобильнике, но из-за особенностей клавиатуры и мышки Android писать софт не совсем удобно. Хотя допускаю, что я просто не настроил клавиатуру должным образом.

Ну и наконец, выезды и командировки. Для себя я давно перешел на исключительно на телефон. Таскать с собой ноут (хотя он и легкий у меня — менее 1.5 кг.) или даже планшет с клавиатурой и мышкой не очень хочется. Поэтому я перешел на работу в командироках, курсах и выездах с исключительно телефона.

Например, вот такой нехитрый набор позволяет легко проводить лекции и презентации. В Московском Политехе я вот так недавно отчитал трехмесячный курс. В набор входят:

1. Современный смартфон
2. Доп.аккумулятор с подставой для смартфона
3. HDMI-донгл Miracast для трансляции презентации и экрана на любой проектор или ТВ-панель
4. Кликер для презентации с лазерной указкой
5. Складная клавиатура с тач-панелью
6. Резервный Powerbank на случай длительных занятий (более 4 часов)

Все это весит менее 500 гр. и легко помещается в маленькую сумку или барсетку.

В качестве резюме можно сказать, что ПК, конечно же, полноценно телефон пока не заменяет, но львиную долю задач на смартфоне или планшете вполне можно делать и делать успешно. Важно лишь правильно подобрать софт.

как отключить опцию просмотра исходного кода в firefox и chrome ?/

И да, и нет. Вы определенно можете сделать HTML и JS более трудными для расшифровки, запутав свой код, то есть взяв свой код и сделав его запутанным. Вот инструмент, который может это сделать: http://www.colddata.com/developers/online_tools/obfuscator.shtml

Однако все эти вещи используют код, и код может быть расшифрован любым количеством методов. Если вы разместите песню в Интернете, даже если они не смогут найти mp3, они могут просто записать свои колонки. Если вы загружаете изображение и запрещаете пользователям загружать его, они могут сделать снимок экрана или использовать свою камеру. Для того, чтобы HTML и Javascript работали, они должны быть обработаны их компьютером, и даже если вы найдете способ отключить «View Source», есть и другие способы, такие как инспектор DOM (F12 в IE/Chrome, Ctrl+Shift+K в Firefox).

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

Однако вы спрашиваете: «Что, если мне нужен сайт, на котором мои пользователи могут войти в систему, и мне нужна безопасность? Как я могу сделать так, чтобы никто не мог видеть мой код? Разве это не должно быть безопасно и не должно быть открыто?»

И ответ: да, он должен быть безопасным. Это то, для чего предназначены языки на стороне сервера, такие как PHP. PHP выполняет всю работу на самом сервере, чтобы пользователь не мог его видеть. PHP похож на предварительно отрисованный язык-вместо того, чтобы делать это в режиме реального времени, PHP выполняет всю работу заранее, чтобы компьютер пользователя не должен был этого делать, что делает код безопасным. Код никогда не помещается на компьютер пользователя, потому что компьютер пользователя в нем не нуждается. Работа выполняется самим сайтом до отправки страницы. SSL часто сочетается с PHP, чтобы быть абсолютно уверенным, что веб-сайты не были взломаны.

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

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

Как просмотреть исходный код HTML в Google Chrome

Что нужно знать

• Щелкните правой кнопкой мыши веб-страницу и выберите Просмотреть источник страницы .
Ярлык
• : нажмите Ctrl + U (ПК с Windows) или Command + Option + U (Mac).
• Чтобы использовать инструменты разработчика Chrome, выберите Меню (три точки) > Дополнительные инструменты > Инструменты разработчика .

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

Посмотреть исходный код в Chrome

Итак, как вы просматриваете исходный код веб-сайта? Вот пошаговые инструкции, как сделать это в браузере Google Chrome.

1. Откройте веб-браузер Google Chrome (если у вас не установлен Google Chrome, это бесплатная загрузка).

2. Перейдите на веб-страницу , которую вы хотите изучить .

3. Щелкните правой кнопкой мыши на странице и посмотрите на появившееся меню. В этом меню щелкните Просмотреть исходный код страницы .

4. Исходный код для этой страницы теперь появится в браузере в виде новой вкладки.

5. Кроме того, вы также можете использовать сочетания клавиш Ctrl + U на ПК, чтобы открыть окно с отображаемым исходным кодом сайта. На Mac это ярлык Command + Option + U .

Используйте инструменты разработчика Chrome

В дополнение к простой возможности View page source , которую предлагает Google Chrome, вы также можете воспользоваться их превосходными инструментами разработчика, чтобы еще глубже изучить сайт. Эти инструменты позволят вам видеть не только HTML, но и CSS, который применяется для просмотра элементов в этом HTML-документе.

Чтобы использовать инструменты разработчика Chrome:

1. Откройте Google Chrome .

2. Перейдите к веб-странице, которую вы хотите изучить .

3. Выберите меню с тремя точками в правом верхнем углу окна браузера.

4. В меню наведите указатель мыши на Дополнительные инструменты , а затем выберите Инструменты разработчика в появившемся меню.

5. Откроется окно с исходным кодом HTML в левой части панели и соответствующим CSS справа.

6. В качестве альтернативы, если вы щелкните правой кнопкой мыши элемент на веб-странице и выберите Inspect из появившегося меню, появятся инструменты разработчика Chrome и выделят конкретную часть, которую вы выбрали в HTML, с соответствующим CSS, показанным справа. . Это очень полезно, если вы хотите узнать больше об определенной части сайта.

Законен ли просмотр исходного кода?

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

Как мы упоминали в начале этой статьи, вам будет трудно найти сегодня работающего веб-профессионала, который не научился чему-либо, просматривая исходный код сайта! Да, просмотр исходного кода сайта является законным. Использование этого кода в качестве ресурса для создания чего-то подобного также безопасно.Принимая код как есть и выдавая его за свою работу, вы начинаете сталкиваться с проблемами.

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

Больше, чем просто HTML

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

Вероятно, будет включено несколько файлов сценариев; Фактически, каждый из них поддерживает различные аспекты сайта. Откровенно говоря, исходный код сайта может показаться ошеломляющим, особенно если вы новичок в этом деле. Не расстраивайтесь, если вы не можете сразу понять, что происходит с этим сайтом.Просмотр исходного кода HTML — это только первый шаг в этом процессе. Имея небольшой опыт, вы начнете лучше понимать, как все эти части сочетаются друг с другом для создания веб-сайта, который вы видите в своем браузере. По мере того, как вы ближе познакомитесь с кодом, вы сможете узнать из него больше, и он не будет казаться вам таким сложным.

Спасибо, что сообщили нам!

Расскажите, почему!

Как просмотреть исходный код html в Google Chrome ~ Как просмотреть

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

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

В этом руководстве мы покажем вам, как просмотреть исходный код HTML в Google Chrome.

Содержание

Откройте браузер Google Chrome на своем ПК / ноутбуке.

Перейдите на веб-страницу, на которой вы хотите просмотреть исходный HTML-код.

Щелкните правой кнопкой мыши в любом месте веб-страницы, чтобы открыть раскрывающееся меню.

Выберите в меню пункт «Просмотр исходного кода страницы».

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

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

Брэди Гэвин был погружен в технологии в течение 15 лет и написал более 150 подробных руководств и объяснений. Он рассказал обо всем, от взлома реестра Windows 10 до советов по работе с браузером Chrome.Брэди получил диплом по информатике в колледже Камосун в Виктории, Британская Колумбия. Подробнее.

Если вы веб-дизайнер, отлаживаете исходный код своего сайта или просто хотите узнать, как выглядит код сайта, вы можете просмотреть исходный HTML-код прямо в Google Chrome. Есть два способа просмотреть исходный HTML-код: просмотреть исходный код и проверить с помощью инструментов разработчика.

Просмотр исходного кода с использованием страницы просмотра исходного кода

Запустите Chrome и перейдите на веб-страницу, на которой вы хотите просмотреть исходный код HTML.Щелкните страницу правой кнопкой мыши и выберите «Просмотреть исходный код страницы» или нажмите Ctrl + U, чтобы просмотреть исходный код страницы в новой вкладке.

Новая вкладка открывается вместе со всем HTML для веб-страницы, полностью развернутым и неформатированным.

Если вы ищете определенный элемент или часть в исходном HTML-коде, использование «Просмотр исходного кода» утомительно и обременительно, особенно если на странице используется много JavaScript и CSS.

Проверить исходный код с помощью инструментов разработчика

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

Откройте Chrome и перейдите на страницу, которую хотите проверить; затем нажмите Ctrl + Shift + i. Рядом с просматриваемой веб-страницей откроется закрепленная панель.

Щелкните маленькую серую стрелку рядом с элементом, чтобы расширить его еще больше.

Если вы не хотите видеть код всей страницы по умолчанию, а вместо этого проверяете определенный элемент в HTML, щелкните правой кнопкой мыши это место на странице, а затем нажмите «Проверить.”

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

Если вы хотите изменить положение док-станции, вы можете переместить ее вниз, влево, вправо или даже отстыковать ее в отдельном окне. Щелкните значок меню (три точки), затем выберите либо открепить в отдельном окне, либо закрепить слева, либо внизу, либо закрепить справа, соответственно.

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

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

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

В этом руководстве мы покажем вам, как просмотреть исходный код HTML в Google Chrome.

Содержание

Откройте браузер Google Chrome на своем ПК / ноутбуке.

Перейдите на веб-страницу, на которой вы хотите просмотреть исходный HTML-код.

Щелкните правой кнопкой мыши в любом месте веб-страницы, чтобы открыть раскрывающееся меню.

Выберите в меню пункт «Просмотр исходного кода страницы».

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

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

Если вы веб-дизайнер, отлаживаете исходный код своего сайта или просто хотите узнать, как выглядит код сайта, вы можете просмотреть исходный HTML-код прямо в Google Chrome. Есть два способа просмотреть исходный HTML-код: просмотреть исходный код и проверить с помощью инструментов разработчика.

Просмотр исходного кода с использованием страницы просмотра исходного кода

Запустите Chrome и перейдите на веб-страницу, на которой вы хотите просмотреть исходный код HTML. Щелкните страницу правой кнопкой мыши и выберите «Просмотреть исходный код страницы» или нажмите Ctrl + U, чтобы просмотреть исходный код страницы в новой вкладке.

Новая вкладка открывается вместе со всем HTML для веб-страницы, полностью развернутым и неформатированным.

Если вы ищете определенный элемент или часть в исходном HTML-коде, использование «Просмотр исходного кода» утомительно и обременительно, особенно если на странице используется много JavaScript и CSS.

Проверить исходный код с помощью инструментов разработчика

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

Откройте Chrome и перейдите на страницу, которую хотите проверить; затем нажмите Ctrl + Shift + i. Рядом с просматриваемой веб-страницей откроется закрепленная панель.

Стелла | Следуйте | Обновлено 24 ноября 2020 г.

Резюме:

Просмотр исходного кода страницы в Chrome — хороший способ получить полезные идеи дизайна для веб-страниц. В этом посте от MiniTool Software мы в основном поговорим о том, как просматривать исходный код в Chrome двумя разными способами. Мы надеемся, что это будет вам полезно.

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

Тогда как просмотреть исходный код страницы? Вы можете задать этот вопрос. Google Chrome — самый широко используемый веб-браузер во всем мире. В этом посте мы покажем вам, как просматривать исходный Chrome.

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

Как просмотреть исходный код в Chrome

Открыть и просмотреть исходный код страницы в Chrome очень просто. Вот руководство:

1. Откройте веб-страницу, исходную страницу которой хотите просмотреть, с помощью Google Chrome.

2. Щелкните страницу правой кнопкой мыши (не переходите по ссылке), появится всплывающее меню.

3.Выберите Просмотреть исходный код страницы из меню. Здесь вы можете увидеть, что есть ярлык для просмотра исходного кода страницы: Ctrl + U . Это означает, что после доступа к целевой веб-странице вы можете одновременно нажать клавиши Ctrl и U , чтобы открыть и просмотреть исходный Chrome. В то время как, если вы используете компьютер Mac, вам нужно нажать Command + Option + U , чтобы открыть и просмотреть исходный код страницы в Chrome.

4. Появится новая вкладка с исходным кодом для этой веб-страницы.

Это исходные коды, которые вы хотите просмотреть в Google Chrome.

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

Дополнительно: инструменты разработчика

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

Вот что вам следует сделать:

1. Откройте целевую веб-страницу в Chrome.

2. Щелкните меню из трех точек в правом верхнем углу интерфейса.

3. Перейдите к Дополнительные инструменты> Инструменты разработчика .

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

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

Законно ли просматривать исходный код страницы в Chrome?

Читая здесь, вы можете задать вопрос: законно ли просматривать исходный код страницы в Google Chrome? В конце концов, эти источники — коды от других.

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

• Facebook
• Твиттер
• Linkedin
• Reddit

ОБ АВТОРЕ

Должность: Обозреватель

Стелла работает в MiniTool Software редактором на английском языке более 4 лет. Ее статьи в основном охватывают области восстановления данных, включая восстановление данных с носителей и данных телефона, загрузку видео с YouTube, управление разделами и преобразование видео.

Опубликовано 13 апреля 2015 г.

Технически я писатель

• Открытые ресурсы
  • Открыть ресурсы в панели «Сеть»
  • Показывать ресурсы в панели «Сеть» из других панелей
• Обзор ресурсов
  • Просмотр ресурсов на панели «Сеть»
  • Просмотр по каталогу
  • Поиск по имени файла
  • Поиск по типу файла

Из этого руководства вы узнаете, как использовать Chrome DevTools для просмотра ресурсов веб-страницы.Ресурсы — это файлы, которые необходимы странице для правильного отображения. Примеры ресурсов включают файлы CSS, JavaScript и HTML, а также изображения.

Это руководство предполагает, что вы знакомы с основами веб-разработки и Chrome DevTools.

Открытые ресурсы №

Когда вы знаете имя ресурса, который хотите проверить, командное меню обеспечивает быстрый способ открытия ресурса.

Нажмите Control + P или Command + P (Mac).Откроется диалоговое окно Открыть файл .

Рисунок 1 . Диалоговое окно Открыть файл

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

Рисунок 2 . Ввод имени файла в диалоговом окне Открыть файл

Открыть ресурсы в панели «Сеть» #

Рисунок 3 . Проверка ресурса в панели Network

Показывать ресурсы в панели «Сеть» из других панелей #

В разделе «Обзор ресурсов» ниже показано, как просматривать ресурсы из различных частей пользовательского интерфейса DevTools.Если вы когда-нибудь захотите проверить ресурс на панели Network , щелкните правой кнопкой мыши ресурс и выберите Reveal in Network panel .

Рисунок 4 . Панель Reveal in Network , опция

Обзор ресурсов #

Просмотр ресурсов на панели «Сеть» #

Рисунок 5 . Ресурсы страницы в сетевом журнале

Просмотр по каталогу #

Для просмотра ресурсов страницы, упорядоченных по каталогам:

Щелкните вкладку Sources , чтобы открыть панель Sources .

Щелкните вкладку Page , чтобы отобразить ресурсы страницы. Откроется панель Page .

Рисунок 6 . Панель Страница

Вот разбивка неочевидных элементов в Рисунок 6 :

• вверху — это основной контекст просмотра документа.
• airhorner.com представляет собой домен. Все ресурсы, вложенные в него, происходят из этого домена. Например, полный URL-адрес comlink.Файл global.js , вероятно, https://airhorner.com/scripts/comlink.global.js.
• скриптов — это каталог.
• (индекс) — это основной документ HTML.
• iu3 — еще один контекст просмотра. Этот контекст, вероятно, был создан элементом, встроенным в основной документ HTML.
• sw.js — контекст выполнения сервис-воркера.

Щелкните ресурс, чтобы просмотреть его в редакторе .

Рисунок 7 .Просмотр файла в редакторе

Поиск по имени файла #

По умолчанию на панели Page ресурсы группируются по каталогам. Чтобы отключить эту группировку и просмотреть ресурсы каждого домена в виде простого списка:

Откройте панель Страница . См. Просмотр по каталогу.

Щелкните More Options и отключите Group By Folder .

Рисунок 8 . Группировать по папкам опция

Ресурсы организованы по типам файлов.В каждом типе файлов ресурсы организованы в алфавитном порядке.

Рисунок 9 . Панель Page после отключения Group By Folder

Поиск по типу файла #

Чтобы сгруппировать ресурсы вместе на основе их типа файла:

Щелкните вкладку Приложение . Откроется панель Application . По умолчанию панель манифеста обычно открывается первой.

Рисунок 10 .Панель приложения

Прокрутите вниз до панели Frames .

Рисунок 11 . Панель Frames

Раскройте интересующие вас разделы.

Щелкните ресурс, чтобы просмотреть его.

Рисунок 11 . Просмотр ресурса в панели Приложение

Просмотр файлов по типу на панели «Сеть» #

Рисунок 12 .Фильтрация CSS в сетевом журнале

Последнее обновление: понедельник, 13 апреля 2015 г. • Улучшить статью

Крис Хоффман — главный редактор How-To Geek. Он писал о технологиях более десяти лет и два года вел обозреватель PCWorld. Крис писал для The New York Times, давал интервью в качестве эксперта по технологиям на таких телеканалах, как NBC 6 в Майами, и его работа освещалась такими новостными агентствами, как BBC. С 2011 года Крис написал более 2000 статей, которые были прочитаны почти миллиард раз — и это только здесь, в How-To Geek.Подробнее.

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

Эта функция использует функцию «document.designMode», которую вы можете включить через консоль JavaScript вашего веб-браузера. Недавно Томек Сулковски отметил это в Твиттере, но это настолько круто, что мы должны поделиться им с нашими читателями.

То чувство, когда вы впервые обнаружили `document.designMode` pic.twitter.com/bxA1otzCjN

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

Чтобы активировать эту функцию, посетите веб-страницу, а затем откройте консоль разработчика. Чтобы открыть консоль в Google Chrome, нажмите меню> Дополнительные инструменты> Инструменты разработчика или нажмите Ctrl + Shift + i.

Хотя мы используем здесь в качестве примера Chrome, эта функция работает и в других современных браузерах. Вот как открыть консоль в других браузерах:

• В Mozilla Firefox щелкните меню> Веб-разработчик> Веб-консоль или нажмите Ctrl + Shift + K.
• В Apple Safari щелкните Safari> Настройки> Дополнительно и включите «Показывать меню разработки в строке меню». Затем нажмите «Разработка»> «Показать консоль JavaScript».
• В Microsoft Edge щелкните меню> Дополнительные инструменты> Инструменты разработчика или нажмите F12, а затем перейдите на вкладку «Консоль».

Щелкните вкладку «Консоль» в верхней части панели «Инструменты разработчика». Введите в консоль следующее и нажмите Enter:

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

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

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

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

Идиосинкразии Google Chrome — исходный код

Я не обязан делать наше интранет-приложение совместимым с Chrome; однако некоторые другие разработчики предпочитают использовать Chrome, а я предпочитаю браузер.Он быстрый и легкий. Я предпочитаю все надстройки инструментов разработки в Firefox, когда мне нужно выполнить серьезное устранение неполадок, например, Web Developer и Firebug, но они отягощают браузер при начальной загрузке. Chrome, с другой стороны, просто появляется, и я могу сразу перейти к серфингу; однако, как я узнал, Chrome — это совсем другое животное в некотором смысле для серфинга и разработки в Интернете.

Просмотреть исходный код

Когда вы щелкаете правой кнопкой мыши на веб-странице и выбираете « Просмотр исходного кода » в IE или Firefox, вы получаете снимок HTML-сценария за страницей, которую вы просматриваете в данный момент.Не так с Chrome, который, как я понял, отправляет HTTP-запрос на хост для получения исходного кода. Я не уверен, зачем это нужно, поскольку исходный код уже загружен, прямо за просматриваемой страницей, но вот как это работает.

Я нашел этот комментарий к сообщению о кажущейся невысокой функции Chrome «Просмотр исходного кода»:

Хром ведет себя при нажатии кнопки «Просмотр исходного кода страницы» странно. Допустим, вы отправляете запрос POST к одному индексу.php, на этой странице вы хотите увидеть исходный код. Chrome запускает другой запрос на поиск документа с помощью GET; абсолютно безотносительно к текущим опубликованным данным. Обычно вы просто получаете другой документ из того, который вам нужен. Странно мягко говоря!

Как минимум странно, с точки зрения веб-разработки — ОТКАЗ. Как мне увидеть, как моя динамически созданная веб-страница записывает исходный скрипт, если я не могу видеть, как выглядит исходный код, созданный с использованием отправленных переменных POST? У меня есть проблемы совместимости с JavaScript на моем сайте, специфичные для Chrome, и было бы неплохо увидеть, что Chrome получает HTML-код, который, как мне кажется, я пишу, без необходимости просматривать исходный код в FF или IE.

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

Проверить элемент

Если щелкнуть правой кнопкой мыши на веб-странице в Chrome и выбрать «Проверить элемент», откроется консоль инспектора, проходимое древовидное представление объектной модели документа, ориентированное на выбранный узел:

Почему эта функция стоит за «Проверить элемент», а не за «Просмотр исходного кода»? Потому что «Просмотр исходного кода» представляет исходный код, полученный Google Chrome от хоста, а «Проверить элемент» показывает, как DOM выглядит в настоящий момент.Это важное различие, потому что Chrome, как и большинство браузеров, пытается исправить искаженный XHTML. Итак, когда вы просматриваете исходный код, вы видите HTML в том виде, в каком он был отправлен, когда вы проверяете элемент, вы видите HTML в том виде, в каком его переформатировал Google Chrome.

Например, следующий XHTML в «Просмотр исходного кода»:

В «Инспекторе» отображается как:

Привет

Это огромная функция для базового веб-браузера. Похоже, он такой же сложный, как и Web Developer для Firefox, выделяя объекты на странице, когда я наводил курсор на их исходный код в инспекторе, и предоставляя возможность разворачивать и сворачивать деревья узлов, когда мне нужно перемещаться по DOM.Он также имеет журнал ошибок, который обрабатывает искаженный XHTML, а также ошибки JavaScript. Это особенно полезно для устранения неполадок HTML, динамически измененного с помощью JavaScript, поскольку вы можете изменить элемент с помощью JavaScript, например, путем клонирования или с помощью ответа AJAX, а затем просмотреть полученный HTML.

Какое комплексное решение, и браузер по-прежнему открывается по щелчку пальцев! Внезапно я снова влюбился в Google Chrome!

Дополнительные примечания:

Как проверить элемент в Chrome: руководство для начинающих

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

Инструмент «Проверить элемент» полезен в обоих этих сценариях. Он позволяет пользователям получать доступ к исходному коду веб-страницы и манипулировать ее элементами.Поскольку это встроенная функция во всех основных браузерах, как посетители, так и веб-разработчики могут использовать этот инструмент для отладки, тестирования и исследования ключевых слов.

Эта статья покажет вам, как получить доступ к Inspect Element в Google Chrome. Вы узнаете о его различных применениях, в том числе о том, как изменить или скрыть элемент страницы и проверить классы CSS.

Знакомство с панелью «Элементы» в Chrome

Inspect Element — это функция Chrome Developer Tools, которая позволяет вам проверять и изменять веб-элементы внешнего интерфейса страницы.С помощью этого инструмента можно изменять внешний вид и содержание веб-страницы, редактируя ее файлы CSS и HTML.

Есть несколько способов открыть Инструменты разработчика в Google Chrome. Первый способ — через Меню . Щелкните три вертикальные точки в правом верхнем углу браузера. Затем наведите курсор на More Tools и щелкните Developer Tools .

Для более быстрого доступа щелкните правой кнопкой мыши элемент страницы и выберите Inspect .Иногда кнопка Inspect может быть неактивной. В этом случае пользователи Windows и Linux могут нажать Ctrl + Shift + C , а пользователи macOS могут нажать Command + Shift + C для быстрого доступа к инструментам разработчика.

Панель Developer Tools состоит из трех основных частей:

• Панель «Элементы / DOM» — содержит дерево объектной модели документа (DOM) страницы и предоставляет полный доступ к исходному коду HTML. Обычно он находится в верхней части инструментов разработчика.
• Панель CSS — позволяет изменять правила стиля веб-страницы путем изменения, добавления или удаления свойств CSS. Эта панель находится в средней части, прямо под Styles .
• Консоль — показывает, что нового в инструментах разработчика. Он также используется для запуска JavaScript. Он отображается в нижней части инструментов разработчика.

Инструменты разработчика Chrome также включают другие функции, такие как Source , Network , Application , Security и другие.Эта статья покажет вам, как изменить атрибуты страницы с помощью Elements и CSS-панелей .

Что можно делать с инструментами разработчика Chrome?

Функция Inspect Element предлагает множество преимуществ для веб-разработчиков. Вот несколько вещей, которые вы можете делать с панелями Elements и CSS:

• Редактирование CSS в реальном времени — позволяет видеть изменения в реальном времени, когда вы вносите правки на панели CSS.
• Тестирование макета — позволяет тестировать различные макеты веб-сайта перед внесением постоянных изменений в код.
• Диагностика отладки — помогает проверить, есть ли на вашем сайте неработающий код.
• Временное редактирование — позволяет настраивать элементы веб-страницы для просмотра в вашем браузере.

Зачем нужно проверять веб-элементы?

Если вы веб-разработчик, вы можете использовать Inspect Element, чтобы изменить дизайн сайта и увидеть изменения в реальном времени, прежде чем внедрять их навсегда. Это экономит время и делает общение с клиентами более эффективным.

Между тем, авторы контента могут использовать инструмент Inspect Element, чтобы исключить конфиденциальную информацию с веб-страницы перед тем, как сделать снимок экрана. Это быстрее, чем использовать программное обеспечение для редактирования фотографий.

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

В настоящее время большинство браузеров имеют функцию Inspect Element . Однако из этой статьи вы узнаете, как использовать его в Google Chrome.

Обратитесь к нашей странице поддержки, чтобы узнать, как проверять элементы в других браузерах, таких как Mozilla Firefox, Opera и Internet Explorer.

Вот как использовать Inspect Element в Google Chrome:

1. Откройте веб-сайт в Chrome. Для этого урока мы будем использовать домашнюю страницу Hostinger.
2. Щелкните три вертикальные точки на верхней панели меню Chrome, чтобы открыть раскрывающееся меню, затем выберите Дополнительные инструменты -> Инструменты разработчика .

3. Или используйте сочетания клавиш, упомянутые выше, или щелкните правой кнопкой мыши веб-страницу и выберите Inspect для быстрого доступа к инструментам разработчика.

4. Когда панель Elements появится в окне браузера, вы можете внести изменения в исходный код страницы. Измените размер окна инспектора, перетаскивая его за углы для лучшей читаемости.

5. По умолчанию инструменты разработчика отображаются в правой части окна браузера.Если вы хотите изменить его местоположение или переместить в отдельное окно, щелкните три вертикальные точки в правом верхнем углу панели и выберите предпочтительную настройку Dock Side .

6. Чтобы увидеть, как веб-страница отображается на мобильных устройствах, щелкните панель инструментов Toggle device в верхнем левом углу панели. Над предварительным просмотром вы можете изменить переменные, чтобы проверить, как страница работает при другом разрешении экрана или уровне регулирования полосы пропускания.

Inspect Element также позволяет пользователям изменять, удалять или скрывать веб-элементы, а также проверять классы CSS. В следующих разделах представлена ​​подробная информация о том, как выполнять эти действия.

Наконечник Pro

Чтобы проверить конкретный элемент, щелкните его правой кнопкой мыши и выберите параметр Проверить . Окно веб-инспектора откроется и автоматически выделит исходный код выбранного элемента.

Изменить элемент

Чтобы изменить элемент страницы, вам нужно изменить исходный код CSS или HTML страницы.Таким образом, вы можете редактировать текст страницы и его элементы стиля, такие как вес, размер и цвет шрифта.

Панель DOM позволяет легко изменять текст. После открытия окна Elements используйте функцию Inspect — значок курсора в верхнем левом углу панели — чтобы выделить элемент, исходный код которого вы хотите изменить. Затем щелкните правой кнопкой мыши код, выделенный в дереве DOM, и выберите Редактировать как HTML .

Окно редактора расширится, что позволит вам изменить текст.Снимите выделение с элемента, чтобы просмотреть изменения.

Более быстрый метод заключается в двойном щелчке по тексту, который вы хотите изменить, на панели DOM и его замене. Текстовые элементы обычно заключаются в кавычки.

Изменение стиля элементов аналогично, но вам понадобится панель CSS.

Используйте инструмент Inspect , чтобы выделить элемент. Затем щелкните свойство element.style в верхней части панели CSS и добавьте объявления желаемых стилей в фигурные скобки.

В следующем примере мы добавили цвет фона к текстовому блоку:

Если вы хотите добавить еще одно объявление стиля, снова выберите свойство element.style . Веб-инспектор добавит вам еще одну пустую строку для заполнения.

Здесь мы добавили второе свойство, отображающее текст курсивом:

При наведении курсора на свойства CSS на панели CSS появится флажок рядом с каждым из них. Снимите этот флажок, чтобы не отображать стили, которые вы не хотите отображать.Кроме того, вы можете щелкнуть свойство или значение, чтобы заменить его.

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

Скрыть или удалить элемент

Инструменты разработчика также позволяют скрывать элементы веб-страницы. Используя функцию Hide Element , панель CSS создаст свойство видимости, чтобы скрыть элемент, не удаляя его.

Для этого сначала откройте Инструменты разработчика и щелкните элемент, который вы хотите скрыть, с помощью инструмента Inspect .Затем щелкните правой кнопкой мыши код, выделенный в дереве DOM, и выберите Hide Element .

На панели CSS появится новое свойство видимости. Снимите флажок, чтобы отменить изменение.

Если вместо этого вы хотите удалить элемент HTML, щелкните правой кнопкой мыши выделенный код и выберите Удалить элемент . Обновление страницы восстановит удаленный код.

Наконечник Pro

Все изменения, сделанные с помощью инструмента Inspect Element, можно отменить, нажав Ctrl + Z в Windows и Linux или Command + Z в macOS.

Проверка классов CSS

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

Для этого откройте Инструменты разработчика и активируйте инструмент Inspect . Затем наведите курсор на интересующий вас элемент. Его основная информация, такая как цвет, шрифт и поля, появится в поле, а его исходный код будет выделен на панели DOM.

Вы можете найти определенный стиль CSS, нажав Ctrl + Shift + F в Windows и Linux или Command + Option + F для пользователей macOS.

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

Inspect Element — это функция веб-браузеров, которая позволяет пользователям получать доступ к инструментам разработчика. Они полезны для тестирования дизайна веб-страниц, отладки, исключения конфиденциальной информации из снимков экрана, исследования скрытых ключевых слов и многого другого.

Давайте рассмотрим, как использовать инструмент «Проверить элемент» в Chrome:

1. Откройте любую веб-страницу и найдите элемент, который хотите проверить.
2. Щелкните элемент правой кнопкой мыши и выберите Проверить .
3. Измените размер окна инструментов разработчика, перетаскивая его углы для лучшей читаемости. При необходимости настройте другие параметры, такие как положение док-станции и тип устройства.
4. Используйте панель Elements для применения изменений макета HTML и панель CSS для изменения стиля элементов.

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

Линас начинал как агент по работе с клиентами, а сейчас является полнофункциональным PHP-разработчиком в Hostinger. Он с энтузиазмом относится к тому, чтобы оказывать положительное влияние на людей, используя методы разработки, ориентированные на пользователя. Хотя ему нравится программировать и изменять мир, он втайне мечтает стать рок-звездой.

Как редактировать исходные файлы непосредственно в Chrome

Эта популярная статья была обновлена ​​в 2020 году. Подробнее об улучшении рабочего процесса разработки с помощью инструментов читайте в статье «Основы разработчика: инструменты на SitePoint Premium».

Обычный день веб-разработчика включает создание веб-страниц HTML со связанными CSS и JavaScript в их любимом редакторе. Рабочий процесс:

1. Откройте локально размещенную страницу в браузере.
2. Клянусь.
3. Откройте DevTools, чтобы исследовать проблемы с компоновкой и функциональностью.
4. Измените элементы HTML, свойства CSS и код JavaScript, чтобы устранить проблемы.
5. Скопируйте эти изменения обратно в редактор и вернитесь к шагу №1.

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

Однако можно открывать и редактировать исходные файлы прямо в Chrome. Любые внесенные вами изменения сохраняются в файловой системе и обновляются в редакторе ( предполагается, что он обновляется при изменении файла ).

Откройте Chrome, загрузите страницу из локальной файловой системы / сервера и откройте Developer Tools из меню Дополнительные инструменты или нажмите F12 или Ctrl / Cmd + Shift + I в зависимости от вашей системы . Перейдите на вкладку Sources , чтобы проверить файловый менеджер:

Вы можете открывать и редактировать файлы CSS и JavaScript в этом представлении, но любые изменения будут потеряны, как только вы обновите страницу.

Шаг 2. Свяжите папку с рабочим пространством

Щелкните вкладку Filesystem , затем щелкните + Добавить папку в рабочую область .Вам будет предложено указать свою рабочую папку, и Chrome попросит вас подтвердить, что вы Разрешите доступ . В проводнике отображаются файлы в вашей системе, которые можно открыть одним щелчком мыши:

Шаг 3. Отредактируйте и сохраните свой код

Теперь вы можете перейти к редактированию кода. Несохраненные изменения отмечены звездочкой на вкладке файла.

мгновенно обновляются, но в случае HTML и JavaScript вам обычно нужно нажать Ctrl / Cmd + S , чтобы сохранить файл в файловой системе, а затем обновить браузер.

Обратите внимание, что вы также можете щелкнуть правой кнопкой мыши вкладку файла и выбрать Сохранить как… , чтобы сохранить копию файла в другом месте.

Шаг 4. Просмотр и отмена изменений

Чтобы просмотреть изменения, щелкните правой кнопкой мыши вкладку файла и выберите Локальные изменения… в контекстном меню:

Показан вид, похожий на различие. Значок стрелки в нижнем левом углу панели отменит все изменения и вернет файл в исходное состояние.

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

Как просмотреть исходный код в Google Chrome? (с изображениями)

Веб-сайт или веб-страница состоит из различных элементов, включая текст, изображения, видео и т. д. Страница, которая выглядит очень интерактивной и красочной для вас, на самом деле является кодом, который запускается в браузере. Этот код называется Исходный код , который написан с помощью языков программирования, используемых в веб-разработке, таких как HTML, CSS, JavaScript и т. Д.

Вы можете очень быстро просмотреть исходный код любой веб-страницы в Google Chrome или других веб-браузерах.Исходный код позволяет вам взглянуть на форматирование и стиль CSS веб-страницы и ее HTML-код вместе со сценариями.

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

шагов для просмотра исходного кода в Google Chrome

Метод 1 : Просмотреть исходный код страницы

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

Шаг 2 : Щелкните « Просмотр исходного кода страницы» , чтобы просмотреть исходный код.

Это откроет исходный код в новой вкладке.

Ярлык : Чтобы просмотреть исходный код страницы, вы можете нажать клавиши « Ctrl + U ».

Метод 2 : Проверить

Шаг 1 : Как и в предыдущем методе, щелкните правой кнопкой мыши в любом месте веб-страницы, чтобы открыть раскрывающееся меню.

Шаг 2 : Выберите Проверьте .

Исходный код будет отображаться на том же экране, что и веб-страница (как показано на изображении).

Ярлык : откройте веб-страницу и нажмите F12 или « Ctrl + Shift + I », чтобы просмотреть ее.

Вот и все! Теперь вы можете легко просмотреть исходный код любой веб-страницы в Chrome.

Ну, и « просмотреть источник страницы » и « проверить » показывают исходный код веб-страницы.Но есть одно различие между результатами, полученными ими обоими.

• Просмотр исходного кода : он отображает исходный код, такой же, как тот, который присутствует на веб-сервере.
• Проверка : исходный код, отображаемый при проверке веб-страницы, проходит через исправление ошибок HTML, нормализацию и манипуляции с DOM. Перед тем, как показать исходный код, браузер исправляет код на предмет некоторых ошибок.

Как временно редактировать любую веб-страницу

В вашем браузере скрывается мощный инструмент: Проверить элемент .

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

Или вы можете использовать его, чтобы изменить что угодно на странице.

Inspect Element — идеальный способ узнать, что движет Интернетом, выяснить, что не работает на ваших сайтах, смоделировать, как будет выглядеть изменение цвета и шрифта, и избавиться от необходимости передавать в Photoshop личные данные на снимках экрана.Это суперсила, о которой вы даже не подозревали.

Давайте узнаем, как использовать Google Chrome Inspect Element, чтобы облегчить вашу работу, независимо от того, являетесь ли вы разработчиком или маркетологом, который никогда не писал ни строчки кода. Если вы читаете это на своем телефоне, пора переключиться на ноутбук, открыть Google Chrome и приготовиться настроить код.

Большинство веб-браузеров, включая Mozilla Firefox и Apple Safari, включают инструмент Inspect Element, тогда как Microsoft Internet Explorer и браузер Edge включают аналогичный набор инструментов разработчика.В этом руководстве основное внимание уделяется инструментам проверки элементов Google Chrome, но большинство функций работают так же в других браузерах.

Подождите, почему я должен использовать элемент Inspect?

Если вы никогда не заглядывали в код веб-сайта из любопытства, вы можете задаться вопросом, зачем вам изучать, как использовать Inspect Element.

• Designer : Хотите узнать, как дизайн сайта будет выглядеть на мобильных устройствах? Или хотите посмотреть, как другой оттенок зеленого будет выглядеть на кнопке регистрации? С Inspect Element вы можете сделать и то, и другое за считанные секунды.

• Маркетолог : Вам интересно, какие ключевые слова используют конкуренты в заголовках своих сайтов, или вы хотите узнать, не слишком ли медленно загружается ваш сайт для теста Google PageSpeed? Inspect Element может показать и то, и другое.

• Writer : Устали размывать свое имя и адрес электронной почты на снимках экрана? С помощью Inspect Element вы можете изменить любой текст на веб-странице за секунду.

• Агент поддержки : Нужен лучший способ сообщить разработчикам, что нужно исправить на сайте? Inspect Element позволяет вам быстро изменить пример, чтобы показать, о чем вы говорите.

Для этих и десятков других случаев использования Inspect Element — удобный инструмент, который нужно иметь под рукой. Это часть инструментов разработчика в вашем браузере, которая включает в себя ряд дополнительных функций: консоль для запуска кода, страницу View Source для просмотра только необработанного кода сайта, страницу Sources со списком всех загруженных файлов. на веб-сайте и многое другое. Вы можете изучить все это самостоятельно, а пока давайте посмотрим, как использовать основную вкладку Elements , чтобы настроить веб-страницу самостоятельно.

Как начать работу с элементом проверки

Есть несколько способов получить доступ к элементу проверки Google Chrome. Просто откройте веб-сайт, который хотите попробовать отредактировать (чтобы следовать этому руководству, откройте Zapier.com), затем откройте инструменты Inspect Element одним из следующих трех способов:

• Щелкните правой кнопкой мыши в любом месте веб-страницы и на В самом низу всплывающего меню вы увидите « Проверить ». Щелкните это.

• Щелкните гамбургер-меню (значок с 3 точками) в правом углу панели инструментов Google Chrome, щелкните Дополнительные инструменты , затем выберите Инструменты разработчика .Либо в меню «Файл» выберите «Вид» -> «Разработчик» -> «Инструменты разработчика».

• Предпочитаете сочетания клавиш? Нажмите CMD + Option + I на Mac или F12 на ПК, чтобы открыть Inspect Elements, не нажимая ничего.

По умолчанию Инструменты разработчика открываются на панели в самом низу браузера и показывают вкладку Elements — это знаменитый инструмент Inspect Element, который мы искали.

У вас не будет много места для работы с элементом проверки в нижней части экрана, поэтому щелкните три вертикальные точки в верхней правой части панели элемента проверки рядом с знаком «X» (который вы бы щелкнули чтобы закрыть панель). Теперь вы увидите возможность переместить панель в правую часть браузера (вид справа) или открыть панель в совершенно отдельном окне (вид отстыковки).

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

Теперь, когда мы в Inspect Element, у нас под рукой есть множество полезных инструментов, которые мы можем использовать, чтобы любой сайт выглядел именно так, как мы хотим. В этом руководстве мы сосредоточимся на вкладках «Элементы», «Эмуляция» и «Поиск».

Поиск

Вкладка «Поиск» позволяет искать на веб-странице определенное содержимое или элемент HTML.Он немного скрыт: вам нужно щелкнуть 3 точки, затем нажать Search All Files , чтобы открыть его. Тогда вы сможете искать в каждом файле на веб-странице все, что захотите.

Elements

«Проверить элемент» — это инструмент, который мы больше всего будем изучать в этом руководстве, и он открывается первым, когда вы запускаете Инструменты разработчика в большинстве браузеров. Или щелкните вкладку «Элементы» в Инструментах разработчика, чтобы вернуться к ней, если вы изучали где-то еще.

На вкладке «Обзор» вы можете увидеть все элементы HTML, JavaScript и CSS, с помощью которых был создан веб-сайт.Это почти то же самое, что просто просмотреть исходный код веб-сайта, с одним важным отличием: вы можете изменить любой код и видеть изменения в реальном времени на открытом сайте. Вы можете изменить что угодно, от копии до гарнитуры, затем сделать снимок экрана нового дизайна или сохранить изменения (просто перейдите в меню «Просмотр »> «Разработчик»> «Просмотр исходного кода » и сохраните страницу как файл HTML или скопируйте изменения кода в текстовый редактор. ). Однако после повторной загрузки страницы все ваши изменения исчезнут навсегда.

Эмуляция

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

Это также немного скрыто: вам нужно открыть Inspect Element и нажать кнопку со значком телефона, чтобы запустить его.Тогда у вас будет отличный инструмент, чтобы понять, как другие воспринимают веб-страницу.

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

Найдите что-нибудь на сайте с помощью поиска по элементам Inspect

Хотите знать, что входит в ваши любимые сайты? Поиск — ваш лучший инструмент для этого, помимо чтения всего исходного кода сайта.Вы можете просто открыть представление элементов по умолчанию, нажать CTRL + F или CMD + F и выполнить поиск по исходному коду, но полный инструмент поиска позволит вам искать по каждому файлу на странице, помогая вам найдите текст в файлах CSS и JavaScript или найдите изображение значка, которое вам нужно для статьи.

Для начала откройте Zapier.com в Chrome, если вы еще этого не сделали, затем откройте Inspect Element, щелкните 3 вертикальные точки в правом верхнем углу панели инструментов разработчика (рядом с закрывающим «X») и выберите «Искать во всех файлах».«Вкладка« Поиск »появится в нижней половине панели« Инструменты разработчика ».

Помните, как открыть« Проверить элемент »? Просто щелкните правой кнопкой мыши и выберите « Проверить элемент »« Проверить элемент »или нажмите Command + Option + i на Mac или F12 на ваш компьютер

В поле поиска вы можете ввести что угодно — ЛЮБОЕ — что вы хотите найти на этой веб-странице, и оно появится на этой панели. Давайте посмотрим, как мы можем это использовать.

Введите meta имя в поле поиска, нажмите клавишу Enter , и вы сразу увидите каждое вхождение «мета-имени» в коде на этой странице.Теперь вы можете увидеть метаданные этой страницы, ключевые слова SEO, на которые она ориентирована, а также то, настроена ли она для того, чтобы Google мог ее индексировать для поиска. Это простой способ увидеть, на что нацелены ваши конкуренты, и убедиться, что вы ничего не испортили на своем сайте.

Попробуем другой запрос. Удалите мета-имя , введите вместо этого h3 в поле поиска и нажмите «ввод». Вы увидите каждое вхождение «h3» в файлах JavaScript Zapier вверху, но как только вы прокрутите вниз, вы увидите каждый заголовок «h3» на этой странице.

Поиск — также эффективный инструмент для дизайнеров, так как вы также можете искать по цвету. Введите # ff4a00 в поле поиска и нажмите «ввод» (и обязательно установите флажок рядом с «Игнорировать регистр», чтобы увидеть все результаты). Теперь вы должны каждый раз видеть цвет # ff4a00, оттенок оранжевого Zapier, в файлах CSS и HTML этого сайта. Затем просто щелкните строку с надписью «color: # ff4a00;» чтобы перейти к этой строке в HTML-коде сайта и настроить ее самостоятельно (мы рассмотрим это в следующем разделе).

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

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

Или вы можете изменить веб-страницу самостоятельно с помощью Elements , основной части инструментов разработчика Chrome.

Измените что угодно с помощью элементов

Front-end разработчики используют инструмент Inspect Element каждый день, чтобы изменять внешний вид веб-страницы и экспериментировать с новыми идеями — и вы тоже можете. Inspect Elements позволяет настраивать внешний вид и содержимое веб-страницы, добавляя временные изменения в файлы CSS и HTML сайта.

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

Посмотрим, что мы можем с этим сделать.

Щелкните вкладку «Элементы» на панели инструментов разработчика — и, если вам нужно больше места, нажмите клавишу «Esc», чтобы закрыть ранее открытое окно поиска.Вы должны увидеть HTML-код этой страницы — теперь вы знаете, как делают колбасу.

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

Изменить текст на веб-странице

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

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

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

Введите все, что угодно, в это текстовое поле («Аури — гений» должно работать нормально) и нажмите Enter. Вуаля! Вы только что изменили текст на веб-странице.

Обновите страницу, и все вернется в нормальное состояние.

Весело? Давайте изменим еще кое-что на этой странице.

Панель инструментов разработчика перезагружается вместе со страницей, но давайте закроем ее. Нажмите «X» в правом верхнем углу страницы.

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

Когда откроется панель инструментов разработчика, это предложение должно автоматически выделиться. Довольно аккуратно, да? Важны мелочи.

Теперь, когда мы выбрали слоган на сайте Zapier, давайте изменим его внешний вид.

Изменение цвета и шрифта элементов

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

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

Попробуем что-нибудь поменять. Снова щелкните значок стрелки в верхней части Inspect Element и выделите текст прямо под кнопкой «Зарегистрироваться» на странице. Найдите «выравнивание текста» на вкладке «Стили» (вам, возможно, придется немного прокрутить, чтобы найти это).

Сейчас он установлен в «центр», но дважды щелкните «центр» и введите слева . Это выравнивает текст на странице по левому краю.

А теперь поиграемся с цветом. Используйте значок мыши в Inspect Element, чтобы выбрать кнопку на этот раз, затем на вкладке Styles найдите эту строку:

И дважды щелкните «# ff4a00». Наберите # 4199ad (не забудьте #) и нажмите «ввод».

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

Изменить состояния элемента

Хотите узнать, как будет выглядеть кнопка или ссылка, когда кто-то наведет на нее курсор или щелкнет по ней? Chrome Inspect Element может показать это с помощью инструментов состояния силового элемента. Вы можете увидеть, как будет выглядеть элемент, когда посетитель наведет курсор на элемент (состояние наведения), выберет элемент (состояние фокуса) и / или щелкнет ссылку (состояние посещения).

Давайте попробуем это. Убедитесь, что вы выбрали кнопку регистрации на главной странице Zapier. Затем щелкните правой кнопкой мыши этот код на вкладке «Элементы» и выберите в этом меню : active: .

Это изменит цвет кнопки на серый, который отображается на сайте Zapier, когда вы нажимаете кнопку.

Теперь измените значение background-color на # FF4A00 , и вы должны сразу увидеть изменение цвета кнопки.

Попробуйте поэкспериментировать — измените цвет : hover: , затем снимите флажок : hover: в контекстном меню и перетащите указатель мыши на кнопку, чтобы увидеть новый цвет кнопки.

Изменить изображения

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

Сначала скопируйте и вставьте эту ссылку к изображению:

https://c1.staticflickr.com/9/8314/7931831962_7652860bae_b.jpg

Теперь откройте Inspect Element на фоне домашней страницы Zapier и убедитесь, что вы выбрали в коде строку signup-hero . Дважды щелкните ссылку URL-адреса фона на панели «Стили» и вставьте ссылку, которую вы скопировали выше.

Нажмите «ввод» и сразу увидите разницу.

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

Редактировать текст удобно, менять изображения — весело, а изменение цветов и стилей может помочь вам быстро смоделировать изменения, которые вы хотите внести на свой сайт. Но как этот новый слоган и дизайн кнопок будут выглядеть на мобильных устройствах?

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

Протестируйте сайт на любом устройстве с помощью эмуляции

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

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

На панели инструментов разработчика вы заметите маленький значок телефона в верхнем левом углу. Щелкните по нему. Это должно превратить страницу в крошечную страницу в стиле телефона с меню вверху для изменения размера.

Измените размер небольшого браузера, чтобы увидеть, как все выглядит, если вы просматриваете страницы на планшете, телефоне или даже на меньшем экране. Или щелкните меню вверху, чтобы выбрать размеры устройства по умолчанию, например iPad Pro или iPhone 8 Plus — вперед и выберите последний.

Экран веб-страницы должен уменьшиться до размера iPhone 8 Plus, и вы можете немного увеличить масштаб, щелкнув значок + рядом с числом в правом верхнем углу сетки — так сайт будет выглядеть, если кто-то увеличит масштаб. в мобильном телефоне.

Увеличьте изображение, перетащив правый край эмуляции веб-страницы вправо. Смотрите, что происходит? Мы больше не находимся в представлении iPhone 8 Plus. Перетаскивание экрана по сетке позволяет увидеть, как веб-страница будет меняться при изменении размера экрана, но ваше представление больше не будет отражать модель устройства, которую вы выбрали ранее.

Давайте вернемся к представлению iPhone 8 Plus, снова выбрав его в раскрывающемся списке модели. Рядом с выпадающим списком стоит слово «Портрет».»Как вы, наверное, догадались, это позволяет вам переключаться между альбомным и горизонтальным просмотром.

Теперь мы можем увидеть, как этот пост выглядел бы, если бы вы читали его на iPhone 8 Plus. Не стесняйтесь поиграть с другим устройства, чтобы увидеть, как изменяется эта веб-страница и разрешение экрана. Все другие инструменты разработчика, которые мы рассмотрели до сих пор, также будут реагировать на представление устройства. Например, снова выберите текст слогана Zapier.

В iPhone 8 Plus, мы видим, что это текст 2em, тогда как в представлении по умолчанию на компьютере это 3em.

«em» — это единица размера шрифта, которая позволяет автоматически изменять размер текста относительно окружающего текста. Например, предположим, что у нас есть пользователь с большими настройками пользовательского шрифта в своем браузере. Если вы установите размер шрифта абзаца на 14 пикселей, ваш шрифт всегда будет 14 пикселей для этого пользователя, несмотря ни на что. Однако, если вы установите размер шрифта абзаца равным 1em, браузер вашего пользователя будет использовать эту единицу измерения для масштабирования текста в соответствии с большими пользовательскими настройками. Телефоны и планшеты делают это для удобного увеличения текста.

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

Эмуляция датчиков мобильных устройств

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

Вы даже можете заставить ваш браузер работать как телефон. Нажмите клавишу «Esc», чтобы снова открыть панель поиска в Inspect Element, и на этот раз щелкните меню с тремя точками слева, чтобы открыть меню параметров.Выберите Датчики , чтобы получить три новых инструмента: Геолокация, Ориентация и Сенсор.

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

Давайте попробуем просмотреть этот сайт из штаб-квартиры Google в Маунтин-Вью, Калифорния.

Установите флажок «Эмулировать координаты геолокации» и введите значение 37 в текстовое поле Lat = и 122 в текстовое поле Lon = . Нажмите Enter на клавиатуре.

Ничего не меняется, да?

Это связано с тем, что на этой странице нет содержимого, которое изменяется в зависимости от вашего местоположения. Если вы измените координаты на сайте, например Groupon.com , который использует ваше местоположение для отображения локализованного контента, вы получите другие результаты.Перейдите на сайт Google.com в другом месте, и вы, возможно, увидите новый логотип Google на празднике в другой стране или, по крайней мере, получите результаты на другом языке.

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

Эмуляция мобильных сетей

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

Чтобы попробовать, снова нажмите кнопку с тремя кружками слева от вкладки поиска «Проверить элемент» и выберите «Условия сети». Там вы можете выбрать быстрый или медленный 3G или автономный режим, чтобы увидеть, как страница работает без Интернета. Или нажмите Добавить … , чтобы включить собственное тестирование (возможно, добавьте 56 Кбит / с для тестирования коммутируемого доступа в Интернет). Теперь перезагрузите страницу, и вы увидите, сколько времени потребуется сайту для загрузки при медленном соединении и как сайт выглядит во время загрузки. Это покажет, почему вам следует улучшить свой сайт, чтобы он загружался быстрее при медленных соединениях.

Вы также можете изменить свой пользовательский агент — снимите флажок «Выбирать автоматически» рядом с «Пользовательским агентом» и выберите «Internet Explorer 7», возможно, чтобы увидеть, изменит ли сайт свою визуализацию для старых браузеров. Это также удобный способ заставить веб-страницы загружаться, даже если они утверждают, что работают только в другом браузере, таком как Internet Explorer.

Проблемы

Давайте закончим несколькими проблемами. Покажи нам, что ты узнал!

1. Измените заголовки на CNN.com и отправьте нам в Твиттере снимок экрана с заголовком вашей популярной статьи.

2. Дублируйте ваш любимый веб-сайт, используя «Просмотр исходного кода», и поиграйте с HTML, чтобы сделать его своим.

3. Посмотрите, как ваш веб-сайт отображается на мобильном устройстве, и покажите своему разработчику, что можно сделать лучше, исправив его самостоятельно!

Маркетинговая команда Zapier полагается на Inspect Element для извлечения личной информации из снимков экрана в наших обзорах приложений, в то время как наша команда дизайнеров использует ее для создания макетов изменений и просмотра того, как все будет выглядеть на разных экранах.

Как использовать Inspect Element? Мы будем рады услышать ваши истории в комментариях ниже!

Это руководство было первоначально опубликовано 5 января 2015 г., затем было обновлено и переиздано 6 июня 2017 г. и 25 января 2018 г. со скриншотами и шагами из последней версии Google Chrome.

Chrome DevTools — разработчики Chrome