Как открыть код элемента на макбуке

Как открыть исходный код веб-страницы на mac в браузере?

в 5 задании не могу открыть исходный код страницы горяч клавишами control u, это на mac не работает или я туплю? все исправила как в задании и сохранила 5 раз.

3 years ago

Похожие вопросы

• При нажатии горячих клавиш ctrl у в браузере не появляется код?
• Почему не работает браузер?
• Как настроить инструменты разработчика, что бы вид был как в уроках по html?
• У меня другой браузер, нужно менять?
• Как уменьшить окно браузера в chrome?
• Не работают инструменты разработчика, что делать?
• Как запустить инструменты разработчика?
• Как настроить инструмент браузера (f12), как у автора?
• Как сделать так чтобы панель инструменты разработчика google chrome была не справа, а снизу?
• Как сделать панель для разрабов такую же как в уроке html, css?

2 ответов

На Mac так открывать исходный код веб-страницы в Google Chrome:

В Safari наверное аналогично.

Webpage shortcuts для Mac (тут все команды):

Действие Сочетание клавиш Открыть параметры печати текущей страницы ⌘ + P Открыть параметры сохранения текущей страницы ⌘ + S Открыть диалоговое окно "Параметры страницы" ⌘ + Option + P Обновить текущую страницу без учета кешированного контента ⌘ + Shift + R Остановить загрузку страницы Esc Перейти от одного интерактивного элемента страницы к следующему Tab Перейти от одного интерактивного элемента страницы к предыдущему Shift + Tab Открыть сохраненный на компьютере файл в Google Chrome Нажмите ⌘ + O и выберите файл Просмотреть HTML-код текущей страницы (без возможности редактирования) ⌘ + Option + U Открыть консоль JavaScript ⌘ + Option + J Добавить текущую веб-страницу в закладки ⌘ + D Добавить все открытые вкладки в отдельную папку закладок ⌘ + Shift + D Включить или отключить полноэкранный режим ⌘ + Ctrl + F Увеличить масштаб страницы ⌘ и + Уменьшить масштаб страницы ⌘ и - Восстановить масштаб страницы по умолчанию ⌘ + 0 Прокрутить веб-страницу вниз (одно нажатие – один экран) Пробел Прокрутить веб-страницу вверх (одно нажатие – один экран) Shift + пробел Искать в Интернете ⌘ + Option + F Установить курсор перед предыдущим словом в текстовом поле Option + Стрелка влево Установить курсор в начало следующего слова в текстовом поле Option + Стрелка вправо Удалить предыдущее слово в текстовом поле Option + Delete Открыть домашнюю страницу в текущей вкладке ⌘ + Shift + H Восстановить исходный масштаб страницы Command + 0

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

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

Рассказываем, как посмотреть исходный код страницы в Safari на Mac с помощью панели инструментов и комбинации клавиш.

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

1. Включите меню разработчика в Safari: для этого зайдите в меню Safari >Настройки, выберите раздел Дополнения и установите галочку рядом с пунктом Показывать меню «Разработка» в строке меню. Активное меню «Разработка» в Safari для Mac позволяет просматривать исходные коды страниц.
2. В любом окне Safari откройте страницу, исходный код которой вы хотите посмотреть.
3. Нажмите в меню на раздел Разработка, в раскрывшемся списке выберите Показать ресурсы страницы.
4. Исходный код страницы откроется в окне веб-инспектора.

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

Как посмотреть источник страницы с помощью сочетания клавиш в Safari на macOS

После включения меню «Разработка» в Safari вы также можете использовать сочетание клавиш для быстрого доступа к HTML-коду страницы в Safari на Mac.

1. Откройте в Safari страницу, исходный код которой вам нужен.
2. Одновременно нажмите клавиши Command + Option + U.
3. Сочетание клавиш откроет инструмент веб-инспектора с кодом страницы.

Как просмотреть исходный код страницы в Safari на Mac?

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

Напомним, что Safari – собственный браузер, разработанный Apple и входящий по умолчанию в сборки OS X и iOS, а позже портированный и под операционные системы семейства Windows.

Итак, чем же может быть полезна функция просмотра исходного когда веб-странички?

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

