Инструменты web-разработчика (DevTools)
- Stanislav N. (Unlicensed)
- ZL Support
Пожалуйста, ознакомьтесь с Правилами использования материалов на данном ресурсе
Оглавление
Описание
DevTools - очень мощный инструмент для работы с HTML страницей, анализа запросов, отладки JavaScript.
Инструменты web-разработчика доступны только для Chrome движка.
Как открыть окно?
Отобразить окно можно кликнув по соответствующей кнопке справа от адресной строки браузера ProjectMaker
Для чего это используется?
Взаимодействие с DOM моделью страницы (поиск элементов, удаление, модификация)
Анализ сделанных страницей запросов
Как пользоваться
Кнопка Inspect
Нажмите эту кнопку и наведите курсор мыши на любой элемент в окне браузере и этот элемент тут же будет подсвечен во вкладке Elements.
Вкладка Elements
В данной вкладке можно проанализировать и модифицировать DOM текущей вкладки - изменить HTML код элементов (удалить или добавить атрибуты), можно вырезать часть элементов.
Поиск по XPath
Данное окно можно использовать для тестирования XPath запросов: открываете вкладку Elements, нажимаете комбинацию клавиш Ctrl+F, внизу окна появится поле для ввода поисковой фразы (1) (можно вводить простой текст, XPath, CSS Selector'ы).
Найденные элементы сразу будут подсвечиваться (2).
Вкладка Console
Тут можно составить и отладить JavaScript код. Весь код выполняется в контексте текущей вкладки, т.е. тут доступны все модули, библиотеки, объекты, которые загружены на текущей странице.
Когда код будет готов его можно будет запустить с помощью экшена Код JavaScript
Вкладка Network
Здесь будут отображены все запросы, которые были отправлены при загрузке данной страницы. Это может очень помочь при написании собственных запросов.
Полезные ссылки
Официальная документация (на английском)