Как открыть консоль в хроме

Как сделать, чтобы консоль в гугл хроме не открывалась в новой вкладке?

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

• google-chrome
• google-chrome-devtools

Отслеживать
8,586 4 4 золотых знака 21 21 серебряный знак 36 36 бронзовых знаков
задан 21 янв в 21:58
35 1 1 серебряный знак 7 7 бронзовых знаков
картинок много, смысла мало, открывалась как обычно это как?
21 янв в 22:43

Нажимаю правой кнопкой посмотреть код и у меня открывается новая вкладка, а должна просто открыться консоль

22 янв в 12:47

открытие view-source:https://. — это и есть как обычно, если нужно глянуть разметку нужно нажимать F12

22 янв в 14:30

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

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

Отслеживать
ответ дан 25 фев в 6:47
Maxim Zasorin Maxim Zasorin
1,075 1 1 золотой знак 7 7 серебряных знаков 18 18 бронзовых знаков

• google-chrome
• google-chrome-devtools

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.12.8.2394

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Обзор инструментов разработки в браузерах

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

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

Как открыть инструменты веб-разработчика в вашем браузере?

Панель разработчика находится в нижней части вашего браузера :

Как её отобразить? Есть три варианта:

• Клавиатура.Ctrl + Shift + I, кроме
  • Internet Explorer.(клавиша — F12)
  • Mac OS X.(сочетание клавиш — ⌘ + ⌥ + I )
• Панель Меню.
  • Firefox. Открыть меню *➤ *➤ Инструменты разработки, или_ Инструменты ➤Веб-разработка ➤ Инструменты разработки
  • Chrome.Дополнительные инструменты ➤ Инструменты разработчика
  • Safari.Разработка ➤ Показать Web Inspector . Если вы не видите меню «Разработка», зайдите в Safari ➤ Настройки ➤ Дополнительно, и проверьте стоит ли галочка напротив «Показать меню разработки».
  • Opera. Меню➤Разработка ➤ Инструменты разработчика. Если вы не видите меню «Разработка», включите его отображение, перейдя в Меню ➤ Другие инструменты ➤ Показать меню разработчика.
• Контекстное меню. Нажмите правой кнопкой мыши на любом участке веб-страницы (Ctrl-клик для Mac), появится контекстное меню, в котором вам нужно выбрать пункт Исследовать Элемент. (дополнение: этот способ отобразит вам код того элемента, на котором вы щёлкнули правой кнопкой.)

Inspector: DOM обозреватель и CSS редактор

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

Если вы не видите Inspector,

• Нажмите на вкладку Inspector .
• В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.
• В Safari, элементы управления представлены не так чётко, но вы должны увидеть HTML код, если вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.

Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

• Удалить узел (иногда Удалить элемент). Удаляет текущий элемент.
• Править как HTML (иногда Добавить атрибут/Править текст). Позволяет редактировать HTML и видеть результат «вживую». Очень полезно для отладки и тестирования.
• :hover/:active/:focus. Заставляет элементы переключить своё состояние на то, к которому применён ваш стиль.
• Копировать/Копировать как HTML. Копирует текущий выделенный HTML.

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

Обзор CSS редактора

По умолчанию, CSS редактор отображает CSS-свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

• Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
• Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.
• Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
• Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором вы можете задать новые значения и увидеть, как изменится ваш элемент с новыми значениями.
• Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт вас в окно, где можно редактировать этот CSS и сохранить.
• Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где вы сможете написать совершенно новую декларацию для вашей страницы.

Вы должно быть уже заметили другие вкладки в CSS редакторе:

• Вычислено: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
• Блоковая модель: Отображает блочную модель выделенного элемента, здесь вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
• Анимации: В Firefox, на вкладке Анимации вы можете увидеть анимации применённые к выделенному элементу.

Узнать больше

Узнать больше об Inspector в различных браузерах:

• Firefox Page inspector
• IE DOM Explorer
• Chrome DOM inspector (Inspector в Opera схож с Inspector в Chrome)
• Safari DOM inspector and style explorer

Консоль JavaScript

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

alert("hello!"); 

.querySelector("html").style.backgroundColor = "purple"; 

var myImage = document.createElement("img"); myImage.setAttribute( "src", "https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg", ); document.querySelector("h1").appendChild(myImage); 

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

alert('hello!); 

.cheeseSelector("html").style.backgroundColor = "purple"; 

var myImage = document.createElement("img"); myBanana.setAttribute( "src", "https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg", ); document.querySelector("h1").appendChild(myImage); 

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

Узнать больше

Узнать больше о JavaScript консоли в различных браузерах:

• Firefox Web Console
• IE JavaScript console
• Chrome JavaScript Console (Inpector в Opera схож с Inspector в Chrome)
• Safari Console

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Введение в Chrome DevTools. Console, Sources, Network

В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.

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

Вкладка Console

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

Вкладка Sources

Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.

Например, так выглядит минифицированный CSS-файл на вкладке Sources.

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

Вкладка Network

С её помощью можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, и многое другое. При первом открытии вкладка может оказаться пустой — тогда просто перезагрузите страницу.

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

Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.

Но если на сайте будет ошибка, сообщение о ней отобразится и на вкладке Console.

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

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

Проверка вёрстки на мобильных

Легко проверить, как выглядит вёрстка на мобильных. Заходим в режим эмуляции и всё — можем поменять ширину экрана, выбрать конкретный девайс (например, айфон), просмотреть все media-выражения, примененные к странице, или выбрать плотность пикселей, чтобы проверить ретиновую графику.

Это незаменимый инструмент в работе над адаптивной вёрсткой.

Скриншоты страниц

Другая возможность — скриншоты страницы. Заходим в режим эмуляции и в выпадающем меню выбираем «сделать скриншот» — изображение сразу сохраняется на компьютер.

Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.

На этом всё — в следующих выпусках расскажем, как пользуются DevTools настоящие профессионалы.

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Как сделать так чтобы панель инструменты разработчика google chrome была не справа, а снизу?

В Google Chrome? Инструменты разработчика — вкладка Sources — с правой стороны (где крестик) есть три точки, нужно на них нажать и где Dock side выбрать предпоследний квадратик. Вот картинка (только предпоследний квадратик нужно выбрать): https://i.stack.imgur.com/aIwfF.png

Sign up or Log in to write an answer

• Интерактивные уроки и курсы программирования и создания сайтов (дистанционное обучение) помогут вам в игровой форме изучить основы языков программирования веб-разработки и веб-программирования с нуля. Обучение онлайн 24/7.

Общие ссылки

• Отзывы
• Политика конфидециальности
• Условия использования
• Блог
• Цена и оплата
• Курсы и скринкасты
• Сертификаты
• Партнерская программа
• Комьюнити

Наши курсы и скринкасты

• HTML/CSS Advanced
• Bootstrap 4
• Vue JS
• Linux, GIT and web-hosting
• HTML and CSS
• Modern Javascript
• Javascript/jQuery
• Codeigniter
• Все курсы и скринкасты