From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../discover_browser_developer_tools/index.html | 172 +++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 files/ru/learn/discover_browser_developer_tools/index.html (limited to 'files/ru/learn/discover_browser_developer_tools/index.html') diff --git a/files/ru/learn/discover_browser_developer_tools/index.html b/files/ru/learn/discover_browser_developer_tools/index.html new file mode 100644 index 0000000000..8cd514efcd --- /dev/null +++ b/files/ru/learn/discover_browser_developer_tools/index.html @@ -0,0 +1,172 @@ +--- +title: Обзор инструментов разработки в браузерах +slug: Learn/Discover_browser_developer_tools +tags: + - Beginner + - Browser + - CSS + - CodingScripting + - Dev Tools + - HTML + - JavaScript + - Браузер + - Новичку + - Обучение +translation_of: Learn/Common_questions/What_are_browser_developer_tools +--- +
{{IncludeSubnav("/ru-RU/Learn")}}
+ +

{{Previous("Learn/Getting_started_with_the_web")}}

+ +
+

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

+
+ +
+

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

+
+ +

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

+ +

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

+ +

+ +

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

+ + + +

+ +

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

+ +

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

+ +

+ +

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

+ + + +

Обзор DOM inspector

+ +

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

+ +

+ + + +

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

+ +

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

+ +

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

+ +

+ +

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

+ + + +

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

+ + + +

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

+ +

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

+ + + +

Консоль JavaScript 

+ +

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

+ +

+ +

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

+ +
    +
  1. + 
    alert('hello!');
    +
    2. +
  2. + 
    document.querySelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var myImage = document.createElement('img');
+myImage.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+document.querySelector('h1').appendChild(myImage);
    +
    4. +
+ +

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

+ +
    +
  1. + 
    alert('hello!);
    +
    2. +
  2. + 
    document.cheeseSelector('html').style.backgroundColor = 'purple';
    +
    3. +
  3. + 
    var myImage = document.createElement('img');
+myBanana.setAttribute('src','https://farm4.staticflickr.com/3455/3372925208_e1f2aae4e3_b.jpg');
+document.querySelector('h1').appendChild(myImage);
    +
    4. +
+ +

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

+ +

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

+ +

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

+ + -- cgit v1.2.3-54-g00ecf