Ранее эта функция присутствовала в Safari при помощи нажатия комбинации Cmd+option+U, что бы воспользоваться этим сокращением в новых версиях необходимо перейти в “Настройки“, и в подпункте “Дополнения” установить флажок выбора напротив “Показывать меню “Разработка” в строке меню“.

С помощью этих нехитрых операций можно вернуть опцию просмота исходного кода в Safari.

• Связка ключей не сохраняет пароли на некоторых сайтах? Решение проблемы.
• Лаборатория Касперского: Уязвимость в Safari позволяет с легкостью похищать учетные данные пользователей.
• Скачать обновленный Firefox для Mac OS X, Windows, Linux и Android.
• Как перевести страницу в Safari (Mac OS X) на русский язык при помощи плагина Translation.

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 1.9 / 5. Количество оценок: 19

Оценок пока нет. Поставьте оценку первым.

DevTools: как открыть инструменты разработчика в браузере и почему они делают работу эффективнее

DevTools (инструменты разработчика) доступны во всех современных браузерах и полезны по нескольким причинам. Например, их можно использовать для отладки кода и тестирования изменений в HTML, CSS и JavaScript в режиме реального времени. В этой статье расскажем, как открывать DevTools в разных браузерах и на примере разберем, какие возможности они предоставляют.

Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:

1. Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
2. Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
3. Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.

Сначала разберемся, как открыть консоль в разных браузерах.

Профессия «Инженер по тестированию»

• Смените профессию за 4 месяца — короткий путь в IT
• Познакомьтесь с этапами разработки и жизненным циклом ПО
• Узнайте всё о техниках тест-дизайна
• Разберитесь с системами управления тестированием и системами баг-трекинга
• Научитесь работать с API и базами данных

Google Chrome

1. Нажмите значок с тремя точками в правом верхнем углу окна браузера.
2. В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
3. После этого в правой части экрана откроется раздел с DevTools.

Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).

Microsoft Edge

1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).

Mozilla

1. Выберите меню-гамбургер в верхнем углу экрана.
2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
3. После этого в нижней части экрана откроется раздел с DevTools.

Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).

Opera

1. Щелкните на значок Opera в верхнем левом углу окна браузера.
2. Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command +option+I на Mac).

Safari

1. Выберите меню Safari в верхнем левом углу экрана.
2. Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
3. Выберите «Показать веб-инспектор» в раскрывающемся меню .
4. После этого откроется новое окно с инструментами разработчика.

Горячие клавиши для Safari — Command + option+ I.

Яндекс.Браузер

1. Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
2. Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
3. После этого переходим к пункту «Инструменты разработчика» в следующем меню.

Для запуска консоли также можно нажать Ctrl + Shift + I.

Как использовать консоль

Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.

Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2 , так и большие функции.

Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2 DevTools сразу выдаст ответ 4 . Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:

'hexlet'.toUpperCase() // => HEXLET [1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16] 

Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:

document.querySelectorAll('a').length // => 73 

Кроме того, DevTools позволяет создавать переменные. Пока страница существует, созданные переменные будут существовать и вы можете взаимодействовать с ними в будущем:

const linksCount = document.querySelectorAll('a').length // => undefined 2 + 2 // => 4 linksCount // => 73 linksCount * 2 // => 146 

Однострочные выражения и инструкции — это довольно просто. Что, если хочется создать функцию, а нажатие на Enter сразу выполняет код? Для многострочных выражений используется перенос с помощью Shift + Enter. Эта опция позволяет писать и использовать красивые функции, которые, как и переменные, могут быть использованы в текущей сессии:

const getElementCount = (tag) =>  const elementCount = document.querySelectorAll(tag).length; return `Найдено $elementCount> элементов $tag>` > getElementCount('div') // => 'Найдено 105 элементов div' 

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

Профессия «Инженер по тестированию»

• Смените профессию за 4 месяца — короткий путь в IT
• Познакомьтесь с этапами разработки и жизненным циклом ПО
• Узнайте всё о техниках тест-дизайна
• Разберитесь с системами управления тестированием и системами баг-трекинга
• Научитесь работать с API и базами данных