#devtools #инструменты
Chrome DevTools: с чего начать, если раньше не пользовался
1. В первую очередь стоит обратить внимание на Elements, Console, Network, Application и Device Toolbar.
2. Понять для чего может понадобиться каждая из вкладок:
Elements - тут DOM (объектная модель документа), можно найти элемент на странице по локатору, а можно выбрать элемент на странице и посмотреть соответствующий ему фрагмент в DOM.
Console - имеет 2 функции: просмотр логов и выполнение js скриптов. Можно выбрать различные уровни логирования: от ошибок до информационных сообщений.
Network - тут мы видим запросы и ответы на них. Можно выбрать типы запросов (fetch, media, img и тд), фильтровать по разным критериями (урл, тип, вес и тд), искать по телу ответа. Обратите внимание на то, какие данные есть у запросов (имя, метод, размер, хэдер, пэйлоад и тд), посмотрите в ответы (удобнее, через Превью).
Application - тут в первую очередь понадобятcя cookies и local, session storages.
Device Toolbar (иконка телефон+планшет) - в верхней панели. Позволяет симулировать разные девайсы.
3. Что нужно сделать/настроить сразу?
* в Console и Network включить Preserve log (это разные чекбоксы), чтобы не терять логи при переходах между страницами
* открыть DevTools до выполнения проверок. Если открыть после того, как ошибка произошла/запрос отправлен, в Network запросов не будет
* в Network выбрать нужный тип запросов и использовать фильтр, это поможет сократить время на поиск нужного
* в Network же снять галку с чекбокса show overview (нужно редко, а занимает большую часть DevTools)
* настроить расположение DevTools в этом же окне или в отдельном (тык на три точки и выбрать иконку)
4. Важно помнить, что:
* открытые DevTools уменьшают вьюпорт (если надо тестировать вёрстку, закройте их или откройте в отдельном окне)
* полезно ориентироваться не только в DevTools в Хроме, но и в других браузерах (там много общего, но есть и различия, которые стоит изучить заранее).
5. Ответы на все ваши вопросы про DevTools Хрома есть тут.
(простите, что тут нет картинок - они сжирают колво букв в сообщении)
Chrome DevTools: с чего начать, если раньше не пользовался
1. В первую очередь стоит обратить внимание на Elements, Console, Network, Application и Device Toolbar.
2. Понять для чего может понадобиться каждая из вкладок:
Elements - тут DOM (объектная модель документа), можно найти элемент на странице по локатору, а можно выбрать элемент на странице и посмотреть соответствующий ему фрагмент в DOM.
Console - имеет 2 функции: просмотр логов и выполнение js скриптов. Можно выбрать различные уровни логирования: от ошибок до информационных сообщений.
Network - тут мы видим запросы и ответы на них. Можно выбрать типы запросов (fetch, media, img и тд), фильтровать по разным критериями (урл, тип, вес и тд), искать по телу ответа. Обратите внимание на то, какие данные есть у запросов (имя, метод, размер, хэдер, пэйлоад и тд), посмотрите в ответы (удобнее, через Превью).
Application - тут в первую очередь понадобятcя cookies и local, session storages.
Device Toolbar (иконка телефон+планшет) - в верхней панели. Позволяет симулировать разные девайсы.
3. Что нужно сделать/настроить сразу?
* в Console и Network включить Preserve log (это разные чекбоксы), чтобы не терять логи при переходах между страницами
* открыть DevTools до выполнения проверок. Если открыть после того, как ошибка произошла/запрос отправлен, в Network запросов не будет
* в Network выбрать нужный тип запросов и использовать фильтр, это поможет сократить время на поиск нужного
* в Network же снять галку с чекбокса show overview (нужно редко, а занимает большую часть DevTools)
* настроить расположение DevTools в этом же окне или в отдельном (тык на три точки и выбрать иконку)
4. Важно помнить, что:
* открытые DevTools уменьшают вьюпорт (если надо тестировать вёрстку, закройте их или откройте в отдельном окне)
* полезно ориентироваться не только в DevTools в Хроме, но и в других браузерах (там много общего, но есть и различия, которые стоит изучить заранее).
5. Ответы на все ваши вопросы про DevTools Хрома есть тут.
(простите, что тут нет картинок - они сжирают колво букв в сообщении)