Chrome DevTools. Обзор основных возможностей веб-инспектора.
Vložit
- čas přidán 2. 06. 2024
- Инструменты Chrome DevTools очень полезны для веб-разработчика. В этом видео мы поговорим о том, чем именно вам помогут эти инструменты, посмотрим на основные возможности веб-инспектора и консоли разработчика.
Справочник по Front-end - itwiki.dev/front-end
Мой канал: t.me/boringfrontend
Другие видео автора: • Сергей Фомин: все видео
Документация Chrome DevTools: developer.chrome.com/devtools
00:00 Обзор Chrome DevTools
03:10 Elements. Работа с DOM и стилями.
05:49 Network. Анализ загрузки страницы.
09:39 Console. Примеры работы основных методов консоли.
13:46 Source. Файловая структура проекта.
14:56 Timeline.
15:28 Profiles. Анализ нагрузки на устройство.
16:13 Aplication. Обзор доступных хранилищ.
16:43 Security. Безопасность подключения.
16:51 Audits. Аудит страницы на ошибки, советы к оптимизации.
Компьютерная Школа Hillel
ithillel.ua
Большое спасибо. В видео столько информации, что смотрел я его не 17 минут, сколько идет ролик, а почти час. Автор проделал большую работу. Молодец
Спасибо за развернутый отзыв!
Самое лучшее описание функционала, которое я нашел, спасибо.
Спасибо!
Респект! Лучше и точнее быть не может. Изложено профессионально!
Очень круто подан материал. Ёмко, быстро, всё по делу. Офигенно!
Спасибо!
Благодарю за краткое объяснение)
Очень помогло. Искал такую инфу. Спасибо.
Спасибо! Очень лаконичный и качественный разбор.
Изучал по Вашему материалу данную примочку в Atom браузере. Спасибо. Очень гибко и практично изложен материал. Удачи!
Спасибо!
Трындец какой классный и мощный инструмент ! Спасибо
Спсибо большое за видео. Лаконично, доступно и содержательно.
Спасибо!
Спасибо! Очень нужен такой курс. Отличное изложение материала.
Спасибо! Какой именно курс?)
Дякую за короткий, проте інформативний, виклад матеріалу.
Отличный ролик. Спасибо.
Отлично, спасибо за видео
Спасибо! Понравилась и скорость и сценарий изложения! Подписался на ваш канал.
Спасибо!
Отлично подано. Все четко, понятно. Спасибо большое за качественный материал!
Спасибо)
Спасибо большое, много полезного узнал 👍
Спасибо!
Спасибо, очень полезный материал!
Спасибо!
Супер! отличнывй обзор!
Спасибо!
Красавец! Быстро по делу и за небольшой промежуток времени. Удачи тебе! Жду новых познавательных уроков)
Спасибо!
великолепно, я очень много узнал, спасибо за видео
Спасибо за просмотр!
За, ролик спасибо. Отлично подан материал.
Спасибо!
Спасибо! Помог сделать техзадание!)
💪💪💪
Дуже корисне та інформативне відео! Було б добре зняти більш розширену версію відео. Дякую за метеріал!
Спасибо! Насчет расширенной версии обязательно подумаем.
Шикардос!
Очень хорошо, но хотелось бы ещё подробнее.
Спасибо!
Вот это видео! Спасибо!
Спасибо)
Круто, спасибо!
Спасибо)
Круто!!! и просто!!! Спасибо :) !!!!
У вас классный портал, жаль, что у вас нет онлайн обучения :(
Спасибо. Приходите к нам на оффлайн))
Сриншоты выпилили. За видео спасибо, очень позновательно!
Отличное видео, все четко и понятно. Извините заранее за возможно глупый вопрос: Chrome DevTools только показывает нам структуру, но непосредственно изменить что-то в нем и при этом сохранить изменения в HTML например нельзя???
Можно отредактировать в реальном времени и увидеть изменения, но эти изменения нельзя сохранить в исходный файл. После обновления страницы изменения пропадут)
Ребята постарались, спс вам. Интересно чтобы полностью овладеть тонкостями тестирования через DevTools Chrome где я должен буду обучаться? А то на вашем сайте мне ответили что такого курса нету и в другие дисциплины он не входит, что меня сильно озадачила, ведь на Ютубе от вас есть инфа.
Здесь скорее про возможности браузера, без привязки к тестированию или другим дисциплинам.
Подскажите пожалуйста, как обойти момент, когда сайт блокирует отладку через devtools, дебагер встает на паузу и страница не грузится при активном devtools
Привет, даже если дебаггер ставит какую-то контрольную точку, то её всегда можно пропустить. Можете показать пример такого сайта?
1:26 почему при выборе айфон 5 показывается такое разрешение? у него же оно другое
На Iphone используется Retina дисплей. У него плотность пикселей в два раза выше. Соответственно в характеристиках айфона указаны цифры в два раза больше, но на деле это такие размеры как в инспекторе)
поняла, спасибо!)
просто при выборе galaxy s5 тоже показывает другое разрешение, дело тоже в этом?
Только не расширениях, а разрешениях монитора. Расширение у файлов.
Да, есть такая ошибка. Спасибо!
а есть возможность отображать кодом, сделанные ручками изменения?
как в phpMyAdmin
для начинающих JavaSciptеров было бы очень полезно
Можно пример задачи? Просто что-то сделать "ручками" в браузере это и значит написать какую-то сточку кода, обычно.
обычно код пишется в редакторах Notepad++ и ему подобных
а не браузере
я говорю про редактирование в панели инструмента, запущенного сайта
а действие, ну например я выделяю комбинацией Ctrl+Shift+i какой то блок и удаляю его
а если еще более конкретней, то есть сайт куда встраиваются фотки из инстаграма и нужно удалить нижние блоки
1. поле для комментариев
2. поле с отображением количества лайков
старая ракетка styga, похоже как у меня, только у меня красная лента по ободу
Не у всех такие огроменные мониторы, выводите в кадр только рабочую область
Это обычный Full HD, но спасибо, учту)
Сережа, когда новые видео? 60fps?
Скоро все будет. 60 фпс пока не будет. Сейчас под VR делаю
Сергей, спасибо! Ждем-с.
Подстава
Я искал расширение для vs code DevTools for Chrome
Я хочу это делать в редакторе кода */ не как блин не в браузере
Не уверен, что так вообще возможно. Но devtools можно вынести в отдельное от браузера окно и это может решать вашу проблему.
Подскажите, как закрыть данную программу раз и навсегда, случайно нажала и теперь страдаю, работать невозможно
Там в правому кутку є кнопка спеціально для цього)
@@user-yy5nc8ns2h она сама по себе открывается, даже если закрыть.
запись лучше все-таки делать в 720
Почему?
а можно devtools перевести?
Developer tools - инструменты разработчика.
Насколько я знаю - нет
Спасибо за видео. Только не "расширение экрана", а "разрешение экрана". Частая оговорка.
Да, спасибо. Когда на ютубе ещё работали аннотации, в видео было про это написано, но теперь уже нет)
сразу на скорость 0.75
Сережа, го в ГТА!
Это какой-то новый JS фреймворк?
надеюсь сейчас с английским у лектора получше 😃
Украина с Крымом - это тонкий троллинг?)
За відеоурок дякую
Спасибо что посмотрели!
тараторит как из кулемета, пришлось скорость уменьшать
ааа, разрешение экрана, а не расширение! господи, как вообще можно так говорить?))
yadi.sk/i/eNSYzbIN3QUEFP
Че ты видео тыришь?
чего?
Подача ужасная, протароторил все видео и рад стараться . На первой же минуте хотелось выключить, но была надежда, что оратор устанет и начнет все таки внятно и медленно говорить!! Но нет!! Такое ощущение, что за ним собаки гнались .. зачем вообще это записывать, если делать это таким образом!?!
Дякуємо за зауваження, для розробників час - гроші та закриті завдання )
Виправлятимемося.
Информации много! Наверняка полезная для профи. Но, автор говорит и передвигает мышкой быстро, картинка большая и мутная, поэтому сложно синхронизироваться с говорящим. Поэтому приходится периодически откатываться, что бы понять о чем говорит автор. Микрофон бубнящий. Нет приближений (фокусировке) на том, о чем идет речь. В общем подача информации на 3 с минусом. Досмотреть до конца не смог. Пойду искать лучшую подачу.
Дякуємо за зауваження, будемо трохи зупиняти спікера )
очень скучно