Если вы еще не установили Google Chrome, сделайте это здесь.
После настройки Chrome откройте веб-сайт. В этом примере мы будем использовать Бостонский колледж (bc.edu). Перейдите на их домашнюю страницу в Chrome и щелкните правой кнопкой мыши (удерживая нажатой клавишу Control), вы увидите такое меню:
Нажмите «Проверить», и теперь появятся инструменты разработчика Chrome.
Это выглядит много, но не волнуйтесь! Вот основные вкладки:
- Элементы — показывает HTML-контент страниц. Помните, это всего лишь текст!
- Консоль — открывает консоль Javascript для взаимодействия со страницей.
- Источники — перечисляет все источники страниц для файлов и содержимого.
- Сети — перечисляет все запросы на загрузку страницы и источников.
- Производительность — позволяет записывать производительность страницы.
- Память — показывает, сколько памяти используется
- Приложение — пока игнорируйте это
- Безопасность — показывает детали SSL
- Аудиты — пока игнорировать
Теперь щелкните маленькую стрелку в левом углу консоли разработки.
Это превратит ваш курсор в указатель, и теперь вы можете выбирать элементы на домашней странице BC и напрямую видеть HTML-код элемента:
Вы можете видеть, что на панели элементов есть текст «Рожденная водой». Если вы хотите попробовать что-то интересное, вы можете щелкнуть текст на панели разработчика и ввести все, что хотите! Я изменю текст на «Ваше имя»:
Я бы порекомендовал поиграть с несколькими сайтами и посмотреть, что вы можете узнать из их HTML!